source-link
Add a button to the Storybook toolbar that opens the file containing the Story in an IDE like VSCode.
storybook-addon-source-link
This addon adds links to open the source code of story or components in your editor.
Getting started
Requirements
- Storybook 8.0 or later
1. Install the addon.
npm install -D storybook-addon-source-link
# or
yarn add -D storybook-addon-source-link
# or
pnpm add -D storybook-addon-source-link
2. Register the addon in your Storybook configuration.
Then, register it as an addon in .storybook/main.js
(or .storybook/main.ts
).
// .storybook/main.ts
import type { StorybookConfig } from "@storybook/your-framework";
const config: StorybookConfig = {
// ...rest of config
addons: [
// ...other addons
"storybook-addon-source-link",
],
};
export default config;
3. (Optional) Configure the addon.
You can modify or add links using .storybook/preview.ts
or the parameters of a Story.
import type { Preview } from "@storybook/react";
import {
type SourceLinkParameter,
getFileUrl,
} from "storybook-addon-source-link";
const preview: Preview = {
parameters: {
// ...other parameters
sourceLink: {
links: {
// override addon's default link
"story-vscode": ({ importPath, rootPath, isStaticBuild }) => {
if (isStaticBuild) return undefined;
if (!rootPath) return undefined;
const fileUrl = getFileUrl(rootPath, importPath);
const href = `vscode://${fileUrl.href}`;
return {
label: importPath.split("/").at(-1) ?? "",
href,
icon: "StorybookIcon",
};
},
// add a new link type
"story-github": ({ importPath, rootPath }) => {
if (!rootPath) return undefined;
const href = `https://github.com/elecdeer/storybook-addon-source-link/blob/-/packages/demo${importPath.replace(
/^\./,
""
)}`;
return {
label: importPath,
href,
icon: "GithubIcon",
};
},
},
} satisfies SourceLinkParameter,
},
};
export default preview;
API
Parameters
This addon contributes the following parameters to Storybook, under the sourceLink
namespace.
[!TIP] Storybook parameters can be specified at the story, component, and global levels, and are merged for each value.
links
Type: { [key: string]: LinkEntry | undefined | ((context: ResolveContext) => LinkEntry | undefined) }
If undefined
is returned, the link will not be added.
ResolveContext
:rootPath
: The path to the root directory of the source files. e.g."/Users/username/project"
. IfisStaticBuild
istrue
, this value is""
.isStaticBuild
: Whether the Storybook is built statically.type
: The type of entry."story"
or"docs"
.importPath
: The path to the source file. e.g."./src/stories/Button.tsx"
id
: The ID of the story. e.g."example-button--primary"
title
: The title of the story or the component. e.g."Example/Button"
name
: The name of the story. e.g."Primary"
tags
: The tags of the story. e.g.["autodocs"]
LinkEntry
:label
: The label of the link.href
: The URL of the link.icon
: (Optional) The icon name in @storybook/iconstype
: (Optional) The type of the link."link"
: The link will be opened in the same tab."linkBlank"
: (default) The link will be opened in a new tab. Added target="_blank" to the link."copy"
: The link will be copied to the clipboard.
order
: (Optional) When order is specified, it will be sorted in ascending order. The default value is0
.
Preset settings provided by the addon
// preview.tsx
const preview: Preview = {
parameters: {
sourceLink: {
links: {
"component-vscode": ({ importPath, rootPath }) => {
if (!rootPath) return undefined;
const componentPath = importPath.replace(/\.stories\.tsx?$/, ".tsx");
const componentFileUrl = getFileUrl(rootPath, componentPath);
return {
label: componentPath,
href: `vscode://${componentFileUrl.href}`,
icon: "VSCodeIcon",
};
},
"story-vscode": ({ importPath, rootPath }) => {
if (!rootPath) return undefined;
const fileUrl = getFileUrl(rootPath, importPath);
const href = `vscode://${fileUrl.href}`;
return {
label: importPath,
href,
icon: "VSCodeIcon",
};
},
"addon-powered-by": {
label: "Powered by addon-source-link",
href: "https://github.com/elecdeer/storybook-addon-source-link",
order: Number.MAX_SAFE_INTEGER,
icon: "InfoIcon",
},
},
} satisfies SourceLinkParameter,
},
};
Made by
- elecdeer
Work with
Angular
Ember
HTML
Preact
React
React native
Svelte
Vue
Web Components
Tags