diffHTML

v1.0.0-beta.13

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


Welcome to diffHTML! A library that assists with creating user interfaces using JavaScript. These interfaces can be: applications, games, data visualizations, or anything else that you may want to render in a web browser.


Hello world!

import { innerHTML } from '//diffhtml.org/es';

innerHTML(document.body, `
  <h1>Hello world!</h1>
`);


Core features


Getting the source

Package manager

Script tag

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


Optimizing builds

The Babel plugin is useful after you have a working project and wish to optimize it at build time. The Babel plugin will perform numerous optimizations to your code depending on how it is written and structured. For instance, anytime you have an element that does not change, the call will be hoisted and reused instead of recreated every time. Any html tagged template calls will be converted to createTree calls.

After your code has been passed through this plugin, you will be able to fully utilize the runtime build!

To use, install into your project as a dev dependency.

npm install -D babel-plugin-transform-diffhtml

Specify the plugin in the Babel configuration, usually a .babelrc or babel.config.js file:

{
  "plugins": ["babel-plugin-transform-diffhtml"]
}

Take this code as an example input:

const { innerHTML, html } = require('diffhtml');

function render() {
  innerHTML(document.body, html`
    <div>Hello world</div>
  `);
}

Without this Babel transformation process, this HTML would need to be parsed every time render() is called. If you use the runtime build and the parser, this will become a cached call. html is the same thing as createTree in the runtime build. So there is no HTML parsing happening.

const { innerHTML, html } = require('diffhtml/dist/cjs/runtime');

function render() {
  innerHTML(document.body, html('div', {}, [html('#text', null, 'Hello world')]));
}

Refer to the configuration documentation.


Edit on GitHub