A VS Code extension that lets you browse and preview stories with Storybook, right inside your editor.
Install from the Visual Studio Marketplace
Browse your project's stories via a dedicated sidebar view. See all of your stories at a glance and quickly jump to their source. You don't even need to start a Storybook server.
See live previews of your stories directly within your editor. Focus on one, or open several side-by-side and see how they change as you code. And it works for docs, too. Story Explorer can automatically start a Storybook development server on-demand, or you can point it toward one you launch yourself.
- Open stories and docs via CodeLens
- Jump to story source from a story preview for easy navigation
- Launch stories in an external browser when you want the full Storybook environment
- Get Intellisense suggestions for story titles
Controls whether to display CodeLens results for docs. When enabled, CodeLens results for docs appear at the top of story files.
Controls whether to display CodeLens results for stories. When enabled, CodeLens results for stories appear above story definitions.
Log level to use for logging. Logs are available via the Story Explorer output channel in the output panel.
none: Do not log
error: Log errors only
warn: Log warnings and errors
info: Log general operational information, warnings, and errors
debug: Log debugging information, general operational information, warnings, and errors
URL of an externally launched and managed Storybook instance, used when
storyExplorer.server.internal.enabled is disabled. Defaults to
Controls when to automatically start a Storybook development server. This setting only applies when
storyExplorer.server.internal.enabled is enabled.
Array of command line arguments to pass to the
Controls whether to enable the internal Storybook development server. When unchecked, you will have to run the server externally.
Object with environment variables that will be added to the Storybook server process.
Path to the
start-storybook script used to start a Storybook development server. By default, Story Explorer will attempt to auto-detect the script inside
Globs specifying the location of stories in the project relative to the workspace root. By default, stories globs are read from the Storybook configuration file. If specified, this takes precedence over the Storybook configuration file.
Controls whether to display story kinds in the stories view that do not contain any valid stories. These items do not appear in Storybook.
Location of the Storybook configuration directory containing
main.js. By default, Story Explorer will attempt to auto-detect a
.storybook configuration directory that contains a
main.js file. If your configuration directory is named something other than
.storybook or your workspace contains more than one configuration directory, you should manually specify a path to the configuration directory you wish to use.
Controls whether to offer suggestions for story IDs when using
<Story id="..." /> in MDX files. Suggestions are based on the IDs of other stories in the project.
Controls whether to offer suggestions for titles when specifying a
Meta object in CSF or MDX files. Suggestions are based on other titles used in the project.
Story Explorer uses static analysis to extract stories and metadata from source files. Static analysis is fast and safe, since it doesn't execute arbitrary code.
The downside is its evaluation capabilities are more limited, so it won't handle certain complex expressions that work at runtime.
If you import stories from other files or use complex expressions when defining stories, some of your stories may not be recognized correctly.
To maximize compatibility, avoid using complex expressions and importing from other files.
CSF and MDX only
Only Component Story Format (CSF, using CSF 1.0 or 2.0 with hoisted CSF annotations) and MDX stories are supported.
storiesOf API is not supported.
Story previews are rendered in an
iframe embedded in a VS Code
webview. This imposes some restrictions inherent to the use of cross-origin
For example, attempts to access
window.top in a story will cause an exception to be thrown. This can interfere with the official actions addon.
Story Explorer attempts to suppress any uncaught exceptions so that they don't interfere with the preview, but some functionality may not work as expected. You can always open stories in an external browser instead of the built-in preview.
Limited addon support
Story previews use isolated views of each story. These previews don't include the toolbar or addon panels, so addons that decorate the manager, such as controls, actions, and backgrounds, aren't available.
Trusted workspaces required
Story Explorer currently doesn't work with untrusted workspaces.