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.
- 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
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.
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
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:
- https://unpkg.com/diffhtml/dist/diffhtml.js - full debug build
- https://unpkg.com/diffhtml/dist/diffhtml-lite.js - lite debug build
- https://unpkg.com/diffhtml/dist/diffhtml.min.js - compressed full build
- https://unpkg.com/diffhtml/dist/diffhtml-lite.min.js - compressed lite build
<script src="https://unpkg.com/diffhtml/dist/diffhtml.min.js"></script>
<!-- To explore the API -->
<script>console.log(window.diff);</script>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';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.
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.
A medium complexity application that displays a realtime clock using SVG and
requestAnimationFrame. Loads latest diffHTML core from this website
using native JavaScript modules.
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.
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.