Code and web export
Turn a frame into CSS, HTML, React, Tailwind, SwiftUI or Compose.
PopCraft reads a frame as an element tree — nesting, auto layout, constraints, type and paint — and writes that tree out in the language you ask for. It is one tree behind every target, so the structure is the same wherever you send it.
Targets
| Target | You get |
|---|---|
| CSS | A stylesheet |
| HTML | Markup with a stylesheet |
| HTML (inline CSS) | One self-contained file |
| Email HTML | Table-based markup that survives email clients |
| React | A .tsx component |
| React + Tailwind | A .tsx component with utility classes |
| Tailwind | Markup with utility classes |
| SwiftUI | A .swift file: import SwiftUI, the view, and a #Preview for Xcode's canvas. Text follows Dynamic Type |
| Compose | A .kt file: the imports it needs, the composable, and an @Preview for Android Studio |
What translates well
Auto layout becomes flexbox (or a VStack / HStack / Column / Row). Constraints become
positioning. Text styles become type rules. Fills, strokes, corner radii, shadows and blurs map to
their nearest equivalent in the target.
What doesn't
Effects that exist only on the GPU — shader fills, halftones, some blend modes — have no CSS or SwiftUI equivalent. They are rasterised into an image asset rather than silently dropped, so the output still looks right; it just isn't editable as code. A box with a shader, video or pattern fill keeps its children as elements, with the fill as a picture behind them.
What plays, and what you can play with
Description
The Burger reveal template, a 3D prototype, with its first screen selected. From the ⋯ menu, Export and Export as web code… open the web export. React is picked as the format, and Export writes one working page: its screens, its smart-animated moves and the drag that orbits the burger in 3D.
- Select the frame to export: a prototype's first screen exports every screen it reaches.
- Open ⋯ → Export → Export as web code….
- Pick HTML + CSS or React (inline HTML and email stay at their first state), and whether pictures are embedded or written as separate files.
- Click Export.
The 3D burger (the Burger reveal template) comes out as one page: each layer lifts on hover and comes forward on a click, and a drag orbits it in 3D.
HTML and React export keep a frame alive:
- Motion plays as CSS keyframes: motion components' instances (waiting for their click, hover or scroll trigger), and the exported frame's own timeline, keys and behaviours alike. A timeline that never settles, like a spin, loops.
- A prototype comes out as one working page. The frame you export and every screen its Navigate interactions
reach are its states; layers with the same name are one element, so going to another screen glides each one to its
new place, the way Smart animate does. Interactive components (Change to, including While hovering and
While pressing) keep their variants, and Orbit in 3D keeps its drag. A small script with no dependencies plays
it, the same one in HTML and in React (mounted by an effect, so the component never re-renders). Each element carries
data-layerwith its layer's name. - 3D scenes become CSS
preserve-3d, with the camera's lens as the perspective. A group's opacity inside a scene travels down to the layers it holds, because CSS flattens 3D under a group's opacity.
Variables, modes and overlays aren't carried into the page yet: a prototype built on them exports at its first state.
To see a page laid out by the browser with those working, open the web preview.
Each format, and what you get
Open ⋯ → Export → Export as web code…, pick a format and click Export. Each video below exports a screen and then opens the file that came down, in a browser on its own.
HTML + CSS
One .html file: markup, a stylesheet with a class per layer, and a small script when the frame is a prototype.
Open it in a browser, or paste its parts into a page of your own.
Description
The website template with its Landing screen selected. From the ⋯ menu, Export and Export as web code… open the web export with HTML + CSS picked; Export downloads one HTML file. The file is then opened in a browser on its own: the landing page shows, and clicking Pricing in its navigation goes to the pricing screen.
HTML with inline CSS
One .html file with every declaration on its element and no stylesheet or script. Paste the markup anywhere. It
stays at the frame's first state: nothing plays.
Description
The website template with its Landing screen selected. The web export is opened and HTML with inline CSS is picked; Export downloads one HTML file. Opened in a browser on its own, the file shows the landing page: every element carries its own style, with no stylesheet and no script.
Email HTML
One .html file of nested tables with inline styles, sized for Outlook. What a table cannot say (rounded corners,
shadows, gradients, overlapping layers) becomes a picture of that part. Set Pictures to separate files for a
real send: some mail clients refuse embedded ones.
Description
The newsletter email template with its page selected. The web export is opened and Email HTML is picked; Export downloads one HTML file made of nested tables with inline styles, with a picture for each part a table cannot say. Opened in a browser on its own, the file shows the newsletter as a mail client would.
React
One .tsx file exporting a component with real children and style objects. Import it into a React app. A
prototype's screens and interactions come with it.
Description
The website template with its Landing screen selected. The web export is opened and React is picked; Export downloads one .tsx file. The component is then compiled and rendered in a page of its own: the landing page shows, and clicking Pricing goes to the pricing screen.
React + Tailwind
The same component with Tailwind classes in place of style objects. Layers that change with a prototype's state keep their styles inline, because the prototype replaces them as it plays.
Description
The website template with its Landing screen selected. The web export is opened and React + Tailwind is picked; Export downloads one .tsx file whose elements carry Tailwind classes. The component is then compiled and rendered in a page with Tailwind: the landing page shows, and clicking Pricing goes to the pricing screen.
Quality and versions
What comes out is code a developer can keep. The React components type-check under strict TypeScript and clean up the listeners they add; the Next.js project uses the framework's current conventions and the packages PopCraft last built it with. Every change to the exporters, and every week, CI exports real templates and installs, lints, type-checks and builds them.
A whole website
Everything above is one layer at a time. To get every screen of a page as a working website, or to put it online from PopCraft, see Websites: export and publish and Next.js projects.
Dev mode
If you want to read the values rather than take the file, switch to Dev in the top bar. It's a read-only lens over the same document: measurements between layers, the CSS for anything you click, and the assets ready to download. Nothing you do in Dev mode can change the design.
Description
A landing page in the editor. Dev in the top bar switches to the read-only handoff view. The hero’s button is clicked: the inspector shows its size, colours and type, and the CSS for it. With the button selected, the pointer rests on the headline above and the distance between the two is drawn on the canvas.
- Click Dev in the top bar.
- Click a layer: the inspector shows its size, colours, type and CSS.
- With it selected, point at another layer to see the distance between them.