Skip to content
diffHTML is a web framework that helps you build applications and other interactive content
JavaScript CSS Other
Branch: master
Clone or download

<±/> diffHTML

Build Status Coverage Status

Latest version: 1.0.0-beta.17

At its core, diffHTML is an extremely lightweight and optimized HTML parser and Virtual DOM specifically designed for modern web UIs. These interfaces can be applications, games, data visualizations, or anything else that you may want to render in a web browser or Node.


  • Parses real HTML and supports JSX & Tagged Templates.
  • Memory efficient VDOM rendering that utilizes object pooling.
  • Transitions for animations and hooking into DOM changes.
  • Powerful middleware extends diffHTML with additional features.
  • Web and React-compatible stateful components.
  • View and debug your code using the Chrome DevTools extension.


The following list of modules are nested in the /packages folder. They make up the foundation of the diffHTML ecosystem.

  • diffhtml

    npm install diffhtml

    The core public API for creating user interfaces. Contains a standard build which includes everything, and a smaller optimized build that excludes the HTML parser and performance metrics, which is useful for those who want to minimize the filesize.

  • diffhtml-components

    npm install diffhtml-components

    Provides constructors and middleware to rendering stateful/stateless components seamlessly with diffHTML. The API will be very familiar to anyone who has used React as the class methods and structure is the same. While the APIs are very similar, if you want true React compatibility, check out the diffhtml-react-compat package.

  • diffhtml-render-to-string

    npm install diffhtml-render-to-string

    Use to render your input to string. This is useful for server-side rendering, testing, and HTML/XML transformations.

  • babel-plugin-transform-diffhtml

    npm install babel-plugin-transform-diffhtml

    Transforms your input into function calls. This eliminates the need for runtime parsing. This is similar to how React compiles down JSX.

  • diffhtml-middleware-inline-transitions

    npm install diffhtml-middleware-inline-transitions

    By default diffHTML provides transition hooks at a global level. This middleware turns them into scoped, performant, event hooks.

  • diffhtml-middleware-linter

    npm install diffhtml-middleware-linter

    This module will run various linting rules on your input to ensure you are writing valid/well-formed HTML. This was inspired by and uses rules from the HTMLHint project.

  • diffhtml-middleware-logger

    npm install diffhtml-middleware-logger

    Logs out diffHTML state from the start and end of every render transaction.

  • diffhtml-middleware-synthetic-events

    npm install diffhtml-middleware-synthetic-events

    Changes the event binding from inline event handlers like onclick = fn to use addEventListener. Events are attached to the body element and coordinated to children through delegation.

  • diffhtml-middleware-verify-state

    npm install diffhtml-middleware-verify-state

    Asserts that a render properly updated the old Virtual Tree and the DOM. Will recursively search for inconsistencies, displays warnings unless debugging is enabled, then it throws errors instead.

  • diffhtml-middleware-service-worker

    npm install diffhtml-middleware-service-worker

    Helps with the creation of a service worker for PWAs, available as a convenience to make development more friendlier.

  • diffhtml-react-compat

    npm install diffhtml-react-compat

    Highly Experimental: This is a compatibility package meant to be a drop-in replacement for the modules: react and react-dom. It wraps the diffHTML Components package as the base for the component constructors. It then layers additional React-specific APIs.

  • diffhtml-static-sync

    npm install diffhtml-static-sync

    Highly Experimental: A work-in-progress static HTML server that automatically reloads your markup as you save using Web Sockets.

  • diffhtml-devtools

    Chrome Extension providing DevTools for inspecting and learning more about your running diffHTML code. Currently logs information about transactions, allows toggling active middleware, and displays some memory internals.

  • diffhtml-website

    The source for the website.

You can’t perform that action at this time.