🚨 My GitHub account was flagged due to some suspicious login activities (I've no idea what happened). As a result, all VanJS repos hosted in GitHub and my GitHub accounts are currently unavailable. This website (which was hosted via GitHub Pages) was also down for 2 hours (recovered after migrated to Deno Deploy). I have reached out to GitHub support team and will do my best to restore the access of my GitHub repos. Sorry for all the inconvenience. 🙏🙏🙏

Meanwhile, to help you access the source code before GitHub repos are accessible, I have made backup repos in GitLab (you can also file issues there for feedback and support):

Preview links in this website, including jsfiddle links and CodeSandbox links aren't working now as they require GitHub integration.

Finally, in case it helps, I sent a post to GitHub Community: #114684. If you can kindly comment and/or upvote the post, it might help draw the awareness of GitHub team to the issue.

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

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