VanJS is an ultra-lightweight, zero-dependency and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels like building React apps in a scripting language, without JSX. 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://vanjs.org/"}, "🍦VanJS")),
  ),
)

van.add(document.body, Hello())
// Alternatively, you can write:
// document.body.appendChild(Hello())

Try on jsfiddle

You can convert any HTML snippet into VanJS code with our online converter.

VanJS helps you manage states and UI bindings as well, with a more natural API:

const Counter = () => {
  const counter = van.state(0)
  return div(
    "❤️ ", counter, " ",
    button({onclick: () => ++counter.val}, "👍"),
    button({onclick: () => --counter.val}, "👎"),
  )
}

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

Try on jsfiddle

Why VanJS?

Reactive Programming without React/JSX

Declarative DOM tree composition, reusable components, reactive state binding - VanJS offers every good aspect that React does, but without the need of React, JSX, transpiling, virtual DOM, or any hidden logic. Everything is built with simple JavaScript functions and DOM.

Grab 'n Go

No installation, no configuration, no dependencies, no transpiling, no IDE setups. Adding a line to your script or HTML file is all you need to start coding. VanJS allows you to focus on the business logic of your application, rather than getting bogged down in frameworks and tools.

Ultra-Lightweight

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 it delegates most of work to standard browser APIs implemented in native code. As a result, the bundled size of VanJS is just 1.3kB (0.8kB gzipped), which is 50~100 times smaller than most popular UI frameworks, making it the smallest reactive UI framework in the world:

Size comparison

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

-- Antoine de Saint-Exupéry, Airman's Odyssey

TypeScript Support

VanJS provides first-class support for TypeScript. Simply download the corresponding .d.ts file along with your .js file, and you'll be able to take advantage of type-checking, IntelliSense, large-scale refactoring provided by your preferred development environment. Refer to the Download Table to find the right .d.ts file to work with.

Easy to Learn

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

Want to Learn More?

Download and Get Started
Learn from the Tutorial
Learn by Examples (and also Community Examples)
Convert HTML snippet to VanJS code with our online HTML to VanJS Converter
Want server-side rendering? Check out Mini-Van (the entire vanjs.org site is built on top of Mini-Van)
For questions, feedback or general discussions, visit our Discussions page
How did VanJS get its name?

Support & Feedback

🙏 VanJS aims to build a better world by reducing the entry barrier for UI programming, with no intention or plan on commercialization whatsoever. If you find VanJS interesting, or could be useful for you some day, please consider starring the project. It takes just a few seconds but your support means the world to us and helps spread VanJS to a wider audience.

We're looking for the 1.0 milestone (commitment to API stability) soon, your precious feedback will be greatly appreciated. You can submit your feedback in our Discussions page.

Community Add-ons

VanJS can be extended via add-ons. Add-ons add more features to VanJS and/or provide an alternative styled API. Below is a curated list of add-ons built by VanJS community:

van_dml.js adds a a new flavour of composition to VanJS. Author: Eckehard.

Contributors (10)

Some authors can't be recognized by Github as contributors for weird reasons (e.g.: 1, 2). Their names are shown here. Authors are ordered chronologically by first contribution:

Keywords

FAQs

What is test-vanjs?

Is test-vanjs well maintained?

Package last updated on 26 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install