Component Story Format 3 ist der neueste Standard für Storybook, der objektbasierte Exporte anstelle der älteren `storiesOf` oder funktionalen Vorlagen verwendet. Es reduziert Boilerplate und verbessert die Kompatibilität mit Testwerkzeugen.

Unterstützt dieses Tool TypeScript?

Ja. Die generierte Ausgabe enthält Standard-TypeScript-Schnittstellen und Typdefinitionen für `Meta` und `StoryObj`, um die Typsicherheit in Ihrer IDE zu gewährleisten.

Kann ich mehrere Stories gleichzeitig hinzufügen?

Dieses Tool generiert eine Basisdatei mit einer Primary Story. Sie können das Story-Objekt in Ihrem Editor manuell duplizieren, um Variationen wie 'Disabled' oder 'Loading' Zustände zu erstellen.

Wird mein Komponenten-Code hochgeladen?

Nein. Der Generator funktioniert, indem er die von Ihnen bereitgestellten Metadaten übernimmt und diese in einen String formatiert; es werden keine Dateien hochgeladen und keine Codeanalyse auf einem Server durchgeführt.

Formatierer & 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

Anmerkung der Redaktion

Understanding · One story per component state.

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

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.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Formatierer & Code