Layouts.dev | A notebook for building interfaces with Tailwind & Shadcn/UI

Layouts

Beta

Open app

Docs

Pricing

Layouts

Beta

We hate devtools.

So we built one.

We hate devtools.

So we built one.

A notebook-style editor for building interfaces with Tailwind.

No setup, no deploy, no servers, no hard feelings.

Like a notebook,

but for building interfaces with Tailwind.

No setup, no deploy, no hard feelings.

Start building for free

// ////////////////////////

// Sample page

// ////////////////////////

/div flex flex-col p-11 gap-3 items-center

/h1 font-semibold Welcome to Layouts.dev! text- black text-center

/p text-gray-500 max-w-[400px] text-center We built this small editor to make your life simpler when developing interfaces with TailwindCSS.

/p Feel free to play around! text-end font-medium

/button %default bg-black mt-10
@action=redirect(“/https://layouts.dev”)

/p Get started

You don't need AI to be great.

You need less clutter.

Frontend development feels like death by a thousand cuts.

Inaccessible to designers.

Project setups more complex than a NASA launch.

Wheels you need to re-invent, again and again.

We figured out that the hard part is not to create.

It's the clutter.

Tooling is for machines, and you are human.

Let's remove the complexity.

No setup. No deploys. Less boilerplate. Better primitives.

Say hello to creativity-first coding.

Open. Type. Voilà.

Instant creation. Instant preview. Instant deploy.

Instant creation.
Instant preview.
Instant deploy.

Instant creation. Instant preview.
Instant deploy.

Discover programming as simple as jotting down an idea.
Results live at every keypress, on any number of devices or screens.

Discover programming as simple as
jotting down an idea. Results live at every keypress, on any number of devices or screens.

Simpler syntax, same power.

Less fluff, same precision.

Like HTML and React, but more readable and with some additional superpowers.
Focus on what you want to build, we handle the strange CSS quirks.

Like HTML and React, but more readable and with some additional superpowers.Focus on what you want to build, we handle the strange CSS quirks.

Try for free today

Components as the new primitive.

Pre-made components
are the new primitive.

Components as
the new primitive.

Added in a single keystroke.

Stop reinventing the wheel. Access hundreds of headless components and thousands of assets.

Includes components from Radix, shadcn/UI and Layouts UI.
+ Illustrations, icons, images and videos from the best libraries out there.

Includes components from Radix, shadcn/UI and Layouts UI. + Illustrations, icons, images and videos from the best libraries out there.

Create Project

Deploy your new project in one-click

Name

Name of your project

Framework

Select

Deploy

Account

Password

Show Dialog

Select…

Scheduled

Friday, February 14th, 2024 at 6:00 PM

Undo

button

Combobox

Create Project

Deploy your new project in one-click

Name

Name of your project

Framework

Select

Deploy

Account

Password

Show Dialog

Select…

Scheduled

Friday, February 14th, 2024 at 6:00 PM

Undo

button

Combobox

Create Project

Deploy your new project in one-click

Name

Name of your project

Framework

Select

Deploy

Account

Password

Show Dialog

Select…

Scheduled

Friday, February 14th, 2024 at 6:00 PM

Undo

button

Combobox

Alert

Get started

Design with code.
Iterate at the speed of thought.

Start with a simple syntax and great defaults.

Dig deeper to control every single pixel on the screen.

Start with a simple syntax and great defaults. Dig deeper to control every single pixel on the screen.

Layouts CLI

Designed for artists.
Built for engineers.

Easy syntax in, Production-grade code out

Your project produces production-grade HTML and React code you can trust — no AI, no hallucinations.

Fully integrated with NextJS

Working with NextJS? Sync Layouts to your project with a single CLI command. Type here, code changes there.

Upgrade to Frontend Plan

> npx layouts.dev init lyeq5t1b

Layouts CLI

Designed for artists.
Built for engineers.

Easy syntax in, Production-grade code out

Your project produces production-grade HTML and React code you can trust — no AI, no hallucinations.

Fully integrated with NextJS

Working with NextJS? Sync Layouts to your project with a single CLI command. Type here, code changes there.

Upgrade to Frontend Plan

> npx layouts.dev init lyeq5t1b

Layouts CLI

Designed for artists.
Built for engineers.

Easy syntax in, Production-grade code out

Your project produces production-grade HTML and React code you can trust — no AI, no hallucinations.

Fully integrated with NextJS

Working with NextJS? Sync Layouts to your project with a single CLI command. Type here, code changes there.

Upgrade to Frontend Plan

> npx layouts.dev init lyeq5t1b

Join thousands of builders

Layouts has become my go-to development tool for building interfaces. It's saved me hundreds of thousands of dollars in development costs.

Josh Wirth

CEO/Dev Daly Energy

It's the best of both worlds: pre-built components that reflect contemporary design practices while remaining flexible for specific use cases.

Chris Davis

Fullstack Developer

wow, it's quite nice!

Julien Chamond

CTO, HuggingFace

You nailed the DX and the UX/UI is neat as f**k

ZacharybyDesign

Designer & Developer

As someone with my team who’s spent countless hours jumping between Figma, setting up dev environments, and getting tangled in config and dependency hell, Layouts.dev feels like a breath of fresh air!

Joris Delanoue

Co-CEO/Founder, Fairmint

I don't believe in No-Code tools because they lack flexibility and control. I am quite impressed by Layouts.dev, this is a really interesting approach. There might be a learning curve, but the onboarding is really smooth so far. I think it's a good bet for productivity increase in development.

Guillame Gay

Software Engineer

Frontend used to be fun.
Let's bring it back.

Frontend used
to be fun.
Let's bring it back.

Start building for free

Join the Discord

Layouts.dev

Beta

Product

Connect

Resources

Resources