HTML/CSS
Design to HTML/CSS code
Design the screen on the One Redesign canvas, then export it. Every element comes out absolutely positioned in pixels, straight off the canvas, so the browser lays it out exactly once and gets it right. The same screen also exports to React Native, SwiftUI, and Flutter.
What does the HTML/CSS output look like?
This is the actual export, unedited.
Why does it match the design exactly?
Pixel-exact placement
every element is `position: absolute` with `left/top/width/height` in pixels, taken straight off the canvas.
Multiline fields grow and push
a `<textarea>` grows its height on input (native `scrollHeight` measurement) and a small runtime script shifts every element below it down by the exact growth delta, matching the canvas.
Scrolls both ways
the page scrolls vertically whenever content exceeds the device, and horizontally too when the canvas itself is wider than the device.
Is the HTML/CSS output responsive?
No, and this is the honest limit of our web target: absolutely positioned output does not reflow to arbitrary viewport widths. Design each size you need as its own screen. If fluid responsive web is your requirement, we are not the right tool, and our comparison pages say who is.
Do I own the exported HTML/CSS code?
Yes. One markup file and one stylesheet, yours outright. The only extra is a small script, and only if you use auto-growing multiline fields.
See all four platforms
Try it with HTML/CSS
The demo opens on the HTML/CSS tab. Edit the canvas and watch the code change.