VisualEditor/Design/Reference Dialog


This document describes the current and future proposed designs for a citation insertion and editing dialog for use within VisualEditor.


Improve the experience of adding references to an article using VisualEditor.

  • Decrease the amount of time spent navigating the reference wizard
  • Surface the common types of reference templates for easy selection
  • Use data such as ISBN or links to autofill parameters if capable

ExistingPrevious user flow[edit]

Here is a guide on how to insert a reference. The existing flow involves at least 10 steps.


The initial steps are a barrier to new editors, especially finding a template to use.

“There is no obvious way of inserting a reference from the list.” Arson McFire (talk)

More feedback here and there (on copying references and citations).


Easy selection of reference template[edit]

There will be a per-wiki (locally defined) set of up to 6(?) templates that are displayed on the first screen for easy selection; below are shown an example of how the English Wikipedia might wish to configure it for their needs, with the following types used for the example: Book (auto fill on ISBN), Web, News, Journal (autofill on DOI? PMID? JSTOR?), Media (w:Template:Cite AV media ?)

A search box will be available for the user to find other reference templates. The search results will be filtered to only include templates that useful for citation and footnoting purposes, and the search parameters will match against any fields in the TemplateData. The search results will display a short name rather than the template name. (e.g. w:template:cite PMID will display 'Pubmed' or 'PMID' rather than 'cite PMID')

Dialog Design[edit]

Archive Design Iterations See Here

Auto-filled Web Citations[edit]

View a prototype.