ijk - Transforms arrays into virtual dom trees; a terse alternative to JSX and h

•    Javascript

---

This is a tiny recursive factory function that allows you to write terse, declarative representations of virtual DOM trees. It does not try mimic HTML or JSON syntax but instead a series of nested arrays to represent user interfaces. The above call to h returns a virtual DOM tree with named attributes that respect the provided schema. Expected output here, would be of the shape { x: 'main', y: {}, z: [...] }. A tree like this can be passed as a node to patch, diff and render algorithms exposed by libraries like Hyperapp, Ultradom or Preact.

hyperapp preact h hyperscript vdom dom html ultradom

hyperapp - 1 KB JavaScript library for building frontend applications.

•    Javascript

---

1 KB JavaScript library for building frontend applications.

hyperapp vdom dom elm jsx framework hyperx hyperscript javascript-framework mvc

gibon - (master is not the latest release/published version) :1st_place_medal: Functional client-side JavaScript router in ~570 bytes, built on HTML5 History API

•    Javascript

---

You might also be interested in mitt - a 200 bytes event emitter, and hyperapp - build rich UI apps with 1kb.

ui router modern minimal routing functional html5 vanilla dom history pushstate push minimalist virtual-dom virtual

HyperApp-Guide - HyperApp user's manual

•    CSS

---

HyperApp user's manual

hyperapp google-cloud-engine docker

virtual-dom - A Virtual DOM and diffing algorithm

•    Javascript

---

Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus. virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.

virtual dom vdom vtree diff patch browser

Algernon - Pure Go web server with built-in Lua, Markdown, HyperApp and Pongo2 support

•    Go

---

Web server with built-in support for HTTP/2, Lua, Markdown, Pongo2, HyperApp, Amber, Sass(SCSS), GCSS, JSX, BoltDB, Redis, PostgreSQL, MariaDB/MySQL, rate limiting, graceful shutdown, plugins, users and permissions. Uses no external libraries, only pure Go.

http2 scss pongo2 amber application-server redis boltdb mariadb postgresql gcss web-server

etch - Builds components using a simple and explicit API around virtual-dom

•    Javascript

---

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.Note that using an Etch component does not require a reference to the Etch library. Etch is an implementation detail, and from the outside the component is just an ordinary object with a simple interface and an .element property. You can also take a more declarative approach by embedding Etch components directly within other Etch components, which we'll cover later in this document.

virtual-dom components virtual-dom-dom-view-element-custom-elements-dom-diff-atom-electron

superfine - Minimal view layer for creating declarative web user interfaces

•    Javascript

---

Superfine is a minimal view layer for creating declarative web user interfaces. Mix it with your favorite state container or use it standalone for maximum flexibility. Don't want to set up a build environment? Download Superfine from unpkg (or jsdelivr) and it will be globally available through the window.superfine object. Works in ES5-friendly browsers >=IE9.

superfine virtual-dom vdom library frontend

PREACT - Fast 3kB alternative to React, with the same ES2015 API

•    Javascript

---

PREACT is a fast 3kB alternative to React, with the same ES2015 API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

front-end-framework react-alternative javascript-framework ui-framework user-interface virtual-dom

riot - Simple and elegant component-based UI library

•    Javascript

---

A React-like user interface micro-library

webcomponents minimal framework client-side view customtags lite elegant simple custom-tags custom-elements web-components virtual-dom shadow-dom polymer react jsx minimalist declarative templating template data-binding mvc model controller riotjs riot.js javascript-framework

bel - :dragon: A simple library for composable DOM elements using tagged template strings.

•    Javascript

---

A simple library for composable DOM elements using tagged template strings. If you're looking for a higher level front end framework, try yo-yo. Or even higher than that, try choo.

dom element frontend virtual-dom diffhtml

Mithril - A Javascript Framework for Building Brilliant Applications

•    Javascript

---

Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (8.18 KB gzipped), fast and provides routing and XHR utilities out of the box. It supports virtual dom, which is a Javascript data structure that describes a DOM tree. It consists of nested virtual DOM nodes, also known as vnodes.

front-end-framework react-alternative javascript-framework ui-framework user-interface virtual-dom

nerv - A blazing fast React alternative, compatible with IE8 and React 16.

•    Javascript

---

Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinier package size and better browser compatibility. 💫 Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.

nerv react preact inferno jsx virutal-dom vdom reactjs framework frontend nervjs typescript react-like

functional-frontend-architecture - A functional frontend framework.

•    Javascript

---

This repository is meant to document and explore the implementation of what is known as "the Elm architecture". A simple functional architecture for building frontend applications. The entire state is contained in a single data structure. Things can happen and the state should change accordingly. The number of things that can happen is described as a set of actions. Actions flow unidirectionally down the application. Actions are handled by pure update functions. Such a function takes an action and a state and returns a new state. The state is handed to a view function that returns a virtual DOM representation. A module is an encapsulated set of actions, an update function and a view function. Modules can be nested inside other modules and modules can contain other modules. This makes the architecture nestable and modular.

Inferno - An extremely fast, React-like JavaScript library for building modern user interfaces

•    Javascript

---

Inferno is an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client and server. Inferno aims to provide all the great benefits that React does, plus other great features for people already familiar with the React ecosystem, such as: lifecycle events on functional components, server side render streams, better real-world performance, lower memory consumption and faster parse/load times.

front-end-framework react-alternative javascript-framework ui-framework user-interface virtual-dom

purescript-pux - Build type-safe web apps with PureScript.

•    PureScript

---

Build type-safe web applications with PureScript. Pux has not focused on performance yet. The slow performance arises from translating Pux's (smolder) virtual DOM to React's virtual DOM. The goal is to write a purescript virtual DOM module for smolder, which would avoid that translation step and could be optimized for a monadic datastructure. I suspect this would achieve performance on par with Halogen.

purescript frp-library web-framework elm-architecture pux react elm flux redux frp virtual-dom

Render - Swift and UIKit a la React.

•    Swift

---

Render is a declarative library for building efficient UIs on iOS inspired by React. [The framework] lets us write our UIs as pure function of their states.

react uikit uiview elm-architecture unidirectional-data-flow layout-engine ios virtual-dom reconciliation internal-states

stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team

•    TypeScript

---

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.

webcomponents pwa progressive-web-app custom-elements typescript stencil stenciljs ionic web-components components webapp

asm-dom - A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)

•    C++

---

asm-dom is a minimal WebAssembly virtual DOM to build C++ SPA (Single page applications). You can write an entire SPA in C++ and compile it to WebAssembly (or asmjs as fallback) using Emscripten, asm-dom will call DOM APIs for you. This will produce an app that aims to execute at native speed by taking advantage of common hardware capabilities, also, you can use your C/C++ code without any change, you haven't to create a binding layer to use it (as we have to do if we want to use a C++ lib from JS). Basically we are creating an app in C++ that call javascript if needed instead of the opposite. You can write only once in C++ and share as much code as possible with desktop/mobile apps and web site. If you want to learn more about performance, please see this. asm-dom is a low-level virtual DOM library. It is unopinionated with regards to how you should structure your application.

virtual-dom dom rendering virtual-dom-library webassembly wasm asmjs diffing asm-dom vdom asm virtualdom

surgeon - Declarative DOM extraction expression evaluator. 👨‍⚕️

•    Javascript

---

Declarative DOM extraction expression evaluator. Powerful, succinct, composable, extendable, declarative API.

css-selector parser scraper subroutines css declarative dom selector