Document your design system with our powerful editor, and integrate your Supernova design system data to keep your documentation effortlessly up to date.
In our editor, you can collaboratively write and maintain your documentation, customize the appearance of your documentation site, and manage your content workflow, so that information is shared when it's ready (and when you're ready).
Our editor uses a series of flexible 'blocks' that allow you to add content quickly and easily, and open up endless opportunity to effectively share your documentation with your team — or even the wider world.
Documentation features
Our documentation editor includes:
- rich text editing, code blocks, and images
- add static images from Figma frames
- add special blocks created from your design system data, such as:
- individual tokens, token lists and groups
- individual components, component lists and groups
- component sandbox
- custom URL embeds, including Figma frames, Storybook and YouTube
- add custom shortcuts to other sections of your documentation
Using the documentation editor
To open the documentation editor, click the Documentation icon in the left menu.
Writing and editing
The documentation editor behaves like any familiar document text editor (such as Google Docs, Microsoft Word, or Notion). You can type anywhere, select text, copy and paste, and add rich content blocks that include information about your design system.
In additional to the standard rich text formatting options, you can also change the type of text block, easily click to switch between header types, and add links.
You can also change the type of text block using the Convert to... menu option.
Blocks
A block is any kind of content you add to the page, such as text, lists, quotes, dividers, or media. You can move blocks around on the page to reorder your information.
Inline code
Plain text can also be formatted as inline code with the rich text editing bar.
Highlight the text and click the code icon button to convert it to an inline code block.
This is what inline code looks like.
Pro Tip: Press cmd or ctrl + e to convert text to inline code
Multiplayer support
The documentation editor allows for multiplayer use, meaning you can create and edit your documentation alongside your team, at the same time.
You'll see a cursor with your team mate's name when they're editing a page at the same time as you.