The easy-to-use Virtual DOM, built for the web!

Welcome to diffHTML! A library created for engineers, creatives, and pretty much anyone interested in building interactive web applications. Lightweight and easy-to-use, it is authored in standards-compliant ES6 JavaScript.

You would use it in the same way as other web frameworks such as: React, Vue, and Svelte. You may want to look at these first, as they are backed by corporations and/or large communities.

Core features

Installing & importing

The source code is authored in valid ES6 and can be run without a transpiler in JavaScript runtimes that support the latest specification. The minified version can be run in an ES5 environment as it runs through a separate build step to make it compatible with UglifyJS.

You can access any of the diffHTML source code from the following servers. The "official" diffhtml.org is on a Linode and is only suitable for hobby projects DO NOT RELY on it in production.

Latest full version minified endpoints

Using this method will bring in the global minified UMD file. This includes the parser so it will be larger than the runtime build weighing at around 7.8kb min+gzip. Access the API through the window.diff global.

Latest runtime version minified endpoints

If you use the Babel transform, you will be able to use the runtime build instead. This converts html tagged template calls into createTree calls, which take in the Babel converted trees. This greatly reduces the bundle sizes. The base bundle size here is just 6kb min+gzip!

Installing into node_modules

JavaScript package management uses this folder and there are two many different clients that can install into. Two recommended ones are shown below:

This will create the following structure:

├── dist
│   ├── cjs # where all the CommonJS files are
│   ├── diffhtml.js
│   ├── diffhtml.min.js
│   ├── diffhtml-runtime.js
│   ├── diffhtml-runtime.min.js
│   └── es # where all the ESM files are
├── lib
├── package.json
└── README.md

Script tag

Use this tag in HTML to load diffHTML globally.

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

  const { innerHTML } = window.diff;

Loading just the runtime:

<script src="https://unpkg.com/diffhtml/dist/diffhtml-runtime.min.js"></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';

To load just the runtime:

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

While diffhtml is the core package to install, there are many other modules you may also want to install depending on your use cases. All of them are available at the same CDN endpoints.

Optimizing with Babel

While diffHTML is relatively small

Once you have a working project, you may want to take your code to the next level and squeeze out even more performance. With the Babel transform, you can write very clean and readable code, and then compile down to something much more efficient. For instance, the plugin will automatically hoist static VTrees, parse your HTML and build createTree calls avoiding the need for runtime parsing, and output produced is directly compatible with the diffHTML/runtime build (which removes the HTML parser code).

npm install -D babel-plugin-transform-diffhtml

Writing middleware

Edit on GitHub