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-0.12.4.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-0.12.4.nomodule.min.js"></script>

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

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()

  const helloText = van.bind(headingSpaces, trailingUnderscores,
    (h, t) => `${" ".repeat(h)}🚐💨Hello VanJS!${"_".repeat(t)}`)
  return div(pre(helloText))
}

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

The current version of VanJS is 0.12.4 (announcement). You can find all relevant VanJS files to download in the table below:

Click the link to download the file, or 📋 to copy the import line from CDN.

Files	Description
`van-0.12.4.min.jsCopy import line📋` `van-0.12.4.min.d.ts`	Minified script file for ES6 modules, optimized for bundle size.
`van-0.12.4.jsCopy import line📋` `van-0.12.4.d.ts`	The source file without minification.
`van-0.12.4.debug.jsCopy import line📋` `van-0.12.4.debug.d.ts`	The script file for debugging purpose, compared to `van-0.12.4.js`, it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages.
`van-0.12.4.nomodule.min.jsCopy import line📋`	Similar to `van-0.12.4.min.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.4.nomodule.jsCopy import line📋`	Similar to `van-0.12.4.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.4.nomodule.debug.jsCopy import line📋`	Similar to `van-0.12.4.debug.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.

Historical Versions

0.12.3

Announcement

Files	Description
`van-0.12.3.min.jsCopy import line📋` `van-0.12.3.min.d.ts`	Minified script file for ES6 modules, optimized for bundle size.
`van-0.12.3.jsCopy import line📋` `van-0.12.3.d.ts`	The source file without minification.
`van-0.12.3.debug.jsCopy import line📋` `van-0.12.3.debug.d.ts`	The script file for debugging purpose, compared to `van-0.12.3.js`, it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages.
`van-0.12.3.nomodule.min.jsCopy import line📋`	Similar to `van-0.12.3.min.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.3.nomodule.jsCopy import line📋`	Similar to `van-0.12.3.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.3.nomodule.debug.jsCopy import line📋`	Similar to `van-0.12.3.debug.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.

0.12.2

Announcement

Files	Description
`van-0.12.2.min.jsCopy import line📋` `van-0.12.2.min.d.ts`	Minified script file for ES6 modules, optimized for bundle size.
`van-0.12.2.jsCopy import line📋` `van-0.12.2.d.ts`	The source file without minification.
`van-0.12.2.debug.jsCopy import line📋` `van-0.12.2.debug.d.ts`	The script file for debugging purpose, compared to `van-0.12.2.js`, it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages.
`van-0.12.2.nomodule.min.jsCopy import line📋`	Similar to `van-0.12.2.min.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.2.nomodule.jsCopy import line📋`	Similar to `van-0.12.2.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.2.nomodule.debug.jsCopy import line📋`	Similar to `van-0.12.2.debug.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.

0.12.1

Announcement

Files	Description
`van-0.12.1.min.jsCopy import line📋` `van-0.12.1.min.d.ts`	Minified script file for ES6 modules, optimized for bundle size.
`van-0.12.1.jsCopy import line📋` `van-0.12.1.d.ts`	The source file without minification.
`van-0.12.1.debug.jsCopy import line📋` `van-0.12.1.debug.d.ts`	The script file for debugging purpose, compared to `van-0.12.1.js`, it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages.
`van-0.12.1.nomodule.min.jsCopy import line📋`	Similar to `van-0.12.1.min.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.1.nomodule.jsCopy import line📋`	Similar to `van-0.12.1.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.1.nomodule.debug.jsCopy import line📋`	Similar to `van-0.12.1.debug.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.

0.12.0

Announcement

Files	Description
`van-0.12.0.min.jsCopy import line📋` `van-0.12.0.min.d.ts`	Minified script file for ES6 modules, optimized for bundle size.
`van-0.12.0.jsCopy import line📋` `van-0.12.0.d.ts`	The source file without minification.
`van-0.12.0.debug.jsCopy import line📋` `van-0.12.0.debug.d.ts`	The script file for debugging purpose, compared to `van-0.12.0.js`, it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages.
`van-0.12.0.nomodule.min.jsCopy import line📋`	Similar to `van-0.12.0.min.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.0.nomodule.jsCopy import line📋`	Similar to `van-0.12.0.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.12.0.nomodule.debug.jsCopy import line📋`	Similar to `van-0.12.0.debug.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.

0.11.11

Announcement

Files	Description
`van-0.11.11.min.jsCopy import line📋` `van-0.11.11.min.d.ts`	Minified script file for ES6 modules, optimized for bundle size.
`van-0.11.11.jsCopy import line📋` `van-0.11.11.d.ts`	The source file without minification.
`van-0.11.11.debug.jsCopy import line📋` `van-0.11.11.debug.d.ts`	The script file for debugging purpose, compared to `van-0.11.11.js`, it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages.
`van-0.11.11.nomodule.min.jsCopy import line📋`	Similar to `van-0.11.11.min.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.11.11.nomodule.jsCopy import line📋`	Similar to `van-0.11.11.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.11.11.nomodule.debug.jsCopy import line📋`	Similar to `van-0.11.11.debug.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.

0.11.10

Announcement

Files	Description
`van-0.11.10.min.jsCopy import line📋` `van-0.11.10.min.d.ts`	Minified script file for ES6 modules, optimized for bundle size.
`van-0.11.10.jsCopy import line📋` `van-0.11.10.d.ts`	The source file without minification.
`van-0.11.10.debug.jsCopy import line📋` `van-0.11.10.debug.d.ts`	The script file for debugging purpose, compared to `van-0.11.10.js`, it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages.
`van-0.11.10.nomodule.min.jsCopy import line📋`	Similar to `van-0.11.10.min.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.11.10.nomodule.jsCopy import line📋`	Similar to `van-0.11.10.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.11.10.nomodule.debug.jsCopy import line📋`	Similar to `van-0.11.10.debug.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.

0.11.9 (First Public Release)

This is the first public release of VanJS. See the announcement.

Files	Description
`van-0.11.9.min.jsCopy import line📋` `van-0.11.9.min.d.ts`	Minified script file for ES6 modules, optimized for bundle size.
`van-0.11.9.jsCopy import line📋` `van-0.11.9.d.ts`	The source file without minification.
`van-0.11.9.debug.jsCopy import line📋` `van-0.11.9.debug.d.ts`	The script file for debugging purpose, compared to `van-0.11.9.js`, it adds additional sanity checks, such as type-checking, including the checkings that are impossible to do with TypeScript. Using this file for development purpose will detect issues earlier and produce more meaningful error messages.
`van-0.11.9.nomodule.min.jsCopy import line📋`	Similar to `van-0.11.9.min.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.11.9.nomodule.jsCopy import line📋`	Similar to `van-0.11.9.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.
`van-0.11.9.nomodule.debug.jsCopy import line📋`	Similar to `van-0.11.9.debug.js`, but designed to work in non-module context, such as inline JavaScript or `<script type="text/javascript">`.