Export · React · Vue · Svelte

Turn an HTML design into a React, Vue or Svelte component

Everything you build in openconstructor is plain HTML and CSS. When the page is ready you can download it as a standalone HTML file, or wrap it as one component for the framework your project uses — React, Vue or Svelte — without a build step on our side.

Open the editor →

The workflow

Assemble a page from the component library, paste your own HTML/CSS with + custom code, or ask the AI assistant to build sections for you.
Arrange everything on the free-form canvas — each element keeps its own HTML and CSS.
Click export ↓ and choose HTML, React (JSX), Vue SFC or Svelte. You get one file named after your project.

What each export contains

React (.jsx)

A default-exported function component. The page's CSS is collected into one string rendered in a <style> tag, and each element is rendered with its original markup via dangerouslySetInnerHTML.

Vue (.vue)

A Vue 3 single-file component: a <template> that renders each element with v-html, a small <script> with the element list, and all the CSS in a <style> block.

Svelte (.svelte)

A Svelte component that renders elements with {@html}. Styles are injected through <svelte:head> so the original class names keep working instead of being scoped away.

In all three, the elements keep the positions they had on the canvas inside a wrapper div.oc-page with the page width and background. <script> tags inside elements are dropped — they never ran in the builder either — so interactive behaviour is yours to add.

When this is the right tool

Prototypes and landing pages that you want to drop into an existing React, Next.js, Nuxt, Vue or SvelteKit app quickly.
Design hand-off: a developer gets a working file with real CSS rather than a screenshot.
A starting point you then split into smaller, idiomatic components with props and state.

The export is deliberately faithful rather than clever: it does not try to guess props, convert every element into JSX or rewrite your CSS, which is where automated converters usually break things. If you need typed, idiomatic components, treat the export as the reference implementation and refactor from there.

Other targets

Besides the built-in exports, the AI assistant can port the page to Flutter (Dart), SwiftUI, Jetpack Compose (Kotlin) or HTML with Tailwind CSS classes. AI ports are generated by the model you choose, so review them before shipping. For game engines there are direct exports to Roblox (Luau) and LÖVE 2D.

FAQ

Does the React export need any extra libraries?

No. It is a single component with no imports beyond React itself; the CSS travels inside the file.

Is the CSS scoped?

In React and Svelte the CSS is global, so class names behave exactly as they did in the editor. In Vue it is a normal unscoped style block. Rename classes if they clash with your app.

Can I export to Tailwind?

Yes, as an AI port: the assistant rewrites the page as one HTML file that uses Tailwind utility classes. It needs an AI provider key.

Is the exported code mine to use?

Yes. You can use exported code in personal and commercial projects. openconstructor itself is MIT-licensed.

Ready to try it?

openconstructor is free, open source (MIT) and runs entirely in your browser. No sign-up is needed to build and export.