25k

Onlook for Next.js

The visual editor
for Next.js teams.

Onlook works on your real Next.js codebase. Designers edit live React components on an infinite canvas. AI helps. Every change is real code in the same repo your engineers already ship from — no parallel design system, no exported artifacts, no second source of truth.

Designed for the Next.js stack

Onlook reads the App Router (or Pages Router), your Tailwind config, your shadcn/ui components, your Server Components, and your existing Storybook. Designers compose using the same components your engineers ship — no re-creating anything, no maintaining a parallel library.

The component on the canvas is the component in your repo. When you make a change, Onlook writes the underlying TypeScript directly back to your code — your team reviews the diff in your usual git workflow.

How it works on a Next.js project

  1. 1

    Connect your repo

    Onlook authenticates with GitHub and reads your Next.js project structure — App Router routes, components, Tailwind config, theme tokens.

  2. 2

    Pick up your components

    Your shadcn/ui components, your own components, your design tokens — all of them appear on the canvas immediately.

  3. 3

    Design with AI

    Compose on the canvas. Use the chat to ask AI to restyle, restructure, or build new components. Every change is a real change in real TypeScript.

  4. 4

    Stays in your workflow

    Your team’s CI, deployment, and review processes are unchanged. Onlook is the design surface — your usual Next.js pipeline ships the work.

App Router native

Server Components, client components, layouts, route groups — Onlook respects the Next.js conventions your team already follows.

Tailwind + shadcn ready

Your tailwind.config is the design system. Your shadcn/ui components are the building blocks. Onlook reads both.

Built on what you have

No new file format, no proprietary platform, no second source of truth. Onlook works with your existing Next.js stack, your real components, and the tokens your team already maintains.

Frequently
asked questions

Read our FAQs

Use Onlook when you want designers to iterate on your Next.js codebase directly — App Router, Server Components, Tailwind, shadcn/ui all work. Onlook reads your real components and lets designers edit the actual product. Real code, running live, ready for your engineers when they are.

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

Yes. Onlook reads the components in your Next.js codebase regardless of router — App Router or Pages Router. Server Components are detected and displayed correctly on the canvas, and changes you make are written back as standard React code that respects your existing patterns.

Yes. Onlook reads your tailwind.config and your CSS variables, so designers compose with your real theme tokens. If you use shadcn/ui (which most modern Next.js apps do), those components appear on the canvas as-is. CSS-in-JS and CSS Modules are also supported.

Onlook authenticates with GitHub, reads your Next.js project, and uses your existing Storybook setup (or scaffolds one if you do not have it) to display components on the canvas. There is no separate Onlook file format and no second copy of your design system to maintain.

Onlook works on top of your existing Next.js codebase — your CI, your hosting (Vercel, Netlify, self-managed), and your team’s git workflow are all unchanged. Onlook is the design surface; deployment stays however you already do it.

You do. Onlook operates on the components in your own Next.js repository — there is no proprietary file format, no parallel platform, and no second copy of your code living somewhere else.

Bring your team
to Onlook today

Join Waitlist