Editing content on MDN is easy; you can use the built-in WYSIWYG editor to create, edit, and improve articles and other pages almost anywhere on the site. The editor window, shown below, is comprised of eight key boxes. This section will provide information about each section so you know how to use our entire editing environment.
Note: We're constantly working on improvements to MDN, so there will be times when this documentation or the screen shots below may be slightly out-of-date. We'll periodically update this documentation, though, to avoid it being unusably behind.
The page controls area offers buttons affecting the page as a whole:
The page info box contains information about the page, but also can be expanded to offer additional page controls. By default, it displays the page's title and the date and time at which a local draft was saved; the local draft, stored on your computer, is used as a backup in case you accidentally navigate away from the editor or your browser crashes.
You can click the "Edit Page Title and Properties" link to switch to a view offering additional page controls. This view looks like this:
This view allows you to change the page's display title and the depth of the page's table of contents. The display title is the title shown in the browser's title bar (or tab bar) and as the title of the page at the top of the article and in the breadcrumb bar, as appropriate. It doesn't affect the page's URL.
Note: It's worth noting that we prefer short URLs and descriptive titles; for example, the article about the Kuma API has the title "The Kuma API" but its URL slug (the part after the site's root) is Project:MDN/Kuma/API, where "API" represents this page.
The TOC (table of contents) level lets you specify how deeply into the article's heading levels the table of contents automatically displayed on the page should go. By default, heading levels {{HTMLElement("h2")}} through {{HTMLElement("h4")}} are included in the TOC, so that the TOC has a three-level depth. However, you can set this to any of those, as well as "No TOC" (to not display a TOC at all, such as on landing pages) or to show all levels in the TOC.
As is the case with all changes you might make, changes in the page info box do not take effect unless you save the page.
The editor's toolbar offers features that let you adjust the appearance and flow of the article as you work. There are two rows of buttons (more if the width of your window is narrow enough that they wrap, but generally two) and a third row that shows the hierarchy of HTML elements leading up to where you are. In the screenshot below, for example, you're writing inside a top-level {{HTMLElement("p")}} block.
The toolbar's buttons are divided into seven groups. Let's look at each; we will examine the buttons in each group in order left-to-right.
The document options box provides options for document-level manipulations:
Note: When pasting content into MDN, please be aware that if pasting styled content (including, for example, syntax highlighting in code being copied from another site) that you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).
It's worth noting that the Find and Replace buttons both take you to the same dialog box, which offers several configurable options for finding and optionally replacing text.
These buttons provide options affecting or creating blocks in your article.
This is an odd box, in that it consists of just one button: Maximize. This button causes the editor interface (that is, the toolbar and the edit box) to take over your entire browser window, giving you as much space as possible to write.
The heading buttons let you insert a heading. Click one of these buttons to create a new heading at the corresponding depth. By default, H2 through H4 are included in the table of contents, but you can change this, as described in {{anch("The page info box")}}.
The next box is a drop-down menu offering a selection of special formatting options. These are:
Note: This is a note box.
Warning: This is a warning box.
foo = bar()
These buttons are mostly used for providing preformatted text (usually code samples), but our "insert redirect" button is, for some reason, here too.
The final group of toolbar buttons includes options for creating and maintaining links and anchors, as well as for applying inline styles to content.
The edit box is, of course, where you actually do your writing. Right-clicking in the edito box will offer appropriate additional options depending on the context of your click; clicking in a table will offer table-related options and clicking in a list will offer list-related options, for example.
After you've made your changes, it's strongly recommended you add a comment to your revision. This is displayed in the revision history for the page, as well as on the Revision Dashboard. It helps to explain or justify your changes to others that may review your work later. To add a revision comment, simply type the note into the revision comment box before clicking either of the save buttons at the top of the page.
Note: We know that the revision comment box being so far away from the save buttons doesn't make any sense. We're working on design changes that will fix that.
Page tags help categorize and organize information, and help us identify pages that need special attention. Tags are also used to mark pages that are obsolete and may need to be deprecated or even deleted. It's incredibly useful to have good, clean tags on pages, so be sure to have good tags on articles you contribute to.
The tag box is near the bottom of the editor page, and looks like this:
To add a new tag, simply click in the box and start typing:
Here we see the three already existing tags (as button-like objects) and our new tag as unadorned text. When we press Enter or Tab key (or comma), the new tag is committed to the list, and the list looks like this:
For a list of recommended tags, as well as a usage guide for specific tags, please see MDN tagging standards.
There are two ways to remove a tag: you can click on the "x" icon next to its name in its button, or you can click to its right in the editor box and press the delete key on your keyboard.
Your changes are not saved unless you click one of the save buttons at the top of the editor window. Scroll back to the top of the window if you don't see the buttons, then click one of the two green save buttons. Now your change has been committed.
MDN uses reviews to try to monitor and improve the quality of its content. This works by setting a flag on an article indicating that a review is needed. You can learn more about technical reviews and editorial review in the How to guides.
To request a review on the article you've worked on, simply toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.
Be sure to click one of the save buttons after making your selections, to commit your review request.
The attachments box lets you upload files to MDN for use in MDN content, as well as see what files are being used by the current document.
Note: Due to a quirk in our current implementation, files are not associated with pages unless they're actually used in the page. So if you upload an attachment and don't make use of it before you save the article, it will not appear on the attachments list. So be sure to link to it or embed the image right away.
To add an attachment to the page, simply click the "Attach Files" button; this expands the attachment box to look like this:
As you see, there's a table that lets you select a file to upload, then give it a title and, optionally, a description and an additional comment. The title is mandatory, and should describe the file so its usage context is understandable. Once the fields are filled out and you've selected your file, click the "Upload" button to send it to MDN.
Note: Only a select few types of files are permitted as attachments on MDN: GIF, JPEG, PNG, SVG, and HTML. Photoshop images are permitted but should be avoided except in very specific cases. Any other file types will not be allowed by the upload form.
Feel free to open this page in the editor and look at its attachment list at the bottom to get a feel for it.
Once a file has been attached, it will appear (by its title, as you specified in the form) in the image properties dialog box when using images in your article. See {{anch("Adding images to an article")}} for details on this interface. To link to other types of files, copy the URL from the attachments box and use that as your link target when adding links to the page using the link button in the toolbar.
There are a number of convenient keyboard shortcuts available to help you avoid taking your hands off the keyboard while you work. The shortcuts are listed for Windows and Linux; on Mac, instead of using the Control key, you can use the Command key.
| Shortcut | Description |
|---|---|
| Ctrl-A | Select all |
| Ctrl-C | Copy to clipboard |
| Ctrl-V | Paste from clipboard |
| Ctrl-X | Cut |
| Ctrl-Z | Undo |
| Ctrl-Y | Redo |
| Ctrl-K | Open link editor |
| Ctrl-B | Bold |
| Ctrl-I | Italic |
| Ctrl-O | Toggle <code> style. |
| Ctrl-Shift-O | Toggle source view mode. |
| Ctrl-P | Toggles the <pre> style on the current block. |
| Ctrl-U | Underline |
| Ctrl-S | Save changes and close the editor |
| Ctrl-Shift-S | Save changes without closing the editor |
| Ctrl-2 through Ctrl-6 | Select header level 2-6 |
| Ctrl-Shift-L | Toggles between bulleted list, numbered list, and paragraph format |
| Tab | Increases indent level if in indent mode, otherwise inserts two spaces as a tab. Inside tables, this jumps to the next cell, or inserts a new row if there is no next cell. If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph. |
| Shift-Tab | Decreases indent level if in indent mode. Inside tables, this jumps to the previous cell, or inserts a new row if there is no previous cell. If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph. |
| Shift-Space | Inserts a non-breaking space ( ) |
| Shift-Enter |
Exits out of the current block. For example, if you're currently editing a Note: Not currently implemented; see {{bug(780055)}}. |