Paste a screenshot.
Get email HTML that works.

‹ osamahassouna.com

The product · Image to Email

A design in, working HTML out

Email HTML is its own universe — tables, inline styles, Outlook’s VML, Gmail’s 102 KB clip. The Playground does the hard part. Paste a screenshot of any email design and get back HTML that follows every rule in this playbook, ready to edit and export.

01

Paste or upload

A screenshot of an email design — from Figma, a competitor’s inbox, anywhere. Cmd/Ctrl+V works.

→

02

Generate

Playbook-compliant HTML: table layout, inline styles, VML buttons, responsive container, fill tokens for links.

→

03

Edit & export

Live preview, size meter against the Gmail clip limit, snippet library. Tweak and download.

Open the Playground →Free. No sign-up. No install.

Three ways to use it

One playbook, three surfaces

The same body of email-rendering knowledge, delivered however you work — a visual tool, a tool your AI client calls, or a reference you read.

01 · VisualPlayground

Playground

Paste a screenshot for instant image-to-email, or hand-build with a live preview, snippet library, and a Gmail-clip size meter. Edit and export.

Image to Email · live editorOpen →

02 · ProgrammaticMCP · CLI

MCP & CLI

Plug the playbook into Claude, Cursor, or Cline. Your AI client pulls the exact rules and component patterns as tools, so it stops generating email that breaks in Outlook.

npm · hosted endpointWire it up →

03 · ReferenceDocs

The Playbook

Learn the rules yourself. Structure, components, Outlook/MSO compatibility, and the production checks (Gmail clipping, dark mode, preheaders) — each pattern inline-styled and cross-client tested.

19 rule pages · 4 categoriesRead →

What’s inside the playbook

The reference, organized

If you’d rather hand-build, the playbook is structured the way you actually build an email — from the boilerplate out to the production checks.

Structure

The bones

Doctype, head boilerplate, the body container, and the header / body / footer table architecture.

Start with structure →

Components

Building blocks

Spacing, images, background images (VML), bulletproof buttons, inline icons, and text — each inline-styled and tested.

See components →

Compatibility

Where engines diverge

Outlook MSO conditional comments, RTL support, and hybrid responsive behavior on mobile clients.

Compatibility notes →

Production

Ship checks

Gmail’s 102 KB clip, dark mode, preheader text, and bulletproof buttons — what separates renders from performs.

Production checks →

Conventions

Three rules that explain the rest

Everything in the playbook follows from these.

• 01All CSS is inline — clients strip <style> blocks unpredictably. Media queries are the only exception.Inline styles
• 02Tables, not flexbox — every layout is nested <table role=“presentation”>. Intentional, not legacy.Table layout
• 03Outlook is the constraint — if it works in Outlook on Windows, it works everywhere. Design for it first.Outlook first

Who maintains this

Written by an engineer who ships this code

The Email Playbook is built and maintained by Osama Hassouna, a senior UI engineer who builds production front-end systems, design systems, and developer tooling. Every rule here is distilled from real cross-client work and tested against Outlook on Windows, Gmail, and Apple Mail — not scraped from blog posts. It’s open source: read it, fork it, or open an issue if a client behaves differently than the playbook documents.