Embedding Previews :: Lookbook Demo

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.

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:0x00007f2264d62710 /app/config/application.rb:57 (lambda)>", "partial": "lookbook/panels/assets", "name": "assets" } }, "inputs": { }, "tags": { } } }

No matching results.

No matching results.

Embedding Previews

Read more: