Editor components

Every help center article and changelog entry is written in the same editor. Press / on an empty line to open the component menu, then type a few letters to filter it. Select text instead and a formatting bar appears above it. To move an image or another block to a different place in the article, drag it to its new position. Where a line shows controls when you hover over it, use them to move that block.

Each section below carries a live example, so you can see what a reader gets.

Headings

Three levels are available. Type #, ##, or ### followed by a space, or pick the level from the formatting bar.

Text formatting

Select any text to make it bold, italic, struck through, or inline code.

Type @ to link another article. The link renders as a pill carrying that article's own icon, like this one: Version History

Type : followed by a name to insert an emoji 🚀

Badges

/badge puts a small colored label inside a line of text. Use one for a plan name, a status, or a version.

Live Beta Scale plan Changed Removed Draft

Pick the color in the form that opens with the command.

Tooltips

/tooltip attaches a short explanation to a word. Hover the dotted word to see it: every request needs an API keyAPI keyA secret key that identifies your workspace. Create one in Settings, under API.Read the API docs.

The tooltip can end with a link to a page that explains more.

Icons

/icon places an icon inside a line of text, like for a guide or for an API page. Search the picker by name.

Numbered list

A numbered list renders as steps, so a reader can follow a procedure in order.

1. Press / on an empty line.

2. Type the name of the component you want.

3. Press Enter.

Start a step with a bold line to give it a title.

1. Write the article

   Draft it in the editor, with any of the components on this page.

2. Publish it

   Readers see it on your docs site right away.

Bulleted list

Bullets take the accent color of your portal.

• One point per item.

• Keep each one short.

Checklist

A checklist suits a setup page, where the reader works through the boxes.

• Turn on your docs site

• Publish your first article

• Point your own domain at it

Callouts

A callout sets a sentence apart from the text around it. Six styles tell the reader how much it matters.

A note adds background the reader may want before the next step.

An info callout points the reader to related reading.

A tip shares a faster way to finish the same task.

A check confirms that the reader finished a step correctly.

A warning flags a step that is hard to undo.

A danger callout marks an action that deletes data.

Type / and the name of the style, like /tip callout. /blockquote gives the note style.

Collapsible section

A collapsible section holds detail behind a summary line. The reader opens it when they want it.

Divider

A divider closes one part of a page and opens the next.

Code block

Pick the language from the picker in the top corner of the block. Readers get a copy button on hover.

const res = await fetch("https://productlane.com/api/v2/threads", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.PRODUCTLANE_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Docs feedback",
    text: "<p>The setup page skips a step.</p>",
    pain_level: "LOW",
    contact_email: "[email protected]",
  }),
})

Code group

A code group stacks several blocks in one card, one tab per block. Use it to show the same call in each language you support.

await fetch("https://productlane.com/api/v2/threads?limit=25", {
  headers: { Authorization: `Bearer ${process.env.PRODUCTLANE_API_KEY}` },
})

requests.get(
    "https://productlane.com/api/v2/threads",
    params={"limit": 25},
    headers={"Authorization": f"Bearer {os.environ['PRODUCTLANE_API_KEY']}"},
)

curl https://productlane.com/api/v2/threads?limit=25 \
  -H "Authorization: Bearer $PRODUCTLANE_API_KEY"

Rename a tab from the bar at the top of the card.

Tabs

Tabs hold any content, one panel at a time. They work well for steps that differ by platform or plan.

Cards

/card adds one card. /card group sets two or more side by side. A card can carry an icon and a link, so it sends the reader on to the next page. To link a card, add a link to its title text. The portal stretches that link over the whole card, and every card in a group has its own title, so each card can point to a different page.

Tiles

/tiles builds a grid of image previews. Each tile has a title, a short description, and a link.

Docs tabs

Split your docs into sections

Screenshots

Capture the app for an article

Custom domain

Serve docs from your domain

Frame

/frame puts a border around an image or a video. A caption under it says what the reader is looking at.

Update

/update marks a dated entry, the way a changelog page lists its releases. The label and the date sit beside the entry.

File tree

/file tree draws folders and files, for a page that explains how a project is laid out. Readers open and close each folder.

Mermaid diagram

/mermaid diagram turns Mermaid text into a diagram. Edit the text and the diagram redraws.

flowchart LR
  A[Customer asks] --> B{Agent sure of the answer?}
  B -->|Yes| C[Agent replies]
  B -->|No| D[Linear issue]

Prompt

/prompt gives readers a prompt to copy into their own AI tool. The page shows the description, and the button copies the full prompt.

Add the Productlane widget to this app. Load the script in the root layout, then call Productlane.init with the widget key from the Productlane settings.

Colors

/color swatches shows a row of colors. /color table groups them into named rows. A reader clicks a swatch to copy its value.

API fields

/parameter field documents one input of an API call: its name, where it goes, its type, and its default.

/response field documents one property of the response. /expandable folds the properties of an object under a toggle.

Table

Drag a column edge to resize it. With your cursor in a table, the slash menu also offers commands to add or remove a row or a column.

Media

/media uploads an image or a video from your machine. Files go up to 30 MB.

A PDF uploads through the same command and renders in the page. So do Word (.docx), Excel (.xls, .xlsx, .xlsm), and CSV or TSV files. The file picker does not offer .json or other file types, so to share JSON, paste it into a code block.

/image gallery collects several screenshots into one carousel the reader pages through.

/youtube takes a YouTube URL and renders the player in the article. Watch, share, and embed links all work, and the player runs in YouTube's privacy-enhanced mode with autoplay off.

/loom does the same for a Loom share or embed link. Pasting a YouTube or Loom link into the editor also turns it into a player. In live chat, Slack, and email replies, a Loom video goes out as a link to the recording, since those channels cannot show a player.

/embed puts any other URL in a frame, for a Figma file or a status page.

Writing components through the API

The v2 API and the MCP server read and write article bodies as markdown. Most of this page is plain markdown on the way in and out.

The other components use the same tags as Mintlify, so a page copied from Mintlify docs keeps them: