All available Lookbook configuration options.
project
project_name
[String,Boolean]
Customise or disable the project name displayed in the Lookbook header. Defaults to the parent application's name.
Example:
config.lookbook.project_name = "Lookbook Demo" # custom project name
config.lookbook.project_name = false # hide the project name
project_logo
[String,Boolean]
Customise or disable the logo displayed in the Lookbook header.
Example:
config.lookbook.project_logo = "<svg>...</svg>" # custom SVG logo
config.lookbook.project_logo = false # hide the logo
previews
preview_collection_label
[String]
The label used to denote the previews section of the sidebar nav.
Default:
Previews
Example:
config.lookbook.preview_collection_label = "Component Previews"
preview_paths
[Array]
Array of additional directory paths that Lookbook should look for previews in.
Default:
[]
Example:
config.lookbook.preview_paths = ["path/to/my/previews"]
preview_display_options
[Hash]
Default (fallback) display params that will be merged with any preview-specific display params and made available in the preview layout template.
Default:
{}
Example:
config.lookbook.preview_display_options = {
bg_color: "#fff",
max_width: "100%"
}
preview_controller
[String]
The controller used when rendering previews.
Default:
"Lookbook::PreviewController"
Example:
config.lookbook.preview_controller = "MyCustomController"
preview_inspector.drawer_panels
[Array]
List of panels to display in the preview inspector.
Default:
[:source, :notes, :params, "*"]
Example:
config.lookbook.preview_inspector.drawer_panels = [:notes, :params]
preview_embeds.enabled
[Boolean]
Whether or not preview embeds are enabled.
Default:
true
Example:
config.lookbook.preview_embeds.enabled = false
preview_embeds.policy
[String]
Preview embeds security policy.
ALLOWALL - allow on any site.
SAMEORIGIN - only allow on same domain
DENY - don't allow embedding at all.
Default:
"SAMEORIGIN"
Example:
config.lookbook.preview_embeds.policy = "ALLOWALL"
preview_embeds.panels
[Array]
List of panels to display in embeds by default.
Default:
[]
Example:
config.lookbook.preview_embeds.panels = [:notes, :source]
preview_embeds.actions
[Array]
List of actions to include in embeds by default.
Default:
[]
Example:
config.lookbook.preview_embeds.actions = [:open]
preview_disable_action_view_annotations
[Boolean]
Turns off action view filename annotations when generating rendered component source.
Default:
true
Example:
config.lookbook.preview_disable_action_view_annotations = false
preview_sort_scenarios
[Boolean]
Whether or not to sort preview examples in the navigation alphabetically (as opposed to displaying them in the order they are defined in the preview class).
Default:
false
Example:
config.lookbook.preview_sort_scenarios = true
pages
page_collection_label
[String]
The label used to denote the pages section of the sidebar nav.
Default:
Pages
Example:
config.lookbook.page_collection_label = "Docs"
page_paths
[Array]
Array of additional directory paths that Lookbook should look for pages in.
Default:
[]
Example:
config.lookbook.page_paths = ["path/to/my/pages"]
page_route
[String]
The URL segment used to prefix page routes.
Default:
"pages"
Example:
config.lookbook.page_route = "docs"
page_options
[Hash]
Frontmatter defaults for pages. These will be merged with any page-level frontmatter data. Options set in the frontmatter will override those set at the global level (apart from 'data', which will be deep-merged with the any globally defined data).
Default:
{}
Example:
config.lookbook.page_options = {
footer: false,
data: {
brand_colors: {
red: "#ff0000"
}
}
}
components
component_paths
[Array]
Array of additional directory paths to look for components in. Not applicable for ViewComponent components.
Default:
['app/views']
Example:
config.lookbook.component_paths << "path/to/my/components"
theming
ui_theme
[String]
The UI theme to use. Available options are: indigo, blue, zinc, green, rose.
Default:
"indigo"
Example:
config.lookbook.ui_theme = "zinc"
ui_theme_overrides
[Hash]
For overriding theme CSS variables with custom values.
Default:
{}
Example:
config.lookbook.ui_theme_overrides = {
header: "hotpink"
}
ui_favicon
[Boolean,String]
Customise or disable the favicon served by Lookbook.
Default:
true
Example:
config.lookbook.ui_favicon = false # no favicon
config.lookbook.ui_favicon = "<svg>...</svg>" # custom SVG favicon
markdown
markdown_options.tables
[Boolean]
Enable/disable support for tables.
Default:
true
Example:
config.lookbook.markdown_options.tables = false
markdown_options.fenced_code_blocks
[Boolean]
Enable/disable support for fenced code blocks.
Default:
true
Example:
config.lookbook.markdown_options.fenced_code_blocks = false
markdown_options.disable_indented_code_blocks
[Boolean]
Enable/disable support for indented code blocks.
Default:
true
Example:
config.lookbook.markdown_options.disable_indented_code_blocks = false
markdown_options.lax_spacing
[Boolean]
Enable/disable support for lax spacing.
Default:
true
Example:
config.lookbook.markdown_options.lax_spacing = false
highlighter
highlighter_options.dark
[Boolean]
Use dark theme variant for highlighted code blocks.
Default:
false
Example:
config.lookbook.highlighter_options.dark = true
debugging
log_level
[Integer]
The minimum level to use for displaying log messages. Only applicable if no logger has been set in the parent application, otherwise Lookbook will use that logger and the log level value that has been set on it.
Default:
2
Example:
config.lookbook.log_level = 3
log_use_rails_logger
[Boolean]
Whether or not Lookbook should use the Rails logger when it is present.
Default:
true
Example:
config.lookbook.log_use_rails_logger = true
system
reload_on_change
[Boolean]
By default Lookbook uses the value of the cache_classes and reload_classes_only_on_change Rails config options to decide if
it should attempt to update the preview data after changes. If set the value of this config option will take precedence and be used instead.
Default:
!config.cache_classes && config.reload_classes_only_on_change
Example:
config.lookbook.reload_on_change = true
live_updates
[Boolean]
Apps that include the listen and actioncable gems will automatically have live UI updates enabled (in development).
Setting live_updates to false will prevent this behaviour and ensure no websocket connections are created.
This is automatically handled in production.
Default:
true
Example:
config.lookbook.live_updates = false
listen_paths
[Array]
Specify additional directories to listen for changes in. Component, preview and pages directories are always watched.
Default:
[]
Example:
config.lookbook.listen_paths = ["directory/to/watch"]
listen_extensions
[Array]
Specify additional extensions for file types that should be watched for changes. Files with .rb and .html.* extensions are always watched.
Default:
[]
Example:
config.lookbook.listen_extensions = ["js", "css"]