User Guide / Previews

Preview Layouts

Previews render with the application layout by default, but it is strongly recommended to use a standalone preview layout for previews so it can be customised without the chance of affecting the main application.

Setting the layout

Use the layout option to set a specific layout for an individual preview class:

  # test/components/previews/example_component_preview.rb
  class ExampleComponentPreview < Lookbook::Preview
    layout "admin"
    # ...
  end

To set a custom layout globally for all previews, use the preview_layout config option:

  # Set the default layout to app/views/layouts/component_preview.html.erb
  config.lookbook.preview_layout = "component_preview"

Note that if you are using ViewComponent, this option should be set via the view_component.default_preview_layout config option instead, as per the ViewComponent docs:

config.view_component.default_preview_layout = "component_preview"

Lookbook will respect this value when rendering its previews.

Preview layout example

An example preview layout template is shown below. It uses display variables to allow the background color and and the maximum width of the wrapper to be set on a per-preview basis.

<!-- app/views/layouts/component_preview.html.erb -->
<!DOCTYPE html>
<html style="background-color: <%= params.dig(:lookbook, :display, :bg_color) || "white" %>">
<head>
  <title>Component Preview</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= stylesheet_pack_tag 'application', media: 'all' %>
  <%= javascript_pack_tag 'application' %>
</head>
<body style="padding: 20px">
  <div style="
    margin-left: auto;
    margin-right: auto;
    max-width: <%= params.dig(:lookbook, :display, :max_width) || "100%" %>
  ">
    <%= yield %> <!-- rendered preview will be injected here -->
  </div>
</body>
</html>

Preview helpers

Lookbook includes a few helpers that are only accessible in preview templates and can be used to help clean up display param and custom data access, if desired:

lookbook_data (key, fallback = nil)

No description available.

url_for (*args)

No description available.

User Guide

Extending Lookbook

API

Elsewhere