# developit/htm

**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/developit-htm).**

9,001 stars · 178 forks · JavaScript · apache-2.0

## Links

- GitHub: https://github.com/developit/htm
- awesome-repositories: https://awesome-repositories.com/repository/developit-htm.md

## Topics

`babel` `babel-plugin` `jsx` `tagged-template` `virtual-dom`

## Description

htm is a build-less markup engine and JavaScript template parser that transforms template literals into element creation calls or structured objects during runtime. It serves as a hyperscript HTML template library and a utility for generating markup compatible with virtual DOM libraries.

The library allows for the creation of HTML-style markup using standard JavaScript tagged template literals, removing the requirement for an external transpiler or build-step compiler. It distinguishes itself by mapping template strings to custom functions that transform types and properties into specialized object trees.

The system includes capabilities for memoized template parsing and object-tree caching to reduce memory allocation and improve rendering speed. It supports binding to hyperscript functions to generate specific output formats based on the parsed markup.

## Tags

### User Interface & Experience

- [Virtual DOM Utilities](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/virtual-dom-utilities.md) — Provides utilities to generate virtual node representations from template literals for use with virtual DOM libraries.
- [Tagged Template Literals](https://awesome-repositories.com/f/user-interface-experience/tagged-template-literals.md) — Uses tagged template literals to create HTML-style markup without requiring a build step. ([source](https://github.com/developit/htm/blob/master/README.md))
- [HTML Markup Templates](https://awesome-repositories.com/f/user-interface-experience/html-markup-templates.md) — Enables writing HTML-like markup directly within JavaScript files for better readability.
- [High-Performance Rendering](https://awesome-repositories.com/f/user-interface-experience/high-performance-rendering.md) — Optimizes rendering speed and memory usage by caching parsed template results and reusing elements.

### Development Tools & Productivity

- [Literal Parsers](https://awesome-repositories.com/f/development-tools-productivity/template-extensions/template-functions/template-compilation/literal-parsers.md) — Parses JavaScript template strings and maps them to functions that generate structured object trees.
- [Hyperscript Bindings](https://awesome-repositories.com/f/development-tools-productivity/template-extensions/hyperscript-bindings.md) — Connects custom hyperscript functions to the template parser to generate specific output formats. ([source](https://github.com/developit/htm/blob/master/README.md))
- [Template Compilation](https://awesome-repositories.com/f/development-tools-productivity/template-extensions/template-functions/template-compilation.md) — Maps template strings to transformation functions that convert markup into specialized object trees.

### Web Development

- [Build-less Markup Engines](https://awesome-repositories.com/f/web-development/build-less-markup-engines.md) — Acts as a build-less engine that transforms template literals into element creation calls during runtime.
- [Build-less Template Engines](https://awesome-repositories.com/f/web-development/build-less-template-engines.md) — Provides a way to evaluate HTML-style templates at runtime without needing an external transpiler or compiler.
- [HTML Templating Engines](https://awesome-repositories.com/f/web-development/html-templating-engines.md) — Provides a library for creating HTML-style markup via tagged templates that functions as an HTML templating engine.
- [Hyperscript Document Construction](https://awesome-repositories.com/f/web-development/hyperscript-document-construction.md) — Transforms parsed markup into element creation calls using a provided hyperscript function.
- [Element Tree Caching](https://awesome-repositories.com/f/web-development/content-caching-accelerators/object-caches/element-tree-caching.md) — Reuses previously created elements across the render tree to minimize memory allocation and improve execution speed.
- [Custom Template Tags](https://awesome-repositories.com/f/web-development/custom-template-tags.md) — Allows mapping specific template strings to custom transformation functions to extend markup capabilities.

### Part of an Awesome List

- [Memoized Parsing](https://awesome-repositories.com/f/awesome-lists/devtools/templating-and-views/runtime-template-parsing/memoized-parsing.md) — Stores the results of parsed template strings to avoid redundant processing during subsequent renders.
- [Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/component-libraries.md) — Provides a JSX-like syntax using standard tagged templates.

### Data & Databases

- [Template Caches](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/caching-performance/caching/template-caches.md) — Implements a system for storing parsed templates in memory to reduce object creation and increase speed. ([source](https://github.com/developit/htm#readme))