Component Story Format 3 is de nieuwste standaard voor Storybook, die gebruikmaakt van objectgebaseerde exports in plaats van de oudere `storiesOf` of functionele templates. Het vermindert boilerplate en verbetert de compatibiliteit met testtools.

Ondersteunt deze tool TypeScript?

Ja. De gegenereerde uitvoer omvat standaard TypeScript-interfaces en typedefinities voor `Meta` en `StoryObj` om typeveiligheid binnen uw IDE te garanderen.

Kan ik meerdere stories tegelijk toevoegen?

Deze tool genereert een basisbestand met een 'Primary' story. U kunt het story-object in uw editor handmatig dupliceren om varianten zoals 'Disabled' of 'Loading' statussen te creëren.

Wordt mijn componentcode geüpload?

Nee. De generator werkt door de metadata die u opgeeft om te zetten in een string; er worden geen bestanden geüpload en er wordt geen codeanalyse uitgevoerd op een server.

Formatters & Code

Storybook Story Generator

CSF3 .stories.tsx file from a component name and props.

Runs in your browser

ComponentDefault args (key: value, one per line)Variants (comma-separated)

Button.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
  title: "Components/Button",
  args: {
  variant: 'primary',
  size: 'md',
  children: 'Click me',
  },
  argTypes: {
    variant: { control: "select", options: ["primary", "secondary", "ghost"] },
  },
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Default: Story = {};

export const Primary: Story = {
  args: { variant: "primary" },
};
export const Secondary: Story = {
  args: { variant: "secondary" },
};
export const Ghost: Story = {
  args: { variant: "ghost" },
};

lines: 31chars: 653size: 653 B

live

Redactionele opmerking

Understanding · One story per component state.

Dit uitgebreide hoofdstuk is momenteel alleen in het Engels beschikbaar. De conversietool hierboven werkt in jouw taal; de lange uitleg is nog niet vertaald.

Veelgestelde vragen

Quick answers.

›What is CSF3?

Component Story Format 3 is the latest standard for Storybook, using object-based exports rather than the older `storiesOf` or functional templates. It reduces boilerplate and improves compatibility with testing tools.

›Does this tool support TypeScript?

Yes. The generated output includes standard TypeScript interfaces and type definitions for `Meta` and `StoryObj` to ensure type safety within your IDE.

›Can I add multiple stories at once?

This tool generates a base file with a Primary story. You can manually duplicate the story object in your editor to create variations like 'Disabled' or 'Loading' states.

›Is my component code uploaded?

No. The generator works by taking the metadata you provide and formatting it into a string; no files are uploaded and no code analysis is performed on a server.

Mensen zoeken ook naar

Gerelateerde tools

More in this room.

Bekijk alles in Formatters & Code