Layouts.dev

About Layouts.dev

Layouts.dev is a notebook-style editor for building interfaces with Tailwind and shadcn/ui, and its stated grievance is worth quoting because it defines the product: frontend development is death by a thousand cuts, inaccessible to designers, with project setups more complex than a launch checklist. The answer is an editor with no setup, no deploy and no server — you open it and you are building, using a compact block syntax over Tailwind classes rather than a drag-and-drop canvas that generates unreadable markup. Hundreds of pre-loaded components and asset libraries ship with it, so a screen can be assembled from real primitives instead of from empty divs. The other deliberate position is that AI is an accelerant, not the product — the homepage says outright that you do not need AI to be great, you need less clutter — which in practice means AI accelerations exist on the free tier but the tool is a craft instrument first. Export is where it earns a place in a real workflow: unlimited HTML export on the free plan, unlimited React export and Figma export on the first paid tier, plus live sync with a Next.js repository so work in the notebook lands in the codebase rather than staying trapped in a web app. The top tier adds authentication, database, API calls and payment-provider integrations for people shipping full apps.

Key Features

Tags