BibTeX Plugin: UI/UX Document

This is a quick sketch of the UI components of the plugin.


I wanted to choose an icon that is expressive and functionality-related. First, I had the idea to include an icon of a book, but I found that to be too vague and there may be other features or plugins that use this icon. The final decision is an icon that resembles a Graduation Cap (It is part of the font-awesome library, here). I think this is more meaningful and relevant but other suggestions are welcome as well.
Here's is a demonstration of how the icon will look in the settings section:

Config Screen

There is not really that much to do in the config screen, in terms of the UI

Citation Popup

This popup will be displayed when the addBibTexReference command gets executed (by a toolbar button or a menu item). In addition, the user will be able to insert a citation into the current place in the note by clicking on the search results displayed. Once a result is clicked, the popup will disappear and the user will have to invoke the command again. This is because it is unlikely that the user will need to insert several references in the same place

MarkDown Editor

According to the specification, the inserted reference should resemble the following format:
Markdown Editor

Rendered View

In the rendered view, the reference should be displayed in two different places: in-line (embedded in the main text) and at the very bottom of the rendered view.

Rendered View - Top

At the bottom:
Rendered View - Bottom

All suggestions and modifications are welcome.


1 Like

This plugin could be really useful for me. I realise the example references in the screenshot are a bit ad hoc, but I am slightly disturbed at how the second of the two references above totally messes up "et al."

1 Like

Thanks, I fixed it.

1 Like

Shouldn't there be a button to allow the user to select a file?

Citation Popup

Looks good, and maybe investigate what component you could use for dropdown list. I guess it should have type ahead support?

MarkDown Editor

The link should be a valid Markdown link. For example:


That way even if the plugin is not installed, the link would still be valid. What you have in your screenshot wouldn't work.

Rendered View

Looks good. Does the citation have to be bold? Also perhaps investigate how citations are displayed in research papers normally. What are the different standards? For example some would display pages (eg (Rosen, 2019, pp. 67-69))

Same for the footnotes, check how it's normally formatted in research papers and see if there are standards. For example should it display the pages. What's in parenthesis, what's in quotes, what's italic, etc.

The final decision is an icon that resembles a Graduation Cap

Looks good!

1 Like

I was thinking about adding that at the beginning but, for some reason, I forgot. I will add it then.

Yes, it will have type-ahead support and I'm thinking maybe I could use typeahead.js for that.

In here, it is stated that there is no need for DOI at all. So, I'm kinda puzzled about what to do if the DOI is not provided. Maybe a fake URL? What do you think?

Noted, Gonna work on that.

Yes if it's provided you use it. If not you still need to provide a URL, so it's up to you to think of a good alternative for that.

1 Like

Config Screen

I've added a "browse" button.


I found that typeahead.js is precisely what I need (Typeahead with dropdown menu). It's a cool library from Twitter and has great features.

DOI alternative

I came up with a simple idea but I don't know if this is the best solution. The idea is to include the URL of the results page when searching with the citation key in Google Scholar. For example, If the citation key is "RosenDiscreteMathematics", then the in-line reference will look like this:
@RosenDiscreteMathematics. The URL, in this case, is guaranteed to be valid and also relevant to the citation subject. This guarantee is under the assumption that the citation key does not contain spaces (which is true because otherwise, the Parser class would have reported that error before).

Regarding the format of the references (which to bold, which to italic, and how to include pages and chapters), I still need some time to decide on that so please give me your opinions on the above suggestions till then.


I've made a tiny mistake in the post so please wait until I fix it. It should take a couple of minutes.

Regardless of the exact format you choose, references should have distinct CSS classes so users can set their own style. But adding this should be a relatively low priority.


Maybe I didn't understand what you mean here. but I don't think it is uncommon to have something like this


Oh! Now the citation popup as well as the rendered view should support adding several references at the same place.
Good hint.

Indeed that looks pretty good.

Good idea! Maybe to improve the results you could even feed it something like "article title, author"?

1 Like

This is even better because the citation key does not necessarily contain information regarding the content of the subject.
OK, this is now settled.

I did read here and here. I also checked out some free sample papers in here and came up with the following conclusions.

In-line citation

I found that in-line citation is not as straightforward as I thought it will be; there are a lot of styles and cases to handle and I cannot find, till now, a library to do that for me.

Full References

On the other hand, full references are somewhat easy to handle and most of the libraries I mentioned in the proposal can do that. In addition, there are some firm and clear rules regarding the style of the full references; I'm talking about APA citation, of course.

The rules are as follows:

  • Alphabetical: Arrange references' entries in one alphabetical sequence by the surname of the first author, or by title or first word if there is no author (pp.181-183). Ignore the words A, An, and The when alphabetizing by title.
  • Capitalization: In titles and subtitles of articles, chapters, and books, capitalize only the first letter of the first word and any proper nouns (p.185).
  • Italics: Italicize book titles, journal titles, and volume numbers. Do not italicize issue numbers.

On top of that, I found there's no need to bold anything either in the in-line citation or in the full references.

It will then be necessary to think about foreign languages...
For example, in french : Lā€™ Le La Les Un Une Dā€™ De Des

1 Like

For now, I'm assuming that titles of articles and journals are written in English. However, I can handle that later.

@blank makes a good point. The spec you found is pretty good but is specifically for English language while, at least according to Google Analytics, only about 50% of Joplin users use English:

So perhaps you should consider not doing anything that's language specific at this point even it means sorting in a slightly different order. For example "the" or "an" are words that mean something else in non-English languages so they shouldn't be stripped off.

1 Like

I would tend to agree, while as an english academic I rarely come across or use non-english papers, I would feel very safe betting my peers and I would be ok with non standard capitalisation compared to APA if that meant the usability was increased for international users (not to mention the fact that there are a billion different stylistic choices in citations anyway)


One though about the bibliography at the bottom. I think it would be better to make this an optional thing the user can include or not as they desire. Something akin to using ${toc} to make a table of contents. This means short notes that only contain a few citations (like a small to-do list for example) don't get bloated with where the references come from but bigger texts can still have them!

On a related note while I think about it, if you are going to do that, exposing a header for ${toc} to find so a "References" link can be added would be very useful!


Well, these are pretty good ideas and I feel I should implement them after the milestones.

1 Like