Export code (HTML, React, Tailwind)
Export a single screen or a whole project as production-ready front-end code.
Last updated
What you can export
- A single screen as HTML or as a React component.
- A whole project as a multi-screen React project, assembled and downloadable as an archive.
Styling is Tailwind CSS, with your project theme expressed as design tokens so the code carries the same system the canvas does.
Exporting one screen
- Select the screen.
- Export → Code.
- Choose HTML or React.
- Copy it, or download it.
Exporting a whole project
Project export runs as a background job — it generates every screen, then assembles them into one project structure. Larger projects take longer; you can watch progress and download when it finishes.
What the code is like
It is real, readable front-end code: semantic markup, Tailwind utility classes, theme tokens for colours and type, and images referenced by URL from your project's asset storage.
Two things to plan for:
- Assets are remote by default. Download them into your repo before shipping, so your production site doesn't depend on UXMagic's asset URLs.
- It's a front end. There's no data layer, routing or state management — you wire it into your app.
Responsive
Exported code reflects the screen you exported, at that screen's width. If you generated separate mobile and desktop variants, export both and merge them at your breakpoint. See Responsive and device variants.
Straight into a repo
You can push exported code directly to GitHub instead of downloading it — see GitHub sync.
Was this article helpful?