User Guide / Pages

Rendering Embedded Previews

You can embed previews from your project directly into Lookbook content pages to help create living documents that always feature the latest changes to your component previews.

A basic preview embed within a documentation page looks like this:

Basic preview embed
Basic preview embed

Adding previews to pages

Preview embeds are added to pages using the <lookbook-embed> element. Customisation options are set using attribute key/value pairs on the element:


See preview embed configuration section to learn more about available customisation options.

Getting embed codes

The quickest way to get an embed code is to open the relevant preview in Lookbook and click on the ‘embed’ icon in the top right toolbar.

This will open a panel where you can see the embed code for the current preview. Just copy and paste the code from here into the desired page and the preview embed will be displayed.

Embed code dropdown
Embed code dropdown

The embed code will automatically reflect any @param values that have been set - so the resulting embed will default to these values.

The `embed` helper

There is an embed helper method available to Lookbook content pages that can be used as an alternative to using embed codes directly.

The helper accepts a preview class and a method name (as a symbol) to determine what to render:

<%= embed Feedback::BlankSlateComponentPreview, :default %>

This will generate a preview for the default scenario of the Elements:ButtonComponentPreview preview class.

Preview params

If you have configured your scenarios to accept preview params, then you can supply values for those params when rendering the embedded preview:

<%= embed Feedback::BlankSlateComponentPreview, :default, params: {
  icon: "plus",
  text: "Add new"
} %>


Preview embeds can be configured to display one or more inspector panels.

The panels option accepts an array of panel names of the panels you wish to display for this embed:

<%= embed Feedback::BlankSlateComponentPreview, :default, panels: ["source", "notes"] %>

Available panels:


The source code for the current preview


Notes on the current preview


Displays the dynamic param editor fields


The rendered HTML output from the component

Note that the wildcard character * can be used to represent ‘all other panels’.

["*"] <!-- show all panels, including any custom ones -->
["notes", "source", "*"] <!-- show notes, then source, then all other panels -->
Preview embed with source and notes panels
Preview embed with source and notes panels

User Guide

Extending Lookbook