Help:VisualEditor/User guide/en

 If you would like to try VisualEditor without editing an article, [//www.mediawiki.org/wiki/Project:Sandbox?veaction=edit here is a page] where you can freely test it. You don't need an account to use VisualEditor on that page.

Getting started: the VisualEditor toolbar
center|800px|The VisualEditor toolbar

Editing references
{| cellpadding="15"
 * colspan=2 |
 * colspan=2 |

Editing an existing reference

 * colspan=2 |
 * VisualEditor - Editing references 1.png
 * To edit an existing reference, click on it where it appears in the text (usually as a bracketed number). You will see either a "" icon (bookmark) or an icon (and name) for the template that was used to create this reference. Clicking on this icon will open a dialog where you can edit the reference.
 * colspan=2 |
 * VisualEditor - Editing references 6.png
 * If what appears is the "" icon, clicking on it opens the Reference dialog, where you can edit the reference's contents.
 * colspan=2 |
 * VisualEditor - Editing references 6.png
 * If what appears is the "" icon, clicking on it opens the Reference dialog, where you can edit the reference's contents.
 * If what appears is the "" icon, clicking on it opens the Reference dialog, where you can edit the reference's contents.

Many wikis use templates to format references automatically. If a template is used in your reference, then all the text in the template will be highlighted when you click on the reference information.

If a template was used and you've clicked on information in that template, then the icon (puzzle piece) will appear. Click on that to edit the content of the template, in the template mini-editor dialog.
 * colspan=2 |
 * VisualEditor - Editing References - Cite Web.png
 * If what appears when you click on the reference is one of the several template icons, clicking on it takes you directly to the template mini-editor.
 * colspan=2 |
 * VisualEditor - Editing references 5.png
 * Inside the template mini-editor, you can add or remove types of information or change current content.
 * colspan=2 |
 * VisualEditor - Apply changes.png
 * Click on "" when you're done.
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * VisualEditor - Apply changes.png
 * Click on "" when you're done.
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |

Re-using an existing reference

 * colspan=2 |
 * VisualEditor Cite menu re-use.png
 * If the page already contains a citation that applies to the text you want to source, then you can choose to re-use the existing citation.
 * VisualEditor Cite menu re-use.png
 * If the page already contains a citation that applies to the text you want to source, then you can choose to re-use the existing citation.

To re-use an existing reference, place your cursor where you want to add a new copy of the citation in the text, and click on the "" item from the "$insert" menu.
 * colspan=2 |
 * VisualEditor - Editing references 18.png
 * Look for the reference you want to reuse in the list, and select it. If there are many references, you can use the search bar (labeled "") to only display references that match a given text.
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |

Adding a new reference

 * colspan=2 |
 * VisualEditor references more.png
 * To add a citation using the "" menu, place your cursor where you want to add it in the text. Then press "" and select the appropriate item from the menu.
 * VisualEditor references more.png
 * To add a citation using the "" menu, place your cursor where you want to add it in the text. Then press "" and select the appropriate item from the menu.

Using the "Basic" citation

 * colspan=2 |
 * VisualEditor - Editing references 20.png
 * In the reference editor, you can add, edit and format your citation.
 * VisualEditor - Editing references 20.png
 * In the reference editor, you can add, edit and format your citation.

You can make the reference belong to a given group; this is used to display groups of references with the "" tool.
 * colspan=2 |
 * border|center|300px
 * If you're adding a new reference and you want to include a template in it, click the icon (puzzle piece) in the "" toolbar menu on the reference editor.
 * colspan=2 |
 * VisualEditor - Editing references 9.png
 * Then, look for the template you want to use, add it and edit it as you would an existing one.
 * colspan=2 |
 * VisualEditor - Editing references 9.png
 * Then, look for the template you want to use, add it and edit it as you would an existing one.
 * Then, look for the template you want to use, add it and edit it as you would an existing one.

Click on "" to return to the reference editor, and "" again to return to the page.
 * colspan=2 |
 * border|center|300px
 * If there isn't already a list of references on the page (for example, if you're adding the first reference of the page), you need to add it in order for the text of your reference to be displayed.
 * border|center|300px
 * If there isn't already a list of references on the page (for example, if you're adding the first reference of the page), you need to add it in order for the text of your reference to be displayed.

Place the cursor where you want to display references (usually at the bottom of the page), and click the "" icon (three books) to add it.
 * colspan=2 |
 * VisualEditor - Editing references 11.png
 * If you created groups of references, you can specify a group in this dialog, to selectively display references that belong to it.
 * VisualEditor - Editing references 11.png
 * If you created groups of references, you can specify a group in this dialog, to selectively display references that belong to it.

To simply add a references list, click "$apply" on the dialog.
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |

Using the cite menu

 * colspan=2 |
 * VisualEditor - Editing References - Cite Pulldown.png
 * Your local wiki may have added extra citation templates to this menu. This can offer quick access to some of the more popular citation templates. (Instructions for adding extra citation templates to your local wiki are available at VisualEditor/Citation tool.)
 * VisualEditor - Editing References - Cite Pulldown.png
 * Your local wiki may have added extra citation templates to this menu. This can offer quick access to some of the more popular citation templates. (Instructions for adding extra citation templates to your local wiki are available at VisualEditor/Citation tool.)


 * colspan=2 |
 * VisualEditor - Editing references - Cite book required fields.png
 * Selecting the template icon will take you into the template mini-editor for the template you have chosen. Important information fields may be marked with an asterisk. While the most common fields will display, they are not all required. Unused parameters should not display.
 * colspan=2 |
 * VisualEditor - Editing references - Add parameter.png
 * To add additional parameters, scroll down in the template mini-editor to the "add parameter" option.
 * colspan=2 |
 * VisualEditor - Apply changes.png
 * Click on "$apply" when you're done, and you'll go back to the editor. If there is nothing more to edit, click on "$apply" again to return to the page.
 * }
 * To add additional parameters, scroll down in the template mini-editor to the "add parameter" option.
 * colspan=2 |
 * VisualEditor - Apply changes.png
 * Click on "$apply" when you're done, and you'll go back to the editor. If there is nothing more to edit, click on "$apply" again to return to the page.
 * }
 * Click on "$apply" when you're done, and you'll go back to the editor. If there is nothing more to edit, click on "$apply" again to return to the page.
 * }
 * }

Editing templates
{| cellpadding="15"
 * To add a new template to the page, place your cursor where you want the template to be inserted, and click on the "" icon (puzzle piece) in the "" menu on the toolbar.
 * border|300px|center
 * colspan=2 |
 * Enter the name of the template you want to insert, and click "".
 * VisualEditor - Template editing 4.png
 * colspan=2 |
 * You can also edit templates that are already on the page by selecting them (they turn blue), and clicking on the "" icon (puzzle piece) that appears, or the one in the toolbar.
 * VisualEditor - Template editing 1.png
 * colspan=2 |
 * Adding a new template or opening an existing one opens the "" dialog, with a list of individual parameters and their values (if the template has already been updated to contain TemplateData information; otherwise, a link to the documentation will be available in the dialog).
 * You can also edit templates that are already on the page by selecting them (they turn blue), and clicking on the "" icon (puzzle piece) that appears, or the one in the toolbar.
 * VisualEditor - Template editing 1.png
 * colspan=2 |
 * Adding a new template or opening an existing one opens the "" dialog, with a list of individual parameters and their values (if the template has already been updated to contain TemplateData information; otherwise, a link to the documentation will be available in the dialog).
 * colspan=2 |
 * Adding a new template or opening an existing one opens the "" dialog, with a list of individual parameters and their values (if the template has already been updated to contain TemplateData information; otherwise, a link to the documentation will be available in the dialog).
 * Adding a new template or opening an existing one opens the "" dialog, with a list of individual parameters and their values (if the template has already been updated to contain TemplateData information; otherwise, a link to the documentation will be available in the dialog).

You can add parameters or edit those already listed.
 * VisualEditor - Template editing 2.png
 * colspan=2 |
 * To change a parameter's value, select the parameter in the list, and edit its value in the adjacent window.
 * VisualEditor - Template editing 3.png
 * colspan=2 |
 * When a template embeds other templates, these sub-templates will appear inside the parameters that display them. They can be edited or removed inside the parameter field.
 * colspan=2 |
 * When a template embeds other templates, these sub-templates will appear inside the parameters that display them. They can be edited or removed inside the parameter field.
 * When a template embeds other templates, these sub-templates will appear inside the parameters that display them. They can be edited or removed inside the parameter field.
 * When a template embeds other templates, these sub-templates will appear inside the parameters that display them. They can be edited or removed inside the parameter field.

New sub-templates are added by following the steps of adding a parameter. You may need to check the template documentation to make sure that the sub-template is supported.
 * VisualEditor - Template editing 5.png
 * colspan=2 |
 * When you're done, click "" to close the dialog and return to the page editor.
 * VisualEditor - Apply changes.png
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |
 * colspan=2 |

Substituting templates

 * colspan=2 |
 * When a template must be substituted, type  (colon included) before the template's name.
 * When a template must be substituted, type  (colon included) before the template's name.
 * When a template must be substituted, type  (colon included) before the template's name.

Autocompletion doesn't work with ; if you need the autocompletion, add   only after finding the template you're looking for.

Then, click the green "" button.
 * VisualEditor - Template editing 7.png
 * colspan=2 |
 * Add any parameters as usual and "".
 * VisualEditor - Template editing 6.png
 * colspan=2 |
 * You will see the template expand on the page after you click "". When you're ready save the page.
 * VisualEditor - Template editing 8.png
 * }
 * You will see the template expand on the page after you click "". When you're ready save the page.
 * VisualEditor - Template editing 8.png
 * }
 * }
 * }

Editing poems and other special items
Some items, such as poems and musical scores aren't yet supported by VisualEditor. Until they are, you will need to edit the source wikitext directly if you want to alter or add these.

Keyboard shortcuts
Many editors are used to entering wikitext directly, especially bold, italics and wikilinks. Keyboard shortcuts allow to quickly insert similar formatting without having to click the toolbar buttons. Common general shortcuts, and ones used by other editors, function in VisualEditor: