Storybook context provider for OpenCtx

This is a context provider for OpenCtx that annotates your React components and *.story.ts?(x) files with screenshots and links to your Storybook component library. It works well with storybooks hosted on Chromatic.


Screenshot of OpenCtx annotations for Storybook in a code file

Hover over a UI component in code to see what it looks like

Visit the OpenCtx playground for live examples.


Add the following to your settings in any OpenCtx client:

"openctx.providers": {
// ...other providers...
"": {
"storybookUrl": "<URL to the Storybook for your application>"


  • If you're using VS Code, you can put the snippet above in .vscode/settings.json in each repository if you have different storybooks per-repository.
  • To use this with storybooks hosted on Chromatic, see below in the "Configuration" section.
  • Play around with the Storybook provider in realtime on the OpenCtx playground.


/** Settings for the Storybook OpenCtx provider. */
interface Settings {
* The URL to a published Storybook for your project.
* If you're using Chromatic, this is of the form `https://<branch>--<appid>`; see
* for how to obtain
* this value.
* If the URL contains `<branch>`, it will always be replaced with `main`.
* TODO(sqs): Support non-main branches.
storybookUrl: string