VanJS: Getting Started

To get started, add the line below to your script:

import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.1.min.js"

To code without ES6 modules, add the following line to your HTML file instead:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.1.nomodule.min.js"></script>

Alternative, you can download the files (van-1.2.1.min.js, van-1.2.1.nomodule.min.js) and serve them locally.

NPM Integration

It's also possible to integrate with VanJS via NPM, making it handy to build web applications with tools like Vite or Parcel. You can also build your own NPM packages that depend on VanJS. To get started with VanJS via NPM, run:

npm install vanjs-core

To use the VanJS NPM package, add this line to your script:

import van from "vanjs-core"

or this line if you want to import the debug version of VanJS:

import van from "vanjs-core/debug"

You can check out the Hello World app built with VanJS NPM + Vite (source code).

Test It Out

The following code will produce a funnier Hello component:

const {button, div, pre} = van.tags

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

const Run = ({sleepMs}) => {
  const headingSpaces = van.state(40), trailingUnderscores = van.state(0)

  const animate = async () => {
    while (headingSpaces.val > 0) {
      await sleep(sleepMs)
      --headingSpaces.val, ++trailingUnderscores.val
    }
  }
  animate()

  return pre(() =>
    `${" ".repeat(headingSpaces.val)}🚐💨Hello VanJS!${"_".repeat(trailingUnderscores.val)}`)
}

const Hello = () => {
  const dom = div()
  return div(
    dom,
    button({onclick: () => van.add(dom, Run({sleepMs: 2000}))}, "Hello 🐌"),
    button({onclick: () => van.add(dom, Run({sleepMs: 500}))}, "Hello 🐢"),
    button({onclick: () => van.add(dom, Run({sleepMs: 100}))}, "Hello 🚶‍♂️"),
    button({onclick: () => van.add(dom, Run({sleepMs: 10}))}, "Hello 🏎️"),
    button({onclick: () => van.add(dom, Run({sleepMs: 2}))}, "Hello 🚀"),
  )
}

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

Demo:

Try on jsfiddle

Download Table