van-dom

🚐💨 VanJS: A Grab 'n Go React-styled UI Framework without React/JSX under 1kB

VanJS (abbr. Vanilla JavaScript) is an ultra-lightweight, zero-dependency and unopinionated React-like UI library based on pure vanilla JavaScript and DOM. Programming with VanJS feels a lot like React, check-out the Hello World code below:

      // Reusable components can be just pure vanilla JavaScript functions.
      // Here we capitalize the first letter to follow React conventions.
      const Hello = () => div(
        p("👋Hello"),
        ul(
          li("🗺️World"),
          li(a({href: "https://github.com/alexander-xin/van/"}, "🚐💨VanJS")),
        ),
      )

      van.add(document.body, Hello())

VanJS helps you manage state and UI binding as well, just like React:

      const Counter = () => {
        const [counter, setCounter] = state(0)
        return div(
          bind(counter, c => div(`Counter: ${c}`)),
          button({onclick: () => setCounter(counter.val + 1)}, "Increment"),
          button({onclick: () => setCounter(counter.val - 1)}, "Decrement"),
        )
      }

      add(document.body, Counter())

Ultra-Lightweight

VanJS is a Grab 'n Go JavaScript library, there are no 3rd-party dependencies, no transpiling, no IDE setups. Instead, it helps you focus on the business logic. VanJS enables you to code anywhere, anytime, on any device. (Yes, you can even code with VanJS on your smartphones! 👏👏👏)

Under the hood, VanJS is a very thin layer on top of Vanilla JavaScript and DOM, barely enough to make the DOM manipulation and state binding as ergonomic as (if not more than) React, and delegate most of work to standard browser APIs (which is implemented in native code). As a result, the bundled size of VanJS is under 1kB, which is 100+X times smaller than most popular UI frameworks, here is the size comparison chart:

Getting Started

To get started, paste the line below and you're good to go:

import * as van from "https://alexander-xin.github.io/vanjs/van-0.7.1.min.js"

To code without ES6 modules, you can checkout the bundled version:

<script type="text/javascript" src="https://alexander-xin.github.io/vanjs/van-0.7.1.nomodule.min.js"></script>

Insert the code snippet below and you will get a funnier Hello page (src):

      Object.assign(window, tags("button", "div", "pre"))

      const sleep = millisec => new Promise(resolve => setTimeout(resolve, millisec))

      const Hello = ({sleepInterval}) => {
        const [headingSpaces, setHeadingSpaces] = state(100)
        const [trailingUnderscores, setTrailingUnderscores] = state(0)
        
        const animate = async () => {
          while (headingSpaces.val > 0) {
            await sleep(sleepInterval)
            setHeadingSpaces(headingSpaces.val - 1)
            setTrailingUnderscores(trailingUnderscores.val + 1)
          }
        }
        animate()

        return bind([headingSpaces, trailingUnderscores],
          (headingSpaces, trailingUnderscores) =>
            div(pre(`${" ".repeat(headingSpaces)}🚐💨Hello Van!${"_".repeat(trailingUnderscores)}`))
        )
      }

      const containerDom = div({id: "helloContainer"})
      add(document.body,
        containerDom,
        button({onclick: () => add(containerDom, Hello({sleepInterval: 2000}))}, "Hello 🐌"),
        button({onclick: () => add(containerDom, Hello({sleepInterval: 500}))}, "Hello 🐢"),
        button({onclick: () => add(containerDom, Hello({sleepInterval: 100}))}, "Hello 🚶‍♂️"),
        button({onclick: () => add(containerDom, Hello({sleepInterval: 10}))}, "Hello 🏎️"),
        button({onclick: () => add(containerDom, Hello({sleepInterval: 2}))}, "Hello 🚀"),
      )

If you want to get the most up-to-date version, and don't mind being occassionally broken, you can always import the latest release:

import * as van from "https://alexander-xin.github.io/vanjs/van-latest.min.js"

and the nomodule version:

<script type="text/javascript" src="https://alexander-xin.github.io/vanjs/van-latest.nomodule.min.js"></script>

This folder has all historical archieves, including the pre-minified versions that can be used for debugging.

Want to Learn More?

To find more apps built with VanJS, check out our Code Gallery page.

We have an online HTML to VanJS converter to help you convert HTML snippet into valid VanJS Code.

VanJS puts heavy emphasis on the simplicity of the framework. There are only 4 exported functions in the API and feels a lot like React. Because of that, the walkthrough tutorial is the same as the full API referrence, and can be learned within 1 hour for most developers.