Layouter is not just another design tool – it's a philosophical statement about simplicity. While others offer endless toolbars that would make Swiss Army knives blush, we've distilled interface design to its purest essence: a rectangle and some text.
Just as a proper cup of Earl Grey needs only tea and water, Layouter needs only two tools:
The foundation of all interfaces. Think of it as the Lego bricks that built an empire:
- Buttons? A rectangle with rounded corners
- Cards? A rectangle with a shadow
- Headers? A rather wide rectangle
- Modals? A rectangle that knows how to make an entrance
Because even the finest architecture needs proper signage:
- Perfectly positioned
- Tailwind-powered styling
- No unnecessary formatting faff
- Just the essentials: size, alignment, and weight
Every rectangle and text element is impeccably dressed in Tailwind utilities:
<!-- A properly dressed rectangle -->
<div class="absolute bg-blue-500 rounded-xl w-48 h-24">
<!-- A well-mannered text -->
<span class="text-gray-800 text-xl font-bold text-center">
Precisely positioned, old chap!
</span>
</div>See buildy for more details.
Coming soon: Clever algorithms to pick shadcn/ui blocks right while drawing your rectangles in Layouter.
- Draw your interface with rectangles
- Layouter analyses your composition
- BuildY suggests matching shadcn/ui components
- You select your favourites with a gentlemanly click
- ✅ Rectangle and text tools
- ✅ Drag-and-drop precision
- ✅ Tailwind utility exports
- ✅ Dark mode (for those long designers nights)
- 🔄 Pattern recognition for common UI elements
- 🔄 Integration with shadcn/ui component library
- 🔄 Smart component suggestions
- 🔄 One-click component favouriting
- 📅 Automatic layout optimization
- 📅 Component variation suggestions
- 📅 Theme customization
- 📅 Export to BuildY projects
# Clone with British precision
git clone https://github.com/alexy-os/layouter.git
# Enter the establishment
cd layouter
# Start the service
# (No tea will be served, unfortunately)Why complicate what can be simple? With the approach of true perfectionists:
- Every interface is a composition of rectangles
- Every rectangle can be a component
- Every component should be precisely placed
- And everything should work together like a well-oiled machine
Imagine designing your interface as easily as arranging furniture in a proper English manor:
- Draw your layout with rectangles
- Add text where needed
- Click suggested components
- Export to BuildY
- Have a cup of tea while your interface assembles itself
We welcome contributions with the same enthusiasm as a proper English garden welcomes spring flowers. Do mind the coding standards – we're quite particular about those.
MIT - As free as speech, not as free as tea.
"In simplicity lies the ultimate sophistication" - Leonardo da Vinci (who would have loved Layouter, we're quite certain)