Playground

Write email code and see the exact HTML our engine produces — live, in your browser, with nothing to install. It renders through the same pipeline the editor's exact preview and the send engine use. Insert any component from the palette below.

CodeValid

<Image src="https://www.unitpost.com/web-app-manifest-192x192.png" alt="{{product_name}}" width={48} align="center" margin-bottom={16} /> <Spacer height={24} /> <Heading level={1} align="center" color="#18181b" margin-bottom={16}> Welcome aboard, {{first_name}} 👋 </Heading> <Text align="center" color="#3f3f46" font-size={16} margin-bottom={16}> Thanks for joining {{product_name}}. Your account is ready — let's get you to your first win in just a couple of minutes. </Text> <Spacer height={24} /> <Button href="{{get_started_url}}" align="center" background-color="#18181b" text-color="#ffffff" border-radius={9999} inner-padding-x={34} inner-padding-y={14} margin-bottom={16}> Get started </Button> <Spacer height={32} /> <Section background-color="#fafafa" padding-x={28} padding-y={28} border-radius={12}> <Heading level={3} align="center" color="#18181b" margin-bottom={16}> Three quick steps to get value fast </Heading> <Markdown align="left" color="#3f3f46" font-size={15} margin-bottom={16}> **1. Set up your profile** — add the details that personalize your experience. **2. Connect your first integration** — bring your data in so things just work. **3. Invite your team** — {{product_name}} is better together. </Markdown> </Section> <Spacer height={28} /> <Divider color="#e4e4e7" margin-bottom={16} /> <Spacer height={16} /> <Text align="center" color="#71717a" font-size={14} margin-bottom={16}> Need a hand? Just reply to this email — a real human will get back to you. </Text>

<Image src="https://www.unitpost.com/web-app-manifest-192x192.png" alt="{{product_name}}" width={48} align="center" margin-bottom={16} />
<Spacer height={24} />
<Heading level={1} align="center" color="#18181b" margin-bottom={16}>
  Welcome aboard, {{first_name}} 👋
</Heading>
<Text align="center" color="#3f3f46" font-size={16} margin-bottom={16}>
  Thanks for joining {{product_name}}. Your account is ready — let's get you to your first win in just a couple of minutes.
</Text>
<Spacer height={24} />
<Button href="{{get_started_url}}" align="center" background-color="#18181b" text-color="#ffffff" border-radius={9999} inner-padding-x={34} inner-padding-y={14} margin-bottom={16}>
  Get started
</Button>
<Spacer height={32} />
<Section background-color="#fafafa" padding-x={28} padding-y={28} border-radius={12}>
  <Heading level={3} align="center" color="#18181b" margin-bottom={16}>
    Three quick steps to get value fast
  </Heading>
  <Markdown align="left" color="#3f3f46" font-size={15} margin-bottom={16}>
    **1. Set up your profile** — add the details that personalize your experience.
    
    **2. Connect your first integration** — bring your data in so things just work.
    
    **3. Invite your team** — {{product_name}} is better together.
  </Markdown>
</Section>
<Spacer height={28} />
<Divider color="#e4e4e7" margin-bottom={16} />
<Spacer height={16} />
<Text align="center" color="#71717a" font-size={14} margin-bottom={16}>
  Need a hand? Just reply to this email — a real human will get back to you.
</Text>

Components

Layout

Content

Media

Interactive