In this article, we explain the various components of the help center builder. You can access it from [MDX CODE]

Your help center is organized in a hierarchy as follows: Version > Section > Category > Article.

Versions and sections

In the top bar of the builder, you will find the versions dropdown. A version is the highest level in the hierarchy. It encompasses everything about that version of your product or service. In the version dropdown, you can create, clone, and delete versions, as well as switch to editing a specific one. Cloning a version will copy all of its contents (all sections, categories, and articles).

You can also reorder the versions in the dropdown by dragging the scrubber. The topmost version is the one that will be selected by default.

Across the top bar, you also have the sections within the currently selected version. Sections can be used to separate different parts of your documentation, and each section can be either tutorial-style or reference-style. You can create, edit, or delete a section from this bar.

The top bar also contains links to:

• The published view of your help center.
• Settings for your help center. See Customization for more info.

Categories and articles

In the left sidebar of the editor, you will find the categories and articles. You can add, edit, and reorder them from this sidebar.

Below the categories, you will find the trash. When you delete an article, it will be moved to the trash for 30 days before being permanently deleted. If you go to an article in the trash, you can restore it.

Categories and articles behave slightly differently depending on the type of section.

In a tutorial-style section:

• Categories are used to group a bunch of related articles in the side navigation.
• Articles are standalone webpages.

In a reference-style section:

• All categories and articles are joined into one long webpage, with the category and article names serving as headings and subheadings. The categories and articles are still visible in the side navigation, and clicking on them will scroll the page to the article you clicked on.

Categories and articles can be reordered by dragging their scrubber. They also have some status indicators:

• Red circle outline: There are unsaved changes to this article.
• Blue circle outline: There is a recent draft that hasn't been published.
• Red dot: A user left feedback on this article, and the feedback hasn't been resolved.
• Greyed out name: This article has never been published.

The article editor

The article editor is in the middle of the screen. It consists of a large textarea and various tools and buttons above. By default, the textarea behaves like a rich-text editor. You can use the toolbar above to modify the text and insert various elements.

In a reference-style article, there is a code area side-by-side with the article. The code area allows you to highlight code snippets that are relevant to the article. The code snippet will be displayed to the side of the article when published.

The toolbar also contains a button to switch to Markdown. Technical writers typically prefer writing in Markdown, while non-technical writers prefer rich-text Pavior maintains a perfect mapping between the rich-text view and the Markdown view. You can always switch between the two modes, and even have multiple people working on different modes at the same time.

Above the toolbar, you can find:

• The article title. You can edit it by clicking on it.
• The article slug in blue. This will be the url of the article. By default, it will be automatically generated from the article name.
• The Preview button. You can use this to see what the article would look like if it was published, without publishing or saving a draft.
• The Save to drafts button. This will save your current edits as a draft without publishing it. A draft can be shared with your teammates for further edits or to get feedback.
• The Publish button. This will save your current edits and make them publicly visible to all users.

The toolbar buttons

• Undo and redo do exactly what you expect
• Header selection will adjust a line of text to a certain size header
• Bold will make the selected text bold
• Italic will make the selected text italic
• Code will make the selected text monospaced and styled like code
• Bullet list will make an unordered list
• Number list will make an ordered list
• Blockquote will insert a blockquote
• Link will allow you to add a link to a selected piece of text
• Image will upload an image
• Table will insert a table
• Code block is like Code but in its own container, not inline
• Shortcode lets you insert MDX where your cursor is, and manage your code library
• Markdown toggles between rich-text and Markdown

Article history

In the right sidebar, you can find the article's history. Each time you press Save to drafts or Publish, an entry will be added to this list. You will also have the option to Unpublish the most recently published edits. This will make the article invisible, as if you had never published it. If you have unsaved changes, you will see these in the history list, with the option to discard the changes.

Each history entry has the publish date, the user who published it, and some status indicators:

• Red circle outline: This entry is unsaved. It is only on your local device and cannot be seen by anybody else.
• Blue circle outline: This entry was saved as a draft.
• Blue circle filled in: This entry was published at some point.
• Red dot: A user left feedback on this article, and the feedback hasn't been resolved.

If you have unsaved changes, and somebody else has drafted or published an article version more recently than when you started your changes, there will be a warning notifying you of this before you can edit the article. If you encounter this scenario, it is best to discuss with the person who published to decide what changes should be made.

At any point, you can switch to a history entry to see exactly what that article looked like, and to view any user feedback on that version of the article.