Layouts.dev is a notebook editor for building production-ready UI at super-speed with TailwindCSS & shadcn/ui. Design with a super simple syntax, use hundreds of prebuilt components and resources. Preview your build in real-time. Export production-grade React.
🚀 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
It’s very impressive! It will be awesome if it’s a open source project😄You can build the standard and ecosystem of the new UI DSL. You can create your managed service to reach business goals(For example, Terraform).
I recommend Layouts.dev — it's a great tool for those who create interfaces using TailwindCSS and shadcn/ui. It's an ideal choice for developers who want to save time and effort when creating interfaces.
I'm new to developing mini-projects for my home server. So this looks great, will give it a try!
This is brilliant. Years ago, Jupyter Notebooks were instrumental to my Python learning process.
I've been doing more frontend work thanks to GenAI but the workflow is still a little janky. Being able to have the quick feedback loop along with the premade components should be a great improvement.
I'll be trying later today.
Now if you build a Tooljet style UI to generate the DSL you will REALLY be onto something.
how the integration with other frameworks works can i use this with frmwork other than next.js?
this looks really awesome! A little worried about lock-in though. Is it possible to export what I've built?
Congrats on the launch! This looks very intuitive. How user friendly is this for someone without a strong dev background?
So its like a higher level language on top of react and tailwind? Sort of like how SwiftUI is to UIKit?
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?
"we hate devtools. so we built one." — love it. enjoy your launch day, keep up your work 👏👏
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?
@severin__ Congrats on launching Layouts.dev! The concept sounds incredibly innovative.
The focus on simplicity and speed is impressive, especially for non-technical users who want to contribute to the frontend. Features like instant previews and pre-made components seem like huge time savers.
I can't wait to try Layouts.dev and see how it can streamline our UI development process.
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
Prebuilt components and real-time previews together seems like a great productivity boost!
