25k

Storybook integration

The visual editor
for your team’s real Storybook.

Onlook reads the components you already maintain and makes them the source of truth for the canvas. Designers compose with real React components. AI helps. Every change is real code in your repo — no second copy of your design system to keep in sync.

One source of truth

Every other AI design tool builds its own component model. Onlook does not. Your Storybook stories already describe your components, their props, their states, and the way your team uses them. Onlook reads that.

That means no drift between the design and the live product. No translating a mockup into code. The thing on the canvas is the thing in production.

How it works

  1. 1

    Connect your repo

    Onlook authenticates with GitHub and reads your Storybook setup, your components, and your design tokens.

  2. 2

    Pick up your components

    Your buttons, your typography, your layout primitives — all of them appear on the canvas immediately. No re-creating anything.

  3. 3

    Design with them

    Compose on an infinite canvas. Use the chat to ask AI to modify components. Every change is a real change in real code.

  4. 4

    Ship through your usual workflow

    Your edits are real code in your repo. Commit, push, review, and ship in the git workflow your team already uses.

Frequently
asked questions

Read our FAQs

Use Onlook when your team already maintains a Storybook setup and you want designers to compose with those exact components. Storybook becomes the source of truth for the canvas — no parallel design system, no exported artifacts, no second copy to keep in sync.

See onlook.com/pricing for current plan details and to join the waitlist.

Onlook reads the components in your existing Storybook setup and uses them as the source of truth for the design canvas. Every component on the canvas is the same component in your codebase — there is no second copy to maintain.

If you already have Storybook configured in your repo, Onlook picks up your components immediately. If you do not, a one-click setup scaffolds Storybook in about an hour using a guided flow.

Onlook reads your stories to understand the shape of your components and uses them as the building blocks on the canvas. Your stories are the source of truth; Onlook is the design environment.

Onlook works with React and Next.js codebases. Tailwind CSS, CSS-in-JS, and CSS Modules are all supported. The component library can be your own or built on top of shadcn/ui or other React component systems.

Bring your team
to Onlook today

Join Waitlist