# Forkbook > Forkbook is a small, fast fork of Storybook for React with Vite, Next.js with Vite and React Native (iOS). It is one npm package: @aussieljk/forkbook. Each page is also plain markdown: add `.md` to its URL. All pages in one file: https://forkbook.ljk.dev/llms-full.txt ## Docs - [Introduction](https://forkbook.ljk.dev/docs.md): Forkbook is a small, fast workshop for UI components. Use it to build, test and document components one at a time. It reads Storybook stories (CSF) and MDX docs. - [Get started / Frameworks / Next.js (Vite)](https://forkbook.ljk.dev/docs/get-started/frameworks/nextjs-vite.md): Use `@aussieljk/forkbook/nextjs-vite` for a Next.js app. Forkbook builds the stories with Vite, not with webpack or Turbopack. - [Get started / Frameworks / Next.js App Router: a story for each page](https://forkbook.ljk.dev/docs/get-started/frameworks/nextjs-pages.md): Forkbook can write one story for each page of a Next.js App Router project. Then you can see every route of the app in Forkbook. - [Get started / Frameworks / Next.js notes](https://forkbook.ljk.dev/docs/get-started/frameworks/nextjs.md): This page has notes about some Next.js features in Forkbook. For the setup, see [Next.js with Vite](/docs/get-started/frameworks/nextjs-vite). - [Get started / Frameworks / React (Vite)](https://forkbook.ljk.dev/docs/get-started/frameworks/react-vite.md): Use `@aussieljk/forkbook/react-vite` for a React app that uses Vite. - [Get started / Frameworks / React Native (iOS)](https://forkbook.ljk.dev/docs/get-started/frameworks/react-native.md): Forkbook can show your stories on an iPhone, in an Expo app. The Forkbook UI on the device uses SwiftUI through Expo UI. - [Get started / Install](https://forkbook.ljk.dev/docs/get-started/install.md): Install the package, then run `init`. `init` finds your framework and writes the configuration. - [Moving from Storybook](https://forkbook.ljk.dev/docs/migrate/from-storybook.md): Forkbook is one package. To move a project, change the packages, change the imports, and rename a small number of names. The `forkbook migrate` command does all of these steps. - [Writing stories / Args](https://forkbook.ljk.dev/docs/writing-stories/args.md): Args are the inputs of a story. For a React component, args are its props. - [Writing stories / Decorators](https://forkbook.ljk.dev/docs/writing-stories/decorators.md): A decorator wraps a story. Use it to add a provider, a theme or extra markup. - [Writing stories / Loaders](https://forkbook.ljk.dev/docs/writing-stories/loaders.md): A loader is an async function. It runs before the story renders. Its result is in `loaded` in the story context. - [Writing stories / Names and hierarchy](https://forkbook.ljk.dev/docs/writing-stories/naming-components-and-hierarchy.md): The sidebar groups stories by their title. - [Writing stories / Overview](https://forkbook.ljk.dev/docs/writing-stories.md): A story shows one state of a component. You write stories in a `*.stories.tsx` file next to the component, in the Component Story Format (CSF). - [Writing stories / Parameters](https://forkbook.ljk.dev/docs/writing-stories/parameters.md): Parameters are static data about a story. Addons read them. For example, `layout` sets the layout of the canvas, and `backgrounds` sets the background options. - [Writing stories / Play functions](https://forkbook.ljk.dev/docs/writing-stories/play-function.md): A play function runs after the story renders. Use it to click, type and check the result. It is an interaction test. - [Writing stories / Tags](https://forkbook.ljk.dev/docs/writing-stories/tags.md): Tags are labels on a story. Forkbook and addons use them to filter stories. - [Writing stories / Thumbnails](https://forkbook.ljk.dev/docs/writing-stories/thumbnails.md): Use `parameters.thumbnail` to give a story an image. Forkbook shows the thumbnail: - [Writing docs / Autodocs](https://forkbook.ljk.dev/docs/writing-docs/autodocs.md): Autodocs makes a docs page for a component. The page has the title, the description, the first story, the props table and all stories. - [Writing docs / Code panel](https://forkbook.ljk.dev/docs/writing-docs/code-panel.md): The code panel shows the source code of the selected story, in a panel next to the canvas. It is a part of the docs addon. - [Writing docs / MDX](https://forkbook.ljk.dev/docs/writing-docs/mdx.md): An MDX file is markdown with JSX. Use it for pages that you write yourself. - [Writing docs / Overview](https://forkbook.ljk.dev/docs/writing-docs.md): Forkbook can make a docs page for each component, and you can write your own pages in MDX. - [Writing tests / Accessibility tests](https://forkbook.ljk.dev/docs/writing-tests/accessibility-testing.md): The accessibility addon checks each story with axe-core. It shows the problems in the Accessibility panel and highlights the elements. - [Writing tests / Interaction tests](https://forkbook.ljk.dev/docs/writing-tests/interaction-testing.md): An interaction test is a play function. It renders the story, does what a user does, and checks the result. - [Writing tests / Overview](https://forkbook.ljk.dev/docs/writing-tests.md): Each story is a test case. Forkbook can test stories in these ways: - [Writing tests / Vitest addon](https://forkbook.ljk.dev/docs/writing-tests/integrations/vitest-addon.md): The Vitest addon runs each story as a test in a real browser. It runs the play function and the accessibility checks. You can run the tests from the Forkbook sidebar or from the command line. - [Essentials / Actions](https://forkbook.ljk.dev/docs/essentials/actions.md): The Actions panel shows each call to an event handler, with its arguments. - [Essentials / Backgrounds](https://forkbook.ljk.dev/docs/essentials/backgrounds.md): The Backgrounds tool changes the background colour of the canvas. - [Essentials / Controls](https://forkbook.ljk.dev/docs/essentials/controls.md): The Controls panel shows the args of a story. Change an arg and the story changes. - [Essentials / Highlight](https://forkbook.ljk.dev/docs/essentials/highlight.md): Highlight draws a box on elements in the story. Addons use it, for example the accessibility addon. You can also use it from your own code. - [Essentials / Measure and outline](https://forkbook.ljk.dev/docs/essentials/measure-and-outline.md): Measure shows the size, the margin and the padding of the element under the pointer. Outline draws a line around each element. - [Essentials / Overview](https://forkbook.ljk.dev/docs/essentials.md): Forkbook has these tools built in. You do not install them. - [Essentials / Toolbars and globals](https://forkbook.ljk.dev/docs/essentials/toolbars.md): A global is a value for all stories, for example a theme or a locale. A toolbar menu changes a global. - [Essentials / Viewport](https://forkbook.ljk.dev/docs/essentials/viewport.md): The Viewport tool changes the size of the canvas, so that you can see a story on a phone or a tablet. - [Addons / Links](https://forkbook.ljk.dev/docs/addons/links.md): The links addon lets a story open another story. Use it to make a clickable prototype. - [Addons / Overview](https://forkbook.ljk.dev/docs/addons.md): An addon adds a feature to Forkbook. The Forkbook addons are subpaths of the package, so you do not install other packages. - [Addons / Presets](https://forkbook.ljk.dev/docs/addons/writing-presets.md): A preset changes the configuration of Forkbook. An addon is a preset with optional UI. - [Addons / Pseudo states](https://forkbook.ljk.dev/docs/addons/pseudo-states.md): The pseudo states addon shows a component in a CSS state, for example `:hover` or `:focus`, with no mouse or keyboard. - [Addons / Themes](https://forkbook.ljk.dev/docs/addons/themes.md): The themes addon adds a theme menu to the toolbar. A decorator applies the selected theme to the story. - [Configure / Environment variables](https://forkbook.ljk.dev/docs/configure/environment-variables.md): Variables that start with `FORKBOOK_` or `VITE_` are available in the preview as `import.meta.env.FORKBOOK_X`. Forkbook reads `.env` files as Vite does. - [Configure / Features and behaviour](https://forkbook.ljk.dev/docs/configure/features-and-behavior.md): Set the options of the Forkbook UI in `.forkbook/manager.ts`: - [Configure / Images and assets](https://forkbook.ljk.dev/docs/configure/images-and-assets.md): Import an image in a story or a component. Vite gives a URL: - [Configure / Integration / ESLint plugin](https://forkbook.ljk.dev/docs/configure/integration/eslint-plugin.md): Forkbook does not have an ESLint plugin. The Storybook ESLint plugin (`eslint-plugin-storybook`) checks `@storybook/*` imports, so it does not fit Forkbook. - [Configure / Integration / Frameworks feature support](https://forkbook.ljk.dev/docs/configure/integration/frameworks-feature-support.md): | Feature | React (Vite) | Next.js (Vite) | React Native (iOS) | | --- | --- | --- | --- | | CSF stories, args, decorators, loaders | Yes | Yes | Yes | | Play functions and interaction tests | Yes | Yes | No | | Controls | Yes | Yes | Yes (on device) | | Actions | Yes | Yes | Yes (on device) | | Autodocs and MDX | Yes | Yes | No | | Vitest addon | Yes | Yes | No | | Accessibility addon | Yes | Yes | No | | Backgrounds, viewport, measure, outline | Yes | Yes | No | | React Server Components | No | Experimental | No | | `composeStories` in tests | Yes | Yes | Yes | | MCP addon | Yes | Yes | No | - [Configure / Integration / Images and assets](https://forkbook.ljk.dev/docs/configure/integration/images-and-assets.md): For imports, see [Images and assets](/docs/configure/images-and-assets). - [Configure / Integration / TypeScript](https://forkbook.ljk.dev/docs/configure/integration/typescript.md): Forkbook supports TypeScript with no setup. Vite compiles the stories. Forkbook does not check the types. Run your own type check. - [Configure / Overview](https://forkbook.ljk.dev/docs/configure.md): Forkbook reads its configuration from the `.forkbook` folder. If there is no `.forkbook` folder but there is a `.storybook` folder, it uses `.storybook`. - [Configure / Sidebar and URLs](https://forkbook.ljk.dev/docs/configure/sidebar-and-urls.md): Each story has a URL that follows the sidebar tree. The story `Primary` with the title `Forms/Text Field` is at `/forms/text-field/primary`. The docs page of that component is at `/forms/text-field/docs`. - [Configure / Start page](https://forkbook.ljk.dev/docs/configure/start-page.md): Forkbook shows a start page at `/`. By default, the start page shows a grid of cards, one card for each component. Each card shows the component name, its title path and the number of stories. - [Configure / Story layout](https://forkbook.ljk.dev/docs/configure/story-layout.md): The `layout` parameter sets how the story sits in the canvas. - [Configure / Styling and CSS](https://forkbook.ljk.dev/docs/configure/styling-and-css.md): Import your global CSS in `.forkbook/preview.ts`: - [Configure / Telemetry](https://forkbook.ljk.dev/docs/configure/telemetry.md): Forkbook does not send data to Storybook. By default it sends one kind of data: error reports, to the Forkbook Sentry project. - [Configure / Theming](https://forkbook.ljk.dev/docs/configure/theming.md): You can change the look of the Forkbook UI: the colours, the fonts, the brand title and the brand image. - [Configure / User interface / Sidebar and URLs](https://forkbook.ljk.dev/docs/configure/user-interface/sidebar-and-urls.md): This page moved. See [Sidebar and URLs](/docs/configure/sidebar-and-urls). - [API / ArgTypes](https://forkbook.ljk.dev/docs/api/arg-types.md): ArgTypes describe the args of a story. Forkbook makes them from your TypeScript types. You can add to them or change them. - [API / CLI options](https://forkbook.ljk.dev/docs/api/cli-options.md): The `forkbook` bin runs these commands. The `storybook` bin is the same program. - [API / Component Story Format](https://forkbook.ljk.dev/docs/api/csf.md): CSF is the format of a stories file. It is an ES module with a default export and named exports. - [API / Doc blocks / ArgTypes](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-argtypes.md): `ArgTypes` shows a table of the args of a component. The values cannot change. For a table where you can change the values, use [Controls](/docs/api/doc-blocks/doc-block-controls). - [API / Doc blocks / Canvas](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-canvas.md): `Canvas` shows a story in a frame, with a toolbar and a button to show the source code. - [API / Doc blocks / Controls](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-controls.md): `Controls` shows a table of the args of a story, and you can change the values. The story on the page changes. - [API / Doc blocks / Description](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-description.md): `Description` shows the description of a component or a story. - [API / Doc blocks / Source](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-source.md): `Source` shows the source code of a story. Forkbook highlights it with sugar-high. - [API / Doc blocks / Stories](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-stories.md): `Stories` shows all stories of the stories file, each in a canvas. Autodocs uses it. - [API / Doc blocks / Story](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-story.md): `Story` shows one story, without a frame or a toolbar. Use [Canvas](/docs/api/doc-blocks/doc-block-canvas) to get a frame. - [API / Doc blocks / StoryGrid](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-storygrid.md): `StoryGrid` shows a grid of cards, one card for each component. It is the same grid as the [start page](/docs/configure/start-page). Use it in an MDX file, for example in the start page MDX with `mode: 'replace'`. - [API / Doc blocks / Subtitle](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-subtitle.md): `Subtitle` shows a subtitle. The text comes from `parameters.docs.subtitle`, or from the children. - [API / Doc blocks / Title](https://forkbook.ljk.dev/docs/api/doc-blocks/doc-block-title.md): `Title` shows the main heading of a docs page. The default text is the last part of the component title. - [API / main.ts / core](https://forkbook.ljk.dev/docs/api/main-config/main-config-core.md): The `core` field of `.forkbook/main.ts` has the options of the server. - [API / main.ts / features](https://forkbook.ljk.dev/docs/api/main-config/main-config-features.md): The `features` field of `.forkbook/main.ts` turns features on or off. - [API / main.ts / stories](https://forkbook.ljk.dev/docs/api/main-config/main-config-stories.md): The `stories` field of `.forkbook/main.ts` tells Forkbook where the stories and the MDX pages are. The paths are relative to the configuration folder. - [API / main.ts / viteFinal](https://forkbook.ljk.dev/docs/api/main-config/main-config-vite-final.md): `viteFinal` changes the Vite configuration of Forkbook. It gets the configuration and returns a new one. - [Sharing / Composition](https://forkbook.ljk.dev/docs/sharing/storybook-composition.md): Composition shows the stories of another published Forkbook (or Storybook) in your sidebar. Add `refs` to `.forkbook/main.ts`: - [Sharing / Design integrations](https://forkbook.ljk.dev/docs/sharing/design-integrations.md): The Storybook plugin for Figma needs Chromatic. Forkbook does not support it. - [Sharing / Publish](https://forkbook.ljk.dev/docs/sharing/publish-storybook.md): Build a static Forkbook and put the folder on any static host: - [AI / MCP server](https://forkbook.ljk.dev/docs/ai/mcp/overview.md): The MCP addon adds an MCP server to the Forkbook dev server. An AI agent can then read your components, write stories and run tests. - [Builders / Vite](https://forkbook.ljk.dev/docs/builders/vite.md): Forkbook builds the preview with Vite 8. It is the only builder. - [FAQ](https://forkbook.ljk.dev/docs/faq.md):