Image

Add a static image to your documentation with the image block.

1. Select Image from the block menu
2. Click Select Image and choose the image you would like to add
3. Optionally select alignment for the image left | center | or full width

Add a caption

1. Hover over the image and click Caption, or click the ≡ menu and click Add caption
2. Add a caption below the image

Delete an image

1. Click the ≡ menu and select Delete

Replace an image

1. Click the ≡ menu and select Replace
2. Choose a new image

---

Link

Use an embed block to add a link to any external URL. The link will display the name, description, and image for the URL (when available).

1. Select Link from the block menu
2. Enter the URL you would like to embed and click Embed

Link to a URL

1. To link to a URL, highlight a section of text and click the Link icon in the rich text editing toolbar
2. Switch to the URL tab and type or paste the URL you would like to use
3. If you want to open the page in a new tab, turn Open in new tab to ON
4. Click Confirm to save

Link to a page

In Supernova, you can easily link to another page in the documentation. In the case that a page gets moved or renamed, the link will stay valid.

1. To link to a page, highlight a section of text and click the Link icon in the rich text editing toolbar
2. Switch to the Page tab and select the page you would like to use (or type to filter)
3. If you want to open the page in a new tab, turn Open in new tab to ON
4. Click Confirm to save

---

Embed

Embed external content in an iframe.

1. Select Embed from the block menu
2. Enter the URL you would like to embed and click Embed
3. To vertically resize the embed block, hover and click the resize handle to desired height

 

The URL entered should not be an iframe code, but the URL to the embeddable content. The content will be viewable in the documentation editor, but you cannot interact with it. If your provided URL failed to produce the desired content, click Replace in the block menu to try a different URL.

Example of embedded content:

---

Youtube

Embed a YouTube video from a URL.

1. Select YouTube from the block menu
2. Enter the URL of a YouTube video and click Embed

---

Storybook

Embed a Storybook story from a URL.

1. Select Storybook from the block menu
2. Enter the URL of a Storybook story and click Embed
3. The story will be displayed — click on the block to open the story in a new window
4. You can optionally resize the container vertically by using the resize handle (accessible on hover)

Show more details with Add-Ons

You can also show more details about the story and interact with its properties by enabling the Storybook Info Add-on.

1. Hover over the block to access the display menu
2. Turn the toggle ON to enable Add-ons

---

Shortcuts

Link to another page in your documentation or add external links as shortcuts.

Add shortcuts

1. Select Shortcut from the block menu
2. Click + Add shortcut to add a new shortcut
3. Select Group or Page to add a page from your documentation, or External URL to add a link
4. Click Confirm

Edit shortcuts

To edit the path of a shortcut, click on the ≡ menu and select Edit shortcut

To delete a shortcut, click on the ≡ menu and select Delete shortcut

To add an image, click Add image on the shortcut

To remove an image, click on the ≡ menu and select Remove image

Reorder shortcuts

You can reorder the shortcuts in a shortcut block with drag and drop.

1. Hover on the shortcut you would like to move
2. Click and drag the ≡ icon to reorder

---

Render code

Display rendered code.

1. Select Render Code from the block menu
2. Type or paste code into the box
3. Your rendered code will appear in the preview above
4. To verticallly resize the preview area, click the resize handle and drag to the desired height

 

The following options for render code blocks are available in the block configuration menu (right):

• Alignment: Choose whether to align the preview left or center
• Background color: Select a background color for the preview
• Show code view: If turned off, the code will be hidden in the published documentation, only the preview will be shown
• Edit dependencies: This will take you to the settings page to edit the package.json, see below

Edit dependencies

Include custom or predefined dependencies for your code block.

1. Either click Edit dependencies in the block configuration menu, or go to Settings -> General -> Render Code Package.json
2. Select a template to use if you want to use an existing library as a dependency, or fill in the package.json with your own custom content
3. If you select a template and make edits, you can click Reset to default to start with the default template again
4. The dependencies will now be used for all of your Render Code blocks