Storybook Design Editor — Onlook
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
Connect your repo
Onlook authenticates with GitHub and reads your Storybook setup, your components, and your design tokens.
- 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
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
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
When should I use Onlook with Storybook?
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.
How much does Onlook cost?
See onlook.com/pricing for current plan details and to join the waitlist.
How does Onlook work with Storybook?
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.
Do I need to set up Storybook before using Onlook?
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.
Does Onlook modify my Storybook stories?
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.
Which frameworks are supported?
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.