# sparkpost/heml

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/sparkpost-heml).**

4,302 stars · 158 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/SparkPost/heml
- Homepage: https://heml.io
- awesome-repositories: https://awesome-repositories.com/repository/sparkpost-heml.md

## Topics

`email` `framework` `markup-language` `responsive-email` `sparkpost` `team-fe`

## Description

Heml is a framework providing a custom markup language and compiler designed to generate responsive HTML and CSS for consistent rendering across email clients. It functions as a system for transforming specialized markup strings into deliverable email templates and associated metadata.

The project features a component system for defining reusable custom elements and style rules to standardize design patterns. It includes a responsive layout engine that converts flexible grid structures, columns, and rows into compatible fixed-width tables and fluid layouts.

The toolset covers email metadata management for subject lines and preview text, validation-aware rendering to capture structural errors, and a development environment with real-time file watching and browser previews.

## Tags

### User Interface & Experience

- [Email Markup Renderers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/text-rendering/markup-string-renderers/email-markup-renderers.md) — Provides a specialized markup language and renderer to generate responsive HTML and CSS for consistent email client rendering. ([source](http://heml.io/docs/getting-started/usage))
- [Custom Element Definitions](https://awesome-repositories.com/f/user-interface-experience/buttons/custom-html-elements/custom-component-tags/custom-element-definitions.md) — Implements a system for defining custom elements and tags to create a reusable library of email components.
- [Email Component Libraries](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/email-component-libraries.md) — Offers modular UI primitives optimized for the constraints of email-safe HTML and CSS.
- [Cross-Client Email Rendering](https://awesome-repositories.com/f/user-interface-experience/cross-client-email-rendering.md) — Ensures that custom markup generates HTML and CSS that render consistently across various email service providers. ([source](https://cdn.jsdelivr.net/gh/sparkpost/heml@master/README.md))
- [Email Design Systems](https://awesome-repositories.com/f/user-interface-experience/design-system-components/email-design-systems.md) — Provides a standardized collection of modular components to maintain visual consistency in email design.
- [Email Frameworks](https://awesome-repositories.com/f/user-interface-experience/email-frameworks.md) — Ships a framework for building flexible, responsive email layouts with grid structures that scale across different screen widths.
- [Column-Based Responsive Grids](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches/column-based-responsive-grids.md) — Converts flexible column and row definitions into fluid, email-compatible table layouts.
- [Responsive Layout Engines](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-engines.md) — Implements a layout engine that automatically adapts email grid structures to fit various screen sizes. ([source](https://heml.io/docs/getting-started/guide))
- [Email Template Previews](https://awesome-repositories.com/f/user-interface-experience/email-template-previews.md) — Provides local rendering of email templates for instant visual verification during development.
- [Inbox Preview Controls](https://awesome-repositories.com/f/user-interface-experience/inbox-preview-controls.md) — Controls how emails appear in inbox snippets by defining subject and preview text. ([source](https://heml.io/docs/getting-started/guide))
- [Email Style Frameworks](https://awesome-repositories.com/f/user-interface-experience/inline-styling-systems/email-style-frameworks.md) — Provides a system of CSS patterns for controlling colors and spacing across diverse email clients. ([source](https://heml.io/docs/getting-started/guide))

### Web Development

- [Markup Compilers](https://awesome-repositories.com/f/web-development/markup-compilers.md) — Transforms specialized custom markup strings into optimized, email-compatible HTML and CSS during the build process.
- [Email Templates](https://awesome-repositories.com/f/web-development/email-templates.md) — Generates responsive HTML email communications from a specialized markup-based system.
- [Email](https://awesome-repositories.com/f/web-development/markup-compilers/email.md) — Implements a compiler that transforms custom markup strings into validated, deliverable email HTML and metadata.
- [Responsive Email Design](https://awesome-repositories.com/f/web-development/responsive-email-design.md) — Facilitates the creation of HTML emails that adapt fluidly to different screen sizes and clients.

### Content Management & Publishing

- [Email Header Generation](https://awesome-repositories.com/f/content-management-publishing/plain-text-persistence/metadata-headers/email-header-generation.md) — Extracts metadata from markup to automatically generate email subject lines and preview snippets.

### Development Tools & Productivity

- [Real-time Generation Previews](https://awesome-repositories.com/f/development-tools-productivity/real-time-generation-previews.md) — Provides immediate visual feedback in the browser as email markup templates are edited. ([source](http://heml.io/docs/getting-started/usage))

### Testing & Quality Assurance

- [Markup Structural Validation](https://awesome-repositories.com/f/testing-quality-assurance/html-syntax-validations/markup-structural-validation.md) — Captures and reports syntax and structural errors while converting custom markup into final HTML.