Skip to content

Demo

Draw it here. Copy the code.

Change the card on the left. The code on the right is generated from it, for all four platforms.

Canvas
Sign inContinue
Accent
<View style={s.card}>
  <Text style={s.title}>Sign in</Text>
  <TextInput style={s.email} />
  <TextInput style={s.password} secureTextEntry />
  <Pressable style={s.btn}>
    <Text style={s.btnLabel}>Continue</Text>
  </Pressable>
</View>

const s = StyleSheet.create({
  card:  { position: 'absolute', left: 0, top: 0, width: 200, height: 156, borderRadius: 10, backgroundColor: '#F6F4EE' },
  title: { position: 'absolute', left: 14, top: 16, width: 172, height: 18, fontSize: 14, fontWeight: '600' },
  email: { position: 'absolute', left: 14, top: 44, width: 172, height: 24, borderRadius: 6, borderWidth: 1.5 },
  password: { position: 'absolute', left: 14, top: 78, width: 172, height: 24, borderRadius: 6, borderWidth: 1.5 },
  btn:   { position: 'absolute', left: 14, top: 112, width: 172, height: 28, borderRadius: 6, backgroundColor: '#2A50D8' },
});

Positioned exactly like the real export, from one card with a few properties. The full editor has the complete shape, text, and layout tools, and exports whole screens.

Ready to draw a real screen?

Save your work and export the whole thing, on every platform.

Start freeSee how it compares