HTML/JS/CSS

To help developers using your documentation, it's possible to display a live HTML/JS/CSS preview. This type of code example behaves very much like typical HTML/JS/CSS playgrounds e.g. Codepen, JSFiddle etc. There are 3 panels for each of HTML/JS/CSS and the previews reload live when you make changes to any of them:

Gif shows icon and text change from black to red in the live preview.

Add a live preview

1) Choose the Code option from the toolbar.

2) Pick the HTML preview option.

3) Add your code

Use a pre-processor

As you can see, the CSS tab has some pre-processing options for SCSS/Sass/LESS:

Red rectangle around the preprocessing options

👉 Note: We recommend compiling your SCSS code into your CSS file to save you from writing the mix for each live preview box.

Code resources - import external JS / CSS files

By going into the HTML live preview settings you can also import external JS / CSS files into your code previews. This is so that you can use a global stylesheet for all the components in your styleguide instead of having to input the same CSS every time.

Red circle around the HTML live preview settings

Code resources section in the styleguide settings

👉 Note: Any files imported from the settings will be imported into all the HTML live previews. Make sure the JS/CSS files are imported using HTTPS, because HTTP will not work for security reasons.

Live preview display options

Fixed width

You can choose to display your code block with a fixed width. When you add a code block, go to settings and toggle on fixed width. You can then adjust the width of your code frame to a fixed width to be displayed in viewer mode.

If you choose the fixed width option then the resizing handle in the viewer mode will not be visible.

Code collapsed by default

You can choose to hide your code by default on Live preview code blocks. By toggling this on the code will be automatically collapsed in both editor and viewer modes.

Press ALT when toggling to apply the changes to all blocks on that page.

This is great when you want your viewers to focus on the content inside the preview rather than the code underneath. For example when showing a live animation without having the code automatically visible.

Settings display fixed width and code collapse by default toggled on

Pair the Fixed width and Code collapsed by default for a crisp, clutter-free experience for your viewers.

HTML/JS/CSS