Lookbook Demo

Previews

      • Rounded
      • Square
      • Playground
      • Themes
      • Standard
      • Sizes
    • Simple list
      • Warning
      • Success
      • Danger
    • Blank Slate
  • Full page example
    • Navbar
  • Phlex Example
  • View template example

No matching results.

Pages

  • Overview
  • Embedding Previews

No matching results.

Embedding Previews

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

And preview embeds can also be used outside of Lookbook if you want to pull them into external docs or showcases.

Preview embeds are added to pages using the <lookbook-embed> element:

<lookbook-embed
app="/lookbook"
preview="Feedback::BlankSlateComponentPreview"
scenario="default"
panels="params,source,output">
</lookbook-embed>

Configuration options are set using attribute key/value pairs on the element.

Read more:

  • Add previews to documentation pages
  • Embedding previews externally
Lookbook Demo
  • Copy debug data
  • Reset local storage
Lookbook v2.3.7
{ "version": "2.3.7", "env": "production", "config": { "project_name": "Lookbook Demo", "project_logo": null, "preview_collection_label": "Previews", "preview_nav_filter": true, "preview_paths": [ "test/components/previews", "/app/app/components", "/app/test/components/previews" ], "preview_display_options": { "theme": [ "light", "dark" ] }, "preview_controller": "PreviewController", "preview_template": "lookbook/previews/preview", "preview_inspector": { "main_panels": [ "preview", "output" ], "drawer_panels": [ "source", "notes", "params", "*" ], "sidebar_panels": [ "previews", "pages" ] }, "preview_embeds": { "enabled": true, "policy": "ALLOWALL", "panels": false, "actions": [ ], "scenarios": [ ], "display_option_controls": true }, "preview_layout": "preview", "preview_disable_action_view_annotations": true, "preview_disable_action_view_partial_prefixes": true, "preview_type_default": "view_component", "preview_sort_scenarios": false, "preview_disable_error_handling": false, "page_collection_label": "Pages", "page_nav_filter": true, "page_controller": "Lookbook::PageController", "page_route": "pages", "page_paths": [ "test/components/docs" ], "page_extensions": [ "html.*", "md.*" ], "page_options": { }, "markdown_options": { "tables": true, "fenced_code_blocks": true, "disable_indented_code_blocks": true, "strikethrough": true, "highlight": true, "with_toc_data": true, "lax_spacing": true }, "highlighter_options": { "theme": "github", "dark": false }, "component_paths": [ "app/views", "app/components", "app/components" ], "reload_on_change": false, "lazy_load_previews_and_pages": false, "live_updates": false, "listen_paths": [ ], "listen_extensions": [ "rb", "html.*" ], "autoload_previews": true, "ui_theme": "indigo", "ui_theme_overrides": { }, "ui_favicon": true, "log_level": 2, "log_use_rails_logger": true, "debug_menu": true, "links": { "docs": "https://v2.lookbook.build", "demo": "https://v2-demo.lookbook.build", "repo": "https://github.com/lookbook-hq/lookbook/tree/v2" }, "using_view_component": true, "dependencies": { "actioncable": false, "listen": false, "view_component": true }, "panels": { "assets": { "label": "Assets", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": "#<Proc:0x00007f9563623a68 /app/config/application.rb:57 (lambda)>", "partial": "lookbook/panels/assets", "name": "assets" } }, "inputs": { }, "tags": { } } }