Showcase

One design, four exports

Below is a single screen, drawn once on the canvas, exported to all four targets. The code is the actual generator output, unedited. It is byte-compared against the generators in our test suite, so what you read here is what you would get.

Look at the geometry. Every export places each element exactly where you drew it, in whatever form its language expects.

The design

One screen on an iPhone 14 preset, 390 by 844, white background. Three elements:

Those numbers are the whole design. Every one of them reaches all four exports below, literally in three of them and converted to SwiftUI's centre-based positioning in the fourth. Check them.

React Native

import React from 'react';
import { View, Text, TextInput, ScrollView, StyleSheet } from 'react-native';

export default function Reminders() {
  const [ih3, setIh3] = React.useState(96);

  return (
    <ScrollView style={styles.screen} contentContainerStyle={{ minHeight: 844 + (Math.max(0, ih3 - 96)) }} showsVerticalScrollIndicator={false}>
      <Text style={styles.title}>{"Reminders"}</Text>
      <View style={styles.card} />
      <TextInput style={[styles.note, { height: ih3 }]} placeholder={"Add a note..."} placeholderTextColor="#9ca3af" multiline scrollEnabled={false} onContentSizeChange={(e) => setIh3(Math.max(96, e.nativeEvent.contentSize.height + 2))} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  title: {
    position: 'absolute',
    left: 24,
    top: 64,
    width: 200,
    height: 28,
    color: '#17171A',
    fontFamily: 'Inter',
    fontSize: 22,
    lineHeight: 29,
    textAlign: 'left',
    fontWeight: '700',
  },
  card: {
    position: 'absolute',
    left: 24,
    top: 112,
    width: 220,
    height: 96,
    borderRadius: 16,
    backgroundColor: '#2A50D8',
  },
  note: {
    position: 'absolute',
    left: 24,
    top: 232,
    width: 280,
    minHeight: 96,
    backgroundColor: '#ffffff',
    color: '#17171A',
    fontFamily: 'Inter',
    fontSize: 16,
    paddingHorizontal: 12,
    paddingVertical: 10,
    textAlignVertical: 'top',
    overflow: 'hidden',
    textAlign: 'left',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#E4E1D8',
  },
});

SwiftUI

import SwiftUI

struct Reminders: View {
  @State private var field3: String = ""
  @State private var field3Height: CGFloat = 96

  var body: some View {
    ScrollView(showsIndicators: false) {
      ZStack(alignment: .topLeading) {
      Color(red: 1, green: 1, blue: 1)
        .frame(width: 390, height: 844 + (max(0, field3Height - 96)))
      Text("Reminders")
        .font(.custom("Inter", size: 22))
        .fontWeight(.bold)
        .lineSpacing(6.6)
        .foregroundColor(Color(red: 0.09, green: 0.09, blue: 0.1))
        .multilineTextAlignment(.leading)
        .frame(width: 200, height: 28, alignment: .topLeading)
        .position(x: 124, y: 78)
      RoundedRectangle(cornerRadius: 16)
        .fill(Color(red: 0.16, green: 0.31, blue: 0.85))
        .frame(width: 220, height: 96)
        .position(x: 134, y: 160)
      ZStack(alignment: .topLeading) {
        Text(field3.isEmpty ? " " : field3)
          .font(.custom("Inter", size: 16))
          .padding(EdgeInsets(top: 10, leading: 12, bottom: 10, trailing: 12))
          .frame(width: 280, alignment: .topLeading)
          .fixedSize(horizontal: false, vertical: true)
          .opacity(0)
          .background(GeometryReader { geo in Color.clear.preference(key: GrowHeightKey.self, value: geo.size.height) })
        TextEditor(text: $field3)
          .font(.custom("Inter", size: 16))
          .foregroundColor(Color(red: 0.09, green: 0.09, blue: 0.1))
          .multilineTextAlignment(.leading)
          .scrollDisabled(true)
          .padding(EdgeInsets(top: 10, leading: 12, bottom: 10, trailing: 12))
      }
      .onPreferenceChange(GrowHeightKey.self) { field3Height = $0 }
      .frame(width: 280, height: max(96, field3Height))
      .background(Color(red: 1, green: 1, blue: 1))
      .cornerRadius(12)
      .overlay(RoundedRectangle(cornerRadius: 12).strokeBorder(Color(red: 0.89, green: 0.88, blue: 0.85), lineWidth: 1))
      .position(x: 164, y: 232 + (0) + max(96, field3Height) / 2)
    }
    .frame(width: 390, height: 844 + (max(0, field3Height - 96)))
    }
    .frame(width: 390, height: 844)
  }
}

private struct GrowHeightKey: PreferenceKey {
  static var defaultValue: CGFloat = 0
  static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
    value = max(value, nextValue())
  }
}

Flutter

import 'package:flutter/material.dart';

class Reminders extends StatefulWidget {
  const Reminders({super.key});

  @override
  State<Reminders> createState() => _RemindersState();
}

class _RemindersState extends State<Reminders> {
  late TextEditingController _c3;
  double _h3 = 96.0;

  @override
  void initState() {
    super.initState();
    _c3 = TextEditingController(text: '')..addListener(_measure3);
    _measure3();
  }

  @override
  void dispose() {
    _c3.dispose();
    super.dispose();
  }

  void _measure3() {
    final tp = TextPainter(
      text: TextSpan(
        text: _c3.text.isEmpty ? ' ' : _c3.text,
        style: const TextStyle(fontFamily: 'Inter', fontSize: 16),
      ),
      maxLines: null,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: 254);
    final h = tp.height + 20 < 96.0 ? 96.0 : tp.height + 20;
    if (h != _h3) setState(() => _h3 = h);
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        width: 390.0,
        height: 844.0 + ((_h3 - 96.0)),
        child: Stack(
          children: [
            Positioned.fill(child: Container(color: Color(0xFFFFFFFF))),
            Positioned(
              left: 24,
              top: 64,
              child: SizedBox(
                width: 200,
                height: 28,
                child: Text(
                  'Reminders',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontFamily: 'Inter',
                    fontSize: 22,
                    color: Color(0xFF17171A),
                    height: 1.3,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            Positioned(
              left: 24,
              top: 112,
              child: Container(
                width: 220,
                height: 96,
                decoration: BoxDecoration(
                  color: Color(0xFF2A50D8),
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
            ),
            Positioned(
              left: 24,
              top: 232,
              child: Container(
                width: 280,
                height: _h3,
                decoration: BoxDecoration(
                  color: Color(0xFFFFFFFF),
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: Color(0xFFE4E1D8), width: 1),
                ),
                child: TextField(
                  controller: _c3,
                  maxLines: null,
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    color: Color(0xFF17171A),
                    fontFamily: 'Inter',
                    fontSize: 16,
                  ),
                  decoration: InputDecoration(
                    hintText: 'Add a note...',
                    hintStyle: const TextStyle(color: Color(0xFF9CA3AF)),
                    border: InputBorder.none,
                    isDense: true,
                    contentPadding: const EdgeInsets.symmetric(
                      horizontal: 12,
                      vertical: 10,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

HTML and CSS

<!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>

What to look for

The same geometry, in each language's own convention. Three of the four carry your canvas values literally: the card at x 24, y 112, 220 by 96 exports as left: 24, top: 112 in React Native, Positioned(left: 24, top: 112) in Flutter, and left: 24px; top: 112px in CSS.

SwiftUI is the interesting one. It reads .position(x: 134, y: 160), which looks wrong until you know that SwiftUI positions views by their centre rather than their top-left corner. 24 plus half of 220 is 134; 112 plus half of 96 is 160. Same rectangle, expressed the way SwiftUI expects it. Getting that conversion right on every element is the difference between output that compiles and output that is correct, and it is the sort of thing an approximation gets wrong quietly.

That is the whole claim, and this page exists so you can check it rather than take our word.

Each output is native to its language. .position(x:, y:) in SwiftUI, Positioned inside a Stack in Flutter, a style object in React Native, absolute pixels in CSS. One representation, four idioms.

None of it is responsive. These screens are exact at the size they were drawn and do not reflow. The fidelity guide explains why that is the trade rather than an oversight.

Why this is our screen and not a customer's

Most showcase pages open with a wall of customer logos. We do not have customers yet, so we are not going to borrow the look of having them. What you get instead is the one thing we can actually prove: our own design, our own generated code, every number checkable against the table above.

When there is real user work to show, it goes above this section, and this section stays as the reference example.