VanJS: Getting Started

Truth is ever to be found in the simplicity, and not in the multiplicity and confusion of things.

-- Isaac Newton

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

import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.2.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.5.2.nomodule.min.js"></script>

Alternative, you can download the files (van-1.5.2.min.js, van-1.5.2.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).

TypeScript Support for Non-NPM Integration

For ESM Modules

To get TypeScript support for your ESM modules, download the corresponding .d.ts file from the Download Table and store it alongside the .js source file, and then import the .js file as normal:

import van from "./van-1.5.2.min.js"

For Script Tag

To get TypeScript support for code that would be imported via a <script> tag, download a .d.ts file from the Download Table (any file from the table would work), and then add the following code at the top of your .ts file:

import type { Van } from "./van-1.5.2.d.ts"

declare const van: Van

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 steps = van.state(0)
  ;(async () => { for (; steps.val < 40; ++steps.val) await sleep(sleepMs) })()
  return pre(() => `${" ".repeat(40 - steps.val)}🚐💨Hello VanJS!${"_".repeat(steps.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

If you encounter problems after pasting the code above to your HTML file, be mindful of where to place your script. See #9 for a detailed discussion.