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

SVG to React component

Paste an SVG icon or illustration and get a ready-to-use React component: attributes are camelCased and props are spread on the root so you can set size and color.

Input
Output

    

  


FAQ
Can I resize the icon?
Yes, props are spread on the svg element, so width, height and className work.
Does it handle stroke-width and fill-rule?
Yes, every hyphenated attribute is converted to camelCase.
Is it free?
Yes, free and unlimited.



Export

  


Account


My projects