Need help with diffhtml?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

tbranyen
789 Stars 47 Forks MIT License 827 Commits 2 Opened issues

Description

diffHTML is a web framework that helps you build applications and other interactive content

Services available

!
?

Need anything else?

Contributors list

# 7,191
React
libgit2
js
Electro...
721 commits
# 19,953
PHP
TypeScr...
React
reactjs
16 commits
# 132,690
Webpack
hot-rel...
React
ESLint
1 commit
# 387,596
HTML
CSS
qunit
virtual...
1 commit
# 172,669
HTML
Shell
text-ed...
riotjs
1 commit
# 4,448
React
JavaScr...
HTML
jQuery
1 commit
# 3,156
sass-fr...
splash
Socket....
pipelin...
1 commit
# 24,561
Rails
GraphQL
Crystal
wechat
1 commit
# 723,684
CSS
HTML
virtual...
1 commit
# 1,625
Atom
Markdow...
mariadb
Electro...
1 commit

<±/> diffHTML

Build Status Coverage
  Status

Latest version: 1.0.0-beta.18

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.

The core works like a library, where you can import just one function and have a fully reactive VDOM rendering engine. When you opt into more functions and use the companion packages you get a framework for structuring your ideas.

Features

  • 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.
  • A lite build which has a smaller size, meant for optimizing production code.

Packages

The following list of modules are nested in the

/packages
folder. They form the foundation of the diffHTML ecosystem.
  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.

  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.

  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.

  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.

  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.

  npm install diffhtml-middleware-logger

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

  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.
  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.

  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.

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.

The source for the www.diffhtml.org website.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.