Layouts.dev

Name: Layouts.dev
Rating: 5.0 (2 reviews)

The fastest way to build Tailwind and shadcn/ui pages

5.0•2 reviews•

834 followers

The fastest way to build Tailwind and shadcn/ui pages

5.0•2 reviews•

834 followers

Visit website

Interface design tools

•

Website builders

•

UI frameworks

Layouts.dev is supersonic web development experience tailor-made for TailwindCSS. As simple as a notebook, more powerful than anything out there. Cycle-through Tailwind classes in a keypress. Access pre-made components (shadcn/ui). Preview your work live on any device.

Free

Launch tags:Design Tools•Developer Tools•Development

Launch Team / Built With

Render: Get up to $100K in startup creditsCloud infrastructure for founders who want to move fast and NOT break things

Promoted

keychains.dev

Maker

📌

🚀 Hey ProductHunt! I'm Severin, co-founder of Layouts.dev. Layouts.dev is a notebook-style editor designed for quickly building UIs using Tailwind. About a year ago, my co-founder Alex (a designer) and I started working on Layouts. We realized that moving from Figma to code was slowing down our iteration cycles, and we needed a more efficient way for Alex to directly contribute to the frontend. As a developer, I was also fed up with all the overhead—setup, config, dependency errors, and deployment hurdles—just to ship interfaces. So, we created a tool that allows both technical and non-technical users to design with code easily, avoiding all the tooling chaos. With Layouts, coding an interface is as simple as jotting down an idea: open your browser, describe it using simplified syntax, and voilà! 🎉 Layouts.dev comes with: ✨ A simple syntax similar to HTML/React, but shorter and with superpowers 🎨 Direct Tailwind integration for fast design 📱 Instant UI previews across multiple devices and screens 🧩 100s of pre-made headless components (mostly from shadcn/ui, with more to come) 🔎 Millions of pre-integrated assets and icons 🔗 Direct export of your interfaces as production-grade NextJS projects via our CLI, with live sync We're thrilled to launch today after such a long journey, and we’re excited to hear your feedback. It's definitely accelerated our workflow and we'd love to see how it could accelerate yours. Can’t wait to see what you build! 💡 Severin

Report

2yr ago

keychains.dev

Maker

@fernando_doglio Thanks!

Report

2yr ago

Sava OS

Hello @severin__, this is very impressive! I get your point as well, and I totally agree with the unnecessary complexities of front-end dev these days (maybe not more than a NASA launch but we get the point :p).. The site is really neat & flows well. My feedback - as a long-term developer myself - is for the landing copy, you say: "We hate devtools. So we built one. Like a notebook, but for building interfaces with Tailwind." This sentence gives me no idea whatsoever about the product. What devtools are you talking about? What do you mean "like a notebook"? I wish you're more to the point here. At no point do you say what the product actually is. As a new visitor, I had to figure it out from the images and from certain cues in the context. So yeah, really well done with the product, I like the idea, the UX, the potential is great. But I think it would do better with simpler explanations :) (Or maybe a short video together with current landing) Congrats on the launch 🙌 Wish you all the best with this!

Report

2yr ago

Sketchfab

Hunter

Congrats @severin__ for the launch!

Report

2yr ago

@severin__ 🚀🚀🚀🚀

Report

2yr ago

Layouts.dev

Maker

@owenfar Thanks for the feedback! We'll be working on improving copy on the marketing site so it's a bit more clear what we do :).

Report

2yr ago

Opengeni

So its like a higher level language on top of react and tailwind? Sort of like how SwiftUI is to UIKit?

Report

2yr ago

keychains.dev

Maker

@sentry_co Exactly. It enables us to get the freedom to simplify the syntax quite a bit, especially on composable components. Initially built the syntax for AI, so at the difference of most programming languages, it's built as a funnel: super permissive input (markdown-like to ultra specific), super strict output. Would love to get your feedback!

Report

2yr ago

Opengeni

@severin__ Abstracting upwards is definitely better for scaling with less resources, while delivering more value for the customer. I think open sourcing it and it becoming a standard would make this a no brainer for everyone. One business model that could work with that for you would be to have the best builder tool. And also make component modules for sale. Like movingparts.io does for swiftUI. But this is a gd start! Looking forward to see how things progress.

Report

2yr ago

keychains.dev

Maker

@sentry_co Would love to discuss that in more details with you. That's exactly the kind of thing that keeps us thinking at night. Could you DM me @ severin@creative-robots.ai ?

Report

2yr ago

Layouts.dev

Maker

Amazing feedback @sentry_co , we're absolutely considering this route.

Report

2yr ago

Timestripe

Looks very good. Great to see some quality work being released! I love the onboarding and how the UI feels dynamic yet fast, without getting in the way. Good job! I'll try it more extensively today and share my thoughts afterward

Report

2yr ago

keychains.dev

Maker

Thanks @topkek. Yeah, super interested by your feedback. Feel free to email us directly. It'll be gold to us!

Report

2yr ago

Layouts.dev

Maker

Thanks! @topkek. Would be amazing to get your thoughts.

Report

2yr ago

Timestripe

💡 Bright idea

@severin__ I've tried layouts.dev more and it looks very promising, you certainly have a proper vision for building a devtool Here are the things that I think you should consider improving: 1. More export options. As a React guy, I’d love to see an option to copy HTML with classNames instead of class. A direct export to a .tsx React component would be even better. 2. Extended onboarding. When I finished onboarding, I didn’t have a clear use case in mind, so I thought, "Okay, I’ll come back when I have a project." It would be great if there were a tutorial or walkthrough showing how to take an idea or feature request all the way to an exported component that can be used in a real project. It would definitely help make Layouts.dev more "sticky." 3. Improve discoverability of AI features. I really like the AI features like palette generation and "Prompt to TailwindCSS," but they’re a bit hidden. Including them in the onboarding flow might increase their visibility. Also, I wanted to share a personal DX pain point, which is pretty specific, but might be relevant. At human.app, I build a lot of OpenGraph images using @vercel/og, which is based on Satori. It allows me to write JSX with Tailwind, but since it uses SVG and a custom layout engine, many CSS features aren’t supported. There’s no layout inspector for the output image and no hot reload. It would be amazing if Layouts.dev could support a use case like this — offering a quick way to create layouts for such images, accounting for Satori's limitations, and using the tw prop for Tailwind classes instead of className. Let me know if you find my feedback helpful!

Report

2yr ago

keychains.dev

Maker

@vercel @topkek Thanks for the detailed feedback. 1. This is normally already available if you export in React. Would love to see a screenshot or jump on a call if that's not accessible as it's probably a bug on our end. You can get a full NextJS repository using our CLI interface (paid). 2. & 3. Super valid feedback. Thanks a lot. Will iterate. @vercel/og --> that would be awesome yes. Would love to support other targets like ReactEmail too. Will check the difficulty of doing things like that. Happy to jump on a call end of week to discuss more!

Report

2yr ago

this looks really awesome! A little worried about lock-in though. Is it possible to export what I've built?

Report

2yr ago

keychains.dev

Maker

@pmn Very good question. We hate it too. Everything you create can be exported directly to a NextJS project. You keep the code.

Report

2yr ago

PicLooks Avatars

wowww this looks unbelievably good, congrats! 😍 Really confidence building that your own project UI and experience is so incredibly tight. I wasn't totally clear on how the next.js tier works. Am I able to link to Layouts.dev with the CLI and then edit my existing components/layouts that I hadn't created in your editor? Provided they're built in next/tailwind/shadcn. And then how does the backend tier work? I see you're using Clerk for auth on your own site. Are you providing a DB too?

Report

2yr ago

keychains.dev

Maker

@jonnymiles NextJS link is a one-way sync for now: - thanks to our CLI, every layouts projects can be exported as a fully working NextJS project (no more boilerplate needed) - sync happens in realtime as you edit the UI of your pages in layouts - you can write business logic or anything you want elsewhere in the repo, or even edit the page. Limitation is that any page you touch won't sync anymore (we don't want to overwrite your work). Support for components is not completely ready for prod so not in this release. Working on it + working on improving this workflow. DB support in alpha on our Fullstack plan. Still building it live. Works the same way: if you add a DB, you get the code in your NextJS project. If you edit these files, we won't overwrite them. Happy to iterate on that with you!

Report

2yr ago

Migroot

Congrats with launch! Wish you luck, cause your product looks very convenient, and not complicate... How do you think it possible to use without dev background?

Report

2yr ago

keychains.dev

Maker

@maryna_dobrovolska1 Alex, my co-founder, built his first interface in 1h without any programming knowlegde (he's a pro designer though). Happy to get your feedback on how long it takes to build your first interface too!

Report

2yr ago

Layouts.dev

Maker

@maryna_dobrovolska1 Thanks! I'm living proof (designer-here). I had some basic knowledge of HTML/CSS frameworks beforehand - but no dev background. I was able to pick up the syntax within a few hours and contribute to all the frontend code for layouts.dev UI using our product. I'd say the learning curve is mostly familiarizing yourself with TailwindCSS. Outside of frontend dev, if you're a PM or Designer, you'll definitely be well suited to pick this up quickly.

Report

2yr ago

Migroot

@alexmckee this is incredible. I'm also have some background in html-coding... Can't wait for weekends to try your product 😃 During workdays not enough time, haha

Report

2yr ago

Congrats on the launch! This looks very intuitive. How user friendly is this for someone without a strong dev background?

Report

2yr ago

keychains.dev

Maker

@nze_nze Alex (my cofounder) doesn't know how to code and did his 1st interface in 1h. Would love to see how you do!

Report

2yr ago

Layouts.dev

Maker

@nze_nze Thanks Carlos! Layouts can be user-friendly for those without a dev background. If you're coming at this from a designer/product background, you'll definitely have a leg up vs. other nontechnical roles - otherwise, there is a slight learning curve. The best place to start is probably learning some basic HTML and TailwindCSS. For context - I don't have a dev background either and was able to get started fairly quickly 🙂. Happy to help and jump on a call to get you onboarded!

Report

2yr ago

1 2 3 4

5.0

Based on 2 reviews

Review Layouts.dev?

Reviews

Most Informative