# webreflection/hyperhtml

**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/webreflection-hyperhtml).**

3,191 stars · 111 forks · HTML · isc

## Links

- GitHub: https://github.com/WebReflection/hyperHTML
- awesome-repositories: https://awesome-repositories.com/repository/webreflection-hyperhtml.md

## Topics

`alternative` `dom` `js` `lightweight` `manipulation` `performance` `template` `template-literals` `vanilla` `virtualdom`

## Description

hyperHTML is a DOM template library and data-binding engine that uses tagged template literals to render and update elements. It functions as a web component framework and a virtual DOM alternative, linking JavaScript data directly to specific HTML elements to enable automatic page updates.

The project avoids the overhead of a virtual DOM by using a reconciliation process that updates only the changed parts of the real DOM. It includes a build-time HTML template minifier to compress content within template literals and reduce client-side data transfer.

The library covers a broad range of capabilities, including client-side rendering, component state encapsulation, and custom element rendering. It provides utilities for managing DOM node observation, event dispatching, and boolean attribute toggling.

## Tags

### Development Tools & Productivity

- [Template Literal Renderers](https://awesome-repositories.com/f/development-tools-productivity/template-string-interpolation/dom-generation/template-literal-renderers.md) — Implements a DOM template library using tagged template literals as a lightweight virtual-DOM alternative.

### User Interface & Experience

- [Virtual DOM Alternatives](https://awesome-repositories.com/f/user-interface-experience/virtual-dom-alternatives.md) — Renders web pages by linking data directly to DOM elements to avoid virtual DOM overhead.
- [Dynamic State Templates](https://awesome-repositories.com/f/user-interface-experience/dashboard-layout-templates/dynamic-state-templates.md) — Generates and updates DOM structures on the fly using tagged templates synchronized with application state.
- [Tagged Template Literals](https://awesome-repositories.com/f/user-interface-experience/tagged-template-literals.md) — Uses native JavaScript tagged template literals to define and parse UI component structures.
- [Direct DOM Mapping](https://awesome-repositories.com/f/user-interface-experience/virtual-dom-engines/direct-dom-mapping.md) — Links JavaScript data variables directly to DOM nodes to bypass the overhead of virtual tree diffing.
- [Component State Managers](https://awesome-repositories.com/f/user-interface-experience/component-state-managers.md) — Provides mechanisms to synchronize internal component state with the UI to trigger partial re-renders.
- [Template Minification](https://awesome-repositories.com/f/user-interface-experience/html-markup-templates/template-minification.md) — Ships a build-time tool to compress HTML within template literals for reduced client-side payload. ([source](https://github.com/WebReflection/hyperHTML/blob/master/HELPERS.md))
- [Custom Element Renderers](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/server-side-rendering-engines/html-template-renderers/custom-element-renderers.md) — Enables the rendering and updating of browser-native custom elements and standard HTML tags. ([source](https://github.com/WebReflection/hyperHTML/blob/master/README.md))

### Graphics & Multimedia

- [Client Side Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/client-side-rendering.md) — Creates dynamic user interfaces in the browser that update automatically when JavaScript data changes.
- [DOM Reconciliation](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/surgical-dom-update-engines/dom-reconciliation.md) — Performs granular DOM updates by tracking the relationship between data and nodes without a virtual DOM.

### Software Engineering & Architecture

- [Direct-to-DOM Template Rendering](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-schema-mapping/component-mappings/direct-to-dom-template-rendering.md) — Generates and updates DOM elements directly from tagged templates to synchronize views without virtual DOM overhead. ([source](https://github.com/WebReflection/hyperHTML#readme))
- [Component-Based Encapsulations](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/scope-and-hierarchy-management/closure-based-state-encapsulations/component-based-encapsulations.md) — Encapsulates state and logic within component classes and triggers automatic re-renders upon state changes. ([source](https://github.com/WebReflection/hyperHTML/blob/master/index.d.ts))

### Web Development

- [Component-Based Web Frameworks](https://awesome-repositories.com/f/web-development/component-based-web-frameworks.md) — Provides a framework for building modular user interfaces using standard HTML tags and isolated component logic.
- [Data Binding Engines](https://awesome-repositories.com/f/web-development/data-binding-engines.md) — Provides a high-performance engine that synchronizes JavaScript data models with HTML elements for automatic UI updates.
- [DOM Element Data Binding](https://awesome-repositories.com/f/web-development/dom-element-data-binding.md) — Connects template values directly to DOM elements so data updates automatically refresh page sections. ([source](https://github.com/WebReflection/hyperHTML/blob/master/index.d.ts))
- [Template Data Binding](https://awesome-repositories.com/f/web-development/template-data-binding.md) — Links JavaScript data structures and DOM elements to template literals for efficient rendering. ([source](https://github.com/WebReflection/hyperHTML#readme))
- [Web Components](https://awesome-repositories.com/f/web-development/web-components.md) — Builds modular user interfaces by combining custom elements with efficient template rendering and state management.
- [DOM Node Reference Tracking](https://awesome-repositories.com/f/web-development/dom-node-reference-tracking.md) — Maintains a map of live DOM references to enable efficient, targeted updates of the page.
- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Reduces the amount of JS and HTML sent to the browser through template minification and polyfill removal.
- [Template Literal Minifiers](https://awesome-repositories.com/f/web-development/template-literal-minifiers.md) — Includes a build-time tool to compress HTML content within template literals and reduce client-side data transfer.

### Data & Databases

- [Multi-Node DOM Synchronization](https://awesome-repositories.com/f/data-databases/full-node-synchronization/differential-synchronization/multi-node-dom-synchronization.md) — Coordinates the synchronization and differential updating of several DOM nodes simultaneously. ([source](https://github.com/WebReflection/hyperHTML/blob/master/CHANGELOG.md))