≡

diffHTML

v1.0.0-beta.29

An easy-to-use Virtual DOM built for the web!

Welcome to diffHTML, a lightweight library for creating fast and reactive user interfaces using JavaScript and HTML. With this tool you can create applications, games, data visualizations, and much more! It is designed to be approachable to new programmers, intermediates, and professionals.

Core features

  • No build step required to prototype
  • ESM/CJS/UMD + Minified ES5 builds
  • Middleware
  • Efficient Virtual DOM
  • Object pooling and custom HTML parser to optimize GC
  • Strict mode TypeScript via checkJS

Getting started

Depending on your project, preference, or both, you'll need to include diffHTML somehow in your code. Examples of linking using three different popular methods are available below.

Package manager

This method uses a CLI tool such as npm or yarn to download and install the package files directly in your Node-based project. This is useful for server- side applications and tools like webpack, browserify, and rollup.

  • npm install --save diffhtml

  • yarn add diffhtml

Script tag

A script tag is useful for snippets, small projects, and possibly larger projects that want to have runtime control over the asset. You simply point a script tag to one of the files:

<script src="https://unpkg.com/diffhtml/dist/diffhtml.min.js"></script>

<!-- To explore the API -->
<script>console.log(window.diff);</script>

ES modules

You can import diffHTML directly over HTTP using the ES modules syntax. This is a new feature that isn't available in all browsers yet, but you can use them safely in nearly all modern browsers .

import { innerHTML } from 'https://unpkg.com/diffhtml?module';
// or
import { innerHTML } from 'https://diffhtml.org/es';

Examples

The following examples are presented using Glitch . Click the View Source button under each example to view the source code. Each project has a different set of requirements and complexity level. Click Remix To Edit to fork the example and mess with the code.

Hello World

A simple application that renders 'Hello world!' in a <div> from string markup input. Demonstrates how quickly one can start prototyping. Loads latest diffHTML core from this website using native JavaScript modules.

Clock

A medium complexity application that displays a realtime clock using SVG and requestAnimationFrame. Loads latest diffHTML core from this website using native JavaScript modules.

Hacker News

A more complex application that displays Hacker News. Allows reading latest posts and comments. Installable as a PWA. Click the fullscreen icon next to View Source to get the install prompt. Loads latest diffHTML core and plugins from this website using native JavaScript modules.

TodoMVC

This application can serve as a reference for those looking into a more advanced build setup. Rollup bundles the source and executes babel-transform which transforms all UI markup into JavaScript at build time. Replaces the core build with the lite version to reduce build size. Zopfli is used to pre-gzip the markup bringing the production output size to ~14kb. Loads diffHTML and plugins from npm pinned to 1.0.0-beta.20. It may be periodically updated.

Edit on GitHub