🚨 You are viewing the legacy v1.x docs. See the new v2 documentation →
v1.5.5

Configuration Options

All of the available Lookbook configuration options.

Project

project_name

  • Type: String
  • Default: "Lookbook"

The name of your project. Displayed in the Lookbook header.

config.lookbook.project_name = "Lookbook Demo"

Previews

preview_paths

  • Type: Array

Array of additional directory paths that Lookbook should look for previews in.

config.lookbook.preview_paths = ["path/to/my/previews"]

preview_display_options

  • Type: Hash
  • Default: {}

Default (fallback) display params that will be merged with any preview-specific display params and made available in the preview layout template.

config.lookbook.preview_display_options = {
  bg_color: "#fff",
  max_width: "100%"
}

preview_disable_action_view_annotations

  • Type: Boolean
  • Default: true

Turns off action view filename annotations when generating rendered component source.

config.lookbook.preview_disable_action_view_annotations = true

preview_params_options_eval

  • Type: Boolean 
config.lookbook.preview_params_options_eval = true

sort_examples

  • Type: 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).

config.lookbook.sort_examples = true

Pages

page_paths

  • Type: Array

Array of additional directory paths that Lookbook should look for pages in.

config.lookbook.page_paths = ["path/to/my/pages"]

page_route

  • Type: String
  • Default: "pages"

The URL segment used to prefix page routes.

config.lookbook.page_route = "docs"

page_options

  • Type: Hash
  • Default: {}

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).

config.lookbook.page_options = {
  footer: false,
  data: {
    brand_colors: {
      red: "#ff0000"
    }
  }
}

Rendering

markdown_options

  • Type: Hash
  • Default: {}

Redcarpet markdown options to override Lookbook's default settings.

config.lookbook.markdown_options = {
  autolink: true
}

UI

ui_theme

  • Type: String
  • Default: "indigo"

The UI theme to use. Available options are:

  • indigo (default)
  • blue
  • zinc
config.lookbook.ui_theme = "zinc"

ui_theme_overrides

  • Type: Hash
  • Default: {}

For overriding theme CSS variables with custom values.

config.lookbook.ui_theme_overrides = {
  header: "hotpink"
}

highlighter_options

  • Type: Hash
  • Default: { theme: :github, dark: false }

Code syntax highlighting options. Note that :github is the only theme that is currently supported.

config.lookbook.highlighter_options = {
  theme: :github,
  dark: true
}

# or
config.lookbook.highlighter_options.dark = true

auto_refresh

  • Type: Boolean
  • Default: true

Whether or not the UI should auto-refresh to reflect changes made to files

config.lookbook.auto_refresh = false

Debugging

log_level

  • Type: Integer
  • Default: 2

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.

config.lookbook.log_level = 3

log_use_rails_logger

  • Type: Boolean
  • Default: true

Whether or not Lookbook should use the Rails logger when it is present.

config.lookbook.log_use_rails_logger = true

debug_menu

  • Type: Boolean
  • Default: Rails.env.development?

Whether or not to show the debug menu in the Lookbook header.

config.lookbook.debug_menu = false # always hide the debug menu

System

listen

  • Type: Boolean
  • Default: Rails.env.development?

Whether or not Lookbook should listen for changes to files.

config.lookbook.listen = false

listen_paths

  • Type: Array

Specify additional directories to listen for changes in. Component, preview and pages directories are always watched.

config.lookbook.listen_paths = ["directory/to/watch"]

listen_extensions

  • Type: Array

Specify additional extensions for file types that should be watched for changes. Files with .rb and .html.* extensions are always watched.

config.lookbook.listen_extensions = ["js", "css"]

listen_use_polling

  • Type: Boolean

Whether or not to use polling when listening for file changes. Polling is slower but may work in certain setups where file listeners do not detect changes correctly.

config.lookbook.listen_use_polling = true

experimental_features

  • Type: Boolean | Array

Which experimental features to opt in to.

config.lookbook.experimental_features = true # opt in to all experimental features

[Deprecated]

These options are no longer relevant in the latest releases of Lookbook.

runtime_parsing

  • Type: Boolean
  • Default: !Rails.env.production?

As of v1.0.7 this option is no longer used.

Whether or not to perform an initial parse of the preview files when the application first starts. Disabled in production by default.

config.lookbook.runtime_parsing = false

parser_registry_path

  • Type: String
  • Default: "tmp/storage/.yardoc"

As of v1.0.7 this option is no longer used - the parser no longer writes to the filesystem.

The directory to write the (temporary) parser registry file to.

config.lookbook.parser_registry_path = "path/to/temporary/storage"

Guide

API

Elsewhere