What you get
One HTML file with its styles. Every element is position: absolute with left, top, width, and height in pixels, taken straight off the canvas.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Reminders</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
<style>
html, body {
margin: 0;
padding: 0;
background: #ffffff;
}
.screen {
position: relative;
width: 390px;
height: 844px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
background: #ffffff;
}
.screen::-webkit-scrollbar {
display: none;
}
.title {
position: absolute;
left: 24px;
top: 64px;
width: 200px;
height: 28px;
color: #17171A;
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
text-align: left;
line-height: 1.3;
white-space: pre-wrap;
}
.card {
position: absolute;
left: 24px;
top: 112px;
width: 220px;
height: 96px;
background: #2A50D8;
border-radius: 16px;
}
.note {
position: absolute;
left: 24px;
top: 232px;
width: 280px;
height: 96px;
background: #ffffff;
color: #17171A;
font-family: 'Inter', sans-serif;
font-size: 16px;
text-align: left;
padding: 10px 12px;
box-sizing: border-box;
outline: none;
border-radius: 12px;
border: 1px solid #E4E1D8;
height: auto;
min-height: 96px;
overflow: hidden;
resize: none;
}
.note::placeholder {
color: #9ca3af;
}
</style>
</head>
<body>
<div class="screen">
<div class="title">Reminders</div>
<div class="card"></div>
<textarea class="note" placeholder="Add a note..."></textarea>
<div class="screen-pad" style="width: 390px; height: 844px;"></div>
</div>
<script>
(function () {
var screen = document.querySelector('.screen');
if (!screen) return;
var pad = screen.querySelector('.screen-pad');
var padBase = pad ? pad.offsetHeight : 0;
screen.querySelectorAll('textarea').forEach(function (t) {
var baseH = t.offsetHeight;
var bottom = t.offsetTop + baseH;
var below = Array.prototype.map.call(screen.children, function (el) { return { el: el, top: el.offsetTop }; })
.filter(function (o) { return o.el !== t && o.el !== pad && o.top >= bottom - 1; });
var fit = function () {
t.style.height = 'auto';
t.style.height = t.scrollHeight + 'px';
var delta = t.offsetHeight - baseH;
below.forEach(function (o) { o.el.style.top = (o.top + delta) + 'px'; });
if (pad) pad.style.height = (padBase + delta) + 'px';
};
t.addEventListener('input', fit);
fit();
});
})();
</script>
</body>
</html>Which devices offer it
Everything except watchOS. Phones, tablets, macOS, Windows, and generic artboards all offer the web target, because a browser runs on all of them.
What it handles
Placement. Absolute, in pixels, from your canvas coordinates. No Grid, no Flexbox.
Multiline inputs that grow. A <textarea> grows on input using the browser's own scrollHeight measurement, and a small script shifts the elements below it down by the exact growth. That script is the only runtime piece in the export, and it only appears if your design actually uses an auto-growing field.
Scrolling in both directions. The page scrolls vertically when content exceeds the device, and also whenever the design contains a multiline field, even if everything currently fits, because the field can grow past the device at runtime. It scrolls horizontally when the canvas is wider than the device. The web target is currently the only one that does horizontal scroll.
What it does not handle
No responsive layout. This is the honest limit of the web target and it deserves stating without hedging: absolutely positioned output does not reflow to arbitrary viewport widths. It will look exactly right at the size you designed it, and it will not adapt below or above that.
For an app screen on a known device size, that is fine. For a marketing site or a fluid web app, it is the wrong tool, and our comparison pages say which tools do that properly.
Working with the output
One self-contained HTML file, styles embedded in a <style> block rather than a separate stylesheet, yours outright. Drop it in and serve it.
Two conditional pieces appear only when your design needs them. A Google Fonts <link> is emitted when your text uses a font Google Fonts actually serves. The autogrow <script> is emitted only when the design contains a multiline field. Element ids and class names come from your canvas layer names; unnamed shapes become shape1, shape2, and so on.
Because the output is a positioned document rather than a semantic layout, treat it as a rendering of a screen rather than as a starting point for a component library. If you need semantic sectioning for accessibility or SEO on a public page, you will be adding that yourself.