Implementation confidence centre

Use the archive without guessing.

Source-to-handoff guidance for turning Template Hedgehog from downloaded files into a reviewable production email package.

Source to handoff

01

Source

Start from editable MJML and workflow intent.

02

Compile

Create production HTML or use the included compiled output.

03

Preview

Inspect the rendered artefact before it leaves the archive.

04

QA

Check links, images, mobile behaviour, tokens, and legal copy.

05

Handoff

Move the package into the sending platform with boundaries clear.

Implementation pathway

What to do first after purchase.

The archive is useful when the route from source to handoff is obvious. Start with the workflow, keep source and output together, and run QA before the ESP takes over.

  1. 01

    Download archive

    Keep source, compiled output, previews, QA notes, and guidance together.

  2. 02

    Choose workflow

    Start from the closest lifecycle, transactional, newsletter, or campaign package.

  3. 03

    Inspect MJML

    Review the editable source and component stack before changing structure.

  4. 04

    Compile or use HTML

    Compile from source, or use the provided compiled HTML for platform upload.

  5. 05

    Review preview

    Check the rendered layout so visual changes are caught before handoff.

  6. 06

    Complete QA

    Review links, images, mobile stacking, footer/legal copy, and merge fields.

  7. 07

    Handoff into platform

    Move the artefact into Mailchimp, HubSpot, Salesforce, NetSuite, Klaviyo, Customer.io, or your ESP.

What these guides cover

Organised by buyer problem.

The details remain technical, but the entry points follow the questions that block a team from using the archive in production.

Getting started

What to open first after purchase and how to pick the closest workflow.

Working with MJML

How to treat source as the editable truth and keep changes maintainable.

Using compiled HTML

When to use delivery-ready output for QA, approval, or platform import.

QA and rendering checks

Outlook caveats, mobile stacking, image handling, and client pitfalls.

Platform handoff

How to separate Template Hedgehog artefacts from ESP responsibilities.

Compatibility

How Mailchimp, HubSpot, Salesforce, NetSuite, Klaviyo, and Customer.io fit into the handoff.

Licence and updates

Where product usage, reuse rights, and update expectations fit.

Troubleshooting

How to identify common implementation issues before send.

Platform boundary

The archive prepares the artefact. The platform sends it.

Use these docs to prepare source, output, preview, QA, and handoff. Do not treat Template Hedgehog as a sending or automation platform.

Template Hedgehog handles

  • MJML source
  • Workflow guidance
  • QA guidance
  • Compiled HTML
  • Preview and handoff package

Sending platforms handle

  • Audiences and segments
  • Automation
  • Unsubscribe
  • Consent and GDPR workflow
  • Reporting and delivery

Examples: Mailchimp, HubSpot, Salesforce, NetSuite, Klaviyo, Customer.io, or your ESP.

Template Hedgehog Studio

Future workspace direction for everything before send.

Template Hedgehog Studio is the future workspace concept for choosing workflows, editing content, compiling, previewing, QA, preparing handoff, and exporting ZIPs without adding accounts, cloud storage, integrations, or sending. It is not live product UI. The paid archive is complete without Studio and remains yours either way.

Join Studio waitlist

Studio helps you

  • Choose workflow
  • Edit content
  • Compile MJML
  • Preview output
  • Complete QA
  • Prepare handoff
  • Export ZIP

Studio does not replace your ESP

Studio does not send emails, manage audiences, manage consent, handle unsubscribe, run automation, provide reporting, or connect to platform APIs. Mailchimp, HubSpot, Salesforce, NetSuite, Klaviyo, Customer.io, or your ESP handles that work.

Archive model

Template Hedgehog is an implementation system for production email. Layout pages show complete workflow packages, and component pages let you inspect single blocks when one section needs source-level changes.

If you are evaluating before purchase, start with the public sample pack. It shows one complete workflow sample with MJML source, compiled HTML, QA notes, testing notes, implementation guidance, workflow context, and licence reference.

Template Hedgehog Studio is the future workspace direction. It is intended to help with everything before send, but it does not replace the ESP that manages audiences, consent, unsubscribe, automation, delivery, and reporting.

The intended editing model is straightforward: treat MJML as the source of truth, compile to HTML when your ESP or review process needs final markup, and keep screenshots or previews as validation rather than the editable asset.

Recommended working path

A safe working pattern for most teams looks like this:

  1. Start from the closest workflow or layout package, then move to component detail when needed.
  2. Edit the MJML source rather than patching compiled HTML by hand.
  3. Compile to HTML and test the result in your delivery workflow.
  4. Run quick visual checks in Gmail, Outlook, and Apple Mail before final send.

Use the compiled HTML panels when you need a delivery-ready snapshot for QA, approval, or an ESP that only accepts raw HTML. If you expect the block to be reused, keep your real changes in the MJML source instead.

Block source and full files

Component pages expose block-level source and complete files when the sources differ. Use block source when you are stacking multiple sections inside one existing mj-body. Use the full file when you need a complete MJML document that can compile on its own.

  • Block MJML is source for composing several sections into the same email.
  • Complete MJML includes the wrapper, shared classes, and document structure required for independent compilation.
  • Block HTML is useful for inspection and controlled assembly, but most platform handoff should use complete compiled HTML.
  • Complete compiled HTML is the delivery-ready output for QA, import, and final review.

Outlook rendering caveats

Desktop Outlook is still the main reason email markup becomes brittle. MJML helps, but it does not make Outlook behave like a modern browser.

  • Keep complex nesting conservative. Deeply layered sections, unusual overlaps, and fancy spacing are more likely to break.
  • Test button padding and border radius in Outlook desktop. Small visual differences are common even when the block is valid.
  • Avoid relying on background-image tricks for essential content or CTA clarity.
  • Expect typography to render slightly heavier or looser than in Gmail and Apple Mail.
  • When in doubt, prefer simpler table-safe structure over a more ambitious visual treatment.

Safe MJML customisation patterns

The safest customisation approach is to change tokens and content first, then structure only when required.

  • Replace copy, links, imagery, and brand colours before altering block structure.
  • Keep CTA labels short so buttons still read cleanly on narrow mobile clients.
  • When swapping imagery, preserve the overall aspect ratio where possible to avoid uneven spacing.
  • Reuse spacing values consistently instead of introducing one-off padding tweaks across multiple sections.
  • If you need a recurring variant, duplicate the MJML block in your own codebase rather than repeatedly editing compiled HTML.

A good default is to maintain your own small token map for colours, spacing, and button styles, then interpolate those values into the MJML before compilation.

Image hosting best practices

Email clients fetch images remotely, so image delivery matters as much as markup quality.

  • Host production images on a stable HTTPS domain or CDN you control.
  • Do not rely on temporary design-tool URLs or expiring preview links.
  • Use meaningful alt text for content images and empty alt text only for decorative ones.
  • Optimise file sizes before send. Heavy images slow down preview loading and can affect clipping in some clients.
  • Keep critical message copy out of images so dark mode, blocking, or accessibility settings do not hide it.

When to use layouts vs components

Components are best when you are assembling or updating one block at a time. Layouts are best when you need a starting architecture for a complete send.

  • Start with a component page when the job is small, such as swapping a hero, footer, CTA, or transactional panel.
  • Start with a layout page when the whole email structure matters, including content order and message pacing.
  • Use the component breakdown on layout pages to identify which blocks should become your editable source modules.
  • Once a layout is close, refine its individual sections through the related component pages rather than editing blindly.

Platform handoff guidance

Some teams hand compiled HTML straight to an ESP. Others move through review, QA, or CRM tooling first. The important thing is to separate editable source from delivery output.

  • Use MJML in version control if developers or marketers will iterate on the email again.
  • Use compiled HTML for final import, QA snapshots, or platforms that do not understand MJML.
  • Keep a record of the component or layout slug used so future edits start from the right source block.
  • After importing into a platform, verify that tracking links, merge tags, and unsubscribe logic did not alter structure unexpectedly.
  • Keep audience selection, consent, automation, unsubscribe, reporting, and delivery inside the sending platform.

Compatibility by platform

Template Hedgehog is compatible with these platforms as a source-to-handoff system. Compatibility means the archive prepares MJML source, compiled HTML, previews, QA notes, and handoff guidance before import. It does not mean one-click sync, native account integration, campaign setup, sending, automation, audience management, unsubscribe handling, or reporting.

Mailchimp

Prepare reviewed compiled HTML before import. Mailchimp still handles lists, audience segments, automations, sending, unsubscribe, and reporting.

HubSpot

Use Template Hedgehog as source, preview, QA, and compiled-output preparation before HubSpot email production. HubSpot still owns CRM data, workflows, sending, and reporting.

Salesforce

Hand over MJML source, compiled HTML, and QA notes for use in Salesforce email tooling. Salesforce still owns journeys, audience data, consent, delivery, and reporting.

NetSuite

Prepare valid HTML structure for NetSuite marketing campaign use. Customers remain responsible for upload, campaign configuration, lists, sending, and reporting unless separately agreed.

Klaviyo

Prepare production HTML and handoff notes before Klaviyo import. Klaviyo still owns segments, flows, consent, unsubscribe, delivery, and reporting.

Customer.io

Prepare the email artefact and handoff notes before Customer.io implementation. Customer.io still owns journeys, profiles, data, delivery, and reporting.

Common email client pitfalls

Even solid MJML can be undermined by delivery context. These are the common issues worth checking before send.

  • Long CTA labels that wrap awkwardly on mobile.
  • Logo or hero images that are too small to survive high-density displays cleanly.
  • Dark-mode inversions that reduce contrast on muted text or secondary links.
  • Padding values that look balanced in webmail but become too tight in Outlook desktop.
  • Edited compiled HTML drifting away from the MJML source, making the next revision harder than it should be.

If you hit one of these issues often, favour the simpler variant in the layout reference. Reliability is usually worth more than a slightly more decorative layout treatment.