DEV Community

Cover image for I built an open-source AI interface builder that exports to React, Vue, Svelte… and Roblox
TimofeUS
TimofeUS

Posted on

I built an open-source AI interface builder that exports to React, Vue, Svelte… and Roblox

#ai #opensource #webdev #showdev

Hey DEV 👋

I've been building openconstructor: a browser-based interface builder where you put together pages from ready-made blocks and an AI assistant. It's free, needs no install, and the whole thing is open source under MIT.

👉 Try it: https://openconstructor.pw
👉 Source: https://github.com/Kuloka/openconstructor

What it does

1. A real component library. There are 145 components in 12 sections: AI & Chat (chat windows, prompt composers, "thinking" indicators, agent steps), Dashboards and charts, Pricing & Commerce, Auth, Navigation, Landing sections, Effects and more. Each one is plain HTML + CSS with no framework lock-in. Animated components play when you hover them in the catalog. Browse the sections →

2. Bring your own AI. Connect a key from OpenRouter, Google Gemini, Groq, Cerebras, Mistral, DeepSeek, OpenAI, Anthropic, xAI or Together, then type "a pricing section with three plans". The block lands on the canvas. Select an element first and only that element gets changed.
Your keys stay in your browser and are sent only to the provider you picked. On a budget? Groq's no-cost plan with GPT-OSS 120B and Gemini Flash both work well. More on the AI generator →

3. Screenshot → blocks. Paste a screenshot of any site or mockup (Ctrl+V works) and a vision model rebuilds it as editable HTML/CSS.

4. Edit without code. Double-click an element to edit its text directly on the page. Click any part of it to change color, size, weight, radius or padding in a small inspector.

5. ⚗ Fusion. This is the experiment I'm most curious about. Right-click a component → fuse with… → click another one. The AI breeds a new component that does the first one's job in the second one's visual style. A sign-in form × a glassmorphism card gives you a glass sign-in form, in its own new design rather than a copy of either.

6. Responsive by default (if you want). Switch the page from free layout to stack. Blocks then flow top to bottom, and the export adapts to any screen. A preview shows the page on phone, tablet and desktop side by side.

7. Page-wide themes. One click recolors every component on the page to a new accent. Grays stay gray, and alpha and notation are preserved. You can also swap any single color everywhere, or set one font and one corner style for the whole page.

Export anywhere, including game engines

This is the part I haven't seen in other web builders:

  • HTML: one self-contained file
  • React / Vue / Svelte: a ready component file
  • Roblox (Luau): a LocalScript that builds your UI with ScreenGui, Frame, TextLabel, TextButton, UICorner, UIStroke, UIGradient and a UIScale that fits any screen. Drop it into StarterPlayerScripts and press Play. How it works →
  • LÖVE 2D (Lua): a main.lua that draws the layout with love.graphics. Details →
  • Flutter, SwiftUI, Jetpack Compose, Tailwind: AI-assisted ports, a starting point to review.

The Roblox and LÖVE exports don't guess from your HTML. They read the rendered layout, using each element's real position, size, colors, radius, borders and text, and then generate native UI code from that snapshot. To be clear, they're visual only: buttons and text boxes have no logic wired up yet.

Share it

Hit publish and the page gets a public link like openconstructor.pw/p/my-page. Signed-in users can also keep projects in the cloud and open them on any device. Sign-in is optional, and everything else works without an account.

How it's built

  • Vite + vanilla JS for the editor. React 19 only for the landing page and the chat input.
  • Every element renders in its own sandboxed iframe with a strict CSP and no scripts. AI-generated code can't touch the editor or your keys.
  • Supabase for auth (Google, GitHub, email) and storage.
  • Cloudflare for hosting. A small Worker serves published pages, sandboxed with script-src 'none'.

What's next

I'd love feedback, especially on:

  • Which export target you'd actually use, and what's missing from it
  • Components you wish were in the library
  • Whether Fusion produces anything useful for you, or just chaos 😄

Issues and PRs are very welcome: https://github.com/Kuloka/openconstructor

If you like the project, a ⭐ on GitHub really helps a solo dev get it in front of more people. Thanks for reading!

Top comments (0)