FREE100% free · nothing to install

Build your UI.
Get the code.

Stack ready-made sections, edit them live, then export clean HTML, React, Vue, Svelte or Tailwind code. A code converter is included.

Open the builder →Convert code

No credit card · Account optional · The code is yours

lolpanel.v1 / builder
How it works

Three steps. Zero setup.

01

Add blocks

Click or drag a component from the left column, or use the Free zone to place elements on a grid.

Click / drag
02

Edit live

Click a block: edit its text, colors, font and spacing on the right. Double-click any text to type in place.

Right panel
03

Export the code

Hit Export: HTML, React, Vue, Svelte or Tailwind, ready to copy. Or share a link.

Ctrl + E
For developers

Everything you need, nothing more

⇄

Converter

HTML → JSX, Vue, Svelte, Tailwind · SVG → React · CSS → JS object or Tailwind.

◎

Local account

Local account, JSON import/export, share links, and forms connected to Supabase, Firebase or your API, with generated .env and security rules.

▭

Responsive preview

Live local preview, desktop / tablet / mobile, and 6 theme presets. ZIP export ready for Vercel, Netlify, Cloudflare, GitHub Pages or OVH.

⌘

Free placement

Free zone: place headings, buttons and images anywhere, snapped to a grid. Plus entrance, hover and background animations.

Templates

Start from a base

Autosaved

CSS to Tailwind converter

Paste CSS rules or plain declarations and get the matching Tailwind classes. Spacing uses the Tailwind scale when possible, other values become arbitrary values, and :hover or :focus become variants.

Input
Output

    

  


FAQ
Are hover states supported?
Yes, :hover, :focus and :active become Tailwind variants.
What if there is no Tailwind equivalent?
The value is kept as an arbitrary value, like p-[13px] or [property:value].
Which Tailwind version?
The output works with Tailwind CSS v3 and v4.



Export

  


Account


My projects