Editing MDN pages

This page describes some common tasks when editing MDN pages.

Start editing a page

  • If you are not logged in to MDN, click Sign In at the top of the page, and log in using Persona (BrowserID). If necessary, create an account.
  • To edit an entire page, click Edit at the top of the page. The page switches to edit mode, and shows the contents of the page inside an editor panel.
  • To edit a section of a page, click Edit next to the heading of the section you want to edit. The editor panel contains only that section, with the rest of the page still read-only. Wouldn't that be nice! :-)

Save your work

The editor in MDN offers multiple ways to check and save your work.

  • Save changes: Saves your changes and leaves edit mode, returning the page to reading mode. This is the same as the Save and Exit button in the editor toolbar.
  • Save and keep editing: Saves your changes, remaining in edit mode. This is the same as the Save and Keep Editing button in the editor toolbar.
  • Preview changes: Renders your changes in another browser tab. This view executes any templates that are referenced in the page, so that you can see how the templates will appear to readers.
  • Discard changes: Throws away your changes since the last save, and returns the page to reading mode.

If you are editing a section (not the whole page), you see these buttons:

  • Save: Saves your changes and returns to reading mode.
  • Cancel: Discards your changes and returns to reading mode.

Modify the page info

While a page is in edit mode, you can modify some of the page metadata. Click the "i" to open the page info fields.

  • Title: The title that appears in the browser title bar and at the top of the page content.
  • Slug: The last part of the URL for the page. Normally, this is based on the page title (appropriate substitutions for spaces and special characters), but you can change it.
  • TOC: If this box is checked, a table-of-contents is automatically generated for the page, based on the headings within the page (up to H4), in a box near the top of the page.

Any changes to these fields are saved when you save the page as a whole.

Format text

The editor offers several toolbar buttons to help with formatting text. Some of these of common to many editors and need no explanation.

  • Source: Switches the editor from visual editing to HTML source editing.
  • H1, H2, H3, H4, H5, H6: These buttons correspond exactly to the corresponding HTML heading elements. This is different from the previous version of the MDN editor, where pressing H1 produced <h2>, and so on. Therefore, avoid formatting with H1, as there should be only one <h1> element in a page, and for MDN, that is produced by the page title.
  • PRE: Encloses the selected text in a <pre> element. Clicking this button enables the Syntax Highlighter menu next to it, which lets you select the type of code, so that syntax highlighting is applied appropriately.
  • Styles: Selecting an item from this menu surrounds the selected text in a <div> (for block styles) or <span> (for inline styles) element with the corresponding class identifier. This enables the affected text to be appropriately styled by MDN's style sheets.


Document Tags and Contributors

 Contributors to this page: fscholz, rogerhc, jswisher
 Last updated by: rogerhc,