ES
Home › Developer Tools › HTML Email Template Builder

HTML Email Template Builder

Build an email newsletter or announcement by stacking blocks: header, text, image, button, two columns, divider, spacer and footer. The tool writes table-based HTML with inline styles that works in Gmail, Outlook and Apple Mail, ready to paste into your email platform.

Last updated:

Add blocks drag into the list or click

Blocks

    Edit block

    Email settings
    Preview

    Advertisement
    Advertisement

    How to use the HTML Email Template Builder

    1. Pick a starter template or start blank, then set the email width, colors and font in Email settings.
    2. Add blocks by dragging them from the palette into the block list, or click a block type to add it at the end.
    3. Edit a block by selecting it: change its text, links, image URL, colors and alignment in the panel below the list.
    4. Reorder by dragging blocks, or with the ↑ and ↓ buttons. Check the desktop and mobile previews.
    5. Copy or download the HTML and paste it into your email platform's custom HTML editor. Replace sample image URLs with images hosted on your site.

    How the generated email is built

    The output follows the conventions that email developers rely on for broad client support. The page background is a full-width table; inside it sits a fixed-width container table (600 px by default) with one row per block. Every text element carries its own inline style with font, size, line height and color, because some clients drop <style> blocks or reset inherited styles.

    • Two columns use the "hybrid" technique: two inline-block divs with a max-width sit side by side when there is room and wrap under each other on narrow screens, even in apps that ignore media queries. Outlook for Windows gets an equivalent table through <!--[if mso]> conditional comments.
    • Buttons are a link with padding inside a colored table cell, so they display even when images are blocked, and the whole button is clickable.
    • Images get a fixed width attribute for Outlook plus width:100%; max-width styles so they scale down on phones. Always fill in alt text: many people read email with images turned off.
    • The preheader is hidden text followed by invisible spacer characters, which stops the inbox preview from pulling in the first words of the body.

    Email client support at a glance

    FeatureGmail (web/app)Apple Mail / iOSOutlook for WindowsOutlook.com / new Outlook
    Inline stylesYesYesYes (limited CSS)Yes
    <style> in head with media queriesYesYesPartly ignoredYes
    border-radius on buttonsYesYesNo (square corners)Yes
    Web fontsNoYesNoNo
    Background imagesPartialYesNeeds VMLPartial
    Data URI / local imagesBlockedShownBlockedBlocked

    Support changes as clients update; test with your email platform's preview or by sending test messages to real accounts before a big send.

    Checklist before you send

    • Replace every sample image with an image hosted on a public https:// URL, and keep total HTML under about 100 KB (Gmail clips larger messages).
    • Use your platform's merge tags for the name, unsubscribe link and view-in-browser link.
    • Include your physical mailing address in the footer and a clear way to opt out.
    • Write a subject line under about 50 characters and a preheader that adds information rather than repeating it.
    • Check text contrast and keep body text at 14 px or larger (16 px reads best on phones).
    • Send tests to Gmail, Outlook and an iPhone, with images on and off.

    Frequently asked questions

    Why do HTML emails use tables instead of divs?

    Many email clients, especially Outlook for Windows (which uses Microsoft Word to render HTML), have weak CSS support. Nested tables with fixed widths and inline styles are the most reliable way to get the same layout everywhere.

    Why are the styles inline?

    Some clients strip or ignore <style> blocks, so each element carries its own style attribute. The generated email also includes a small <style> block with a media query that stacks columns on phones, for clients that support it.

    What width should an email be?

    600 px is the long-standing safe default; 600 to 640 px fits the reading pane of most desktop clients. On phones the container shrinks to the screen width.

    Can I use images stored on my computer?

    No. Email images must be hosted on a public https:// URL, such as your website or your email platform's image library. Data URIs and local files are blocked by Gmail and many other clients. The sample uses placeholder images for the preview only.

    What is preheader text?

    The preheader is the short line shown after the subject in many inboxes. The builder adds it as hidden text at the top of the email. Aim for 40 to 100 characters that add to the subject line.

    Will the email include an unsubscribe link?

    The footer block has an unsubscribe link field. Most email platforms provide a merge tag for it (for example a placeholder like {{unsubscribe_url}}); paste that tag in the link field. Marketing emails in the US must include a working opt-out under the CAN-SPAM Act.

    Is my design uploaded?

    No. The builder runs in your browser and saves your work in local storage on this device only.

    Are all the tools on FreeToolCabin tested for quality and accuracy?

    Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.

    Related tools

    Email Signature GeneratorBuild HTML email signatures for Gmail and Outlook.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.HTML MinifierMinify HTML: strip comments and whitespace safely and see how many bytes you save.Email Subject Line GeneratorGet 20 email subject lines for newsletters, sales or cold emails, with length and spam-word checks.Email Marketing Metrics CalculatorOpen rate, CTR, click-to-open, bounce, unsubscribe and revenue per email from campaign counts.Jinja2 Template TesterRender Jinja2 templates with YAML or JSON variables using real Jinja2, with clear error lines.QR Code GeneratorMake QR codes for links, Wi-Fi, email and more.Barcode GeneratorCreate Code 128, EAN-13, UPC-A, EAN-8, Code 39 and ITF-14 barcodes as PNG or SVG.UUID GeneratorGenerate UUID v4 and v7 / GUIDs in bulk and copy or download them.Schema Markup Generator (JSON-LD)Create JSON-LD structured data for FAQ, Product, Article and more.Htaccess & Nginx Redirect GeneratorBuild 301 redirects for .htaccess, Nginx and Netlify or Cloudflare _redirects.Fake Data GeneratorGenerate mock data as JSON, CSV or SQL.Random String GeneratorGenerate secure random strings and tokens in bulk with any length and character set.API Key GeneratorCreate secure API keys and secrets with prefixes, checksums and SHA-256 hashes for storage.MIME Type LookupFind the MIME type for any file extension, or the extensions for a MIME type, in 400+ entries.Cron Expression GeneratorBuild crontab schedules visually, read them in plain English and see the next run times.URL Slug GeneratorTurn titles into clean, SEO-friendly URL slugs: accents, stop words, separators and bulk lines.JSON Schema GeneratorTurn sample JSON into a draft 2020-12 JSON Schema with types, required fields and formats.Gitignore GeneratorBuild a .gitignore from 50+ templates for languages, frameworks, IDEs and OS, merged and deduped.License GeneratorCreate a LICENSE file for MIT, Apache, GPL, BSD, ISC, MPL or Unlicense with your name and year.ULID GeneratorGenerate sortable ULIDs and UUID v7 in bulk, monotonic option, and decode their timestamps.Htpasswd GeneratorCreate .htpasswd entries with bcrypt, APR1-MD5 or SHA-1 for Apache and Nginx basic auth.Placeholder Image GeneratorCreate placeholder images in any size, color and text as PNG, JPG, WebP, SVG or data URI.Ads.txt GeneratorCreate or validate ads.txt and app-ads.txt files: seller lines, cert IDs and variables.Docker Run to Compose ConverterConvert docker run commands to docker-compose.yml, or a compose file back to docker run.Dockerfile GeneratorGenerate a production Dockerfile and .dockerignore for Node, Python, Go or a static nginx site.HTML Boilerplate GeneratorTick the options you need and get a clean HTML5 starter template with meta, OG tags and CSS reset.JSON to Zod SchemaInfer a Zod (or Yup) schema from sample JSON with optional, nullable and z.infer types.Linux Commands Cheat SheetSearchable Linux and bash command reference with flags explained, examples and copy buttons.LLMs.txt GeneratorBuild an llms.txt file for AI crawlers: summary and link sections, import from your sitemap.Nano ID GeneratorGenerate secure Nano IDs with custom alphabet, length and count, plus a collision calculator.Nginx Config GeneratorBuild an nginx server block: static site, SPA, reverse proxy or PHP, with SSL, gzip and redirects.OpenAPI / Swagger ViewerView OpenAPI 2/3 JSON or YAML as interactive API docs with validation and an endpoint list.package.json GeneratorFill a form and get a valid, npm-ready package.json with scripts, dependencies and checks.PKCE Code Challenge GeneratorGenerate an OAuth 2.0 PKCE code_verifier and S256 code_challenge, build auth URLs, verify pairs.README GeneratorFill in a form and get a polished README.md with badges, install, usage and license, live preview.Regex GeneratorBuild regular expressions visually from blocks or presets (email, date, phone) and test them live.Commit Message GeneratorBuild Conventional Commit messages with type, scope, body, breaking change and issue refs.Docker Compose GeneratorBuild a docker-compose.yml with a form: services, ports, volumes, env, healthchecks and presets.Dummy File GeneratorCreate test files of an exact size in KB, MB or GB with zeros, random bytes or text.FFmpeg Command GeneratorPick a task and options, get the exact ffmpeg command with every flag explained.Folder Tree GeneratorTurn a local folder or an indented list into an ASCII directory tree for your README.GitHub Actions Workflow GeneratorBuild a GitHub Actions CI workflow: triggers, matrix, caching, tests, Pages or Docker deploy.Kubernetes YAML GeneratorGenerate Deployment, Service, Ingress, ConfigMap, Secret and HPA manifests with safe defaults.Markdown TOC GeneratorGenerate a linked table of contents from Markdown headings with GitHub-style anchors.OpenAPI EditorEdit OpenAPI/Swagger YAML or JSON side by side with live API docs, validation and download.OpenAPI ValidatorValidate OpenAPI 3.0/3.1 and Swagger 2.0 specs: schema errors, broken $refs, line numbers.Pivot Table MakerBuild pivot tables from CSV or Excel by drag and drop: sum, count, average, charts, export.SQL Query BuilderBuild SELECT queries visually: joins, filters, GROUP BY, ORDER BY and LIMIT, as clean SQL.Truth Table GeneratorType a logic expression and get its full truth table, minterms and canonical DNF/CNF.TypeScript PlaygroundWrite TypeScript with live type checking, see the compiled JavaScript and run it in your browser.Article Schema GeneratorCreate Article, BlogPosting or NewsArticle JSON-LD with headline, authors, dates and images.Event Schema GeneratorCreate Event JSON-LD with dates, venue or online location, tickets, organizer and performers.Google Search Query BuilderBuild advanced Google searches with site:, filetype:, intitle:, exact phrases and date operators.HowTo Schema GeneratorCreate HowTo JSON-LD with steps, tools, supplies, total time and cost, then copy it.Htaccess GeneratorBuild an Apache .htaccess file: HTTPS, www, gzip, caching, error pages, IP blocks, hotlinks.Organization Schema GeneratorCreate Organization JSON-LD with logo, URL, contact points, address and social profiles.PIN GeneratorGenerate random 4, 6 or 8-digit PINs that avoid sequences, repeats, dates and common PINs.Product Schema GeneratorBuild Product JSON-LD with price, availability, brand, GTIN, ratings and reviews.Question Keyword GeneratorFind the questions people ask about a topic, grouped by who, what, why, how, can and more.Recipe Schema GeneratorCreate Recipe JSON-LD with ingredients, steps, prep and cook times, nutrition and ratings.Security Headers GeneratorPick HSTS, CSP, frame, referrer and permissions options and get Apache, Nginx, Netlify or Cloudflare config.SKU GeneratorBuild consistent SKUs from brand, category, size and color, then export every variant as CSV.Typography Scale GeneratorBuild a modular type scale from a base size and ratio, then copy CSS variables or a Tailwind config.WordPress Salt GeneratorGenerate fresh WordPress security keys and salts for wp-config.php, .env or Docker in one click.ANSI Color Code GeneratorStyle terminal text with 16, 256 or RGB colors and get escape codes for bash, Python, JS and C.Apache Virtual Host GeneratorCreate an Apache VirtualHost config with SSL, redirects, reverse proxy or PHP-FPM in seconds.Bash Prompt GeneratorDrag and drop a custom PS1 prompt for bash or zsh with colors, git branch and a live preview.
    See all 85 Code Generators & Builders →