<html lang="en"><head>

<link rel="icon" href="/logo.svg">

<title>VanJS - Getting Started</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="color-scheme" content="light dark">

<style>

@font-face {

font-family: 'Poppins';

font-style: normal;

font-weight: 400;

src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');

}

</style>

<link rel="stylesheet" href="/code/w3-v1.css">

<link id="prism-css" rel="stylesheet" href="">

<link rel="stylesheet" href="/vanjs-v2.css">

</head>

<body class="line-numbers" data-prismjs-copy="📋">

<!-- Google tag (gtag.js) -->

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XFMTW2GNRV"></script>

<script>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'G-XFMTW2GNRV');

</script>

<script type="text/javascript" src="/code/prism-v1.js" defer></script><script type="text/javascript" src="/code/van-1.6.1.nomodule.min.js" defer></script><script type="text/javascript" src="start.js" defer></script>

<!-- Sidebar/menu -->

<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:280px;font-weight:bold;" id="mySidebar"><br>

<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>

<div class="w3-container">

<h1 class="w3-padding-16 w3-xxxlarge">

<img src="/logo.svg" alt="VanJS" width="192px" height="192px">

</h1>

</div>

<div id="nav" class="w3-bar-block"><a href="/" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a><a href="/start" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white current">Getting Started</a><a href="/tutorial" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Tutorial</a><a href="/demo" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">VanJS by Example</a><a href="/convert" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">HTML/MD to VanJS</a><a href="/vanui" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">VanUI</a><a href="/minivan" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Mini-Van</a><a href="/ssr" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">SSR &amp; Hydration</a><a href="/x" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">X</a><a href="/advanced" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Advanced Topics</a><a href="/media" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Media Coverage</a><a href="/about" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">About</a></div>

</nav>

<!-- Top menu on small screens -->

<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">

<a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>

<span id="title-bar">Getting Started</span>

</header>

<!-- Overlay effect when opening sidebar on small screens -->

<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- Dark‑/light‑mode toggle button -->

<button id="theme-toggle" title="Toggle dark / light mode" style="position:fixed;top:15px;right:20px;background:none;border:none;font-size:22px;cursor:pointer;z-index:30;">

🌙

</button>

<!-- !PAGE CONTENT! -->

<div class="w3-main" style="margin-left:300px;">

<div id="page">

<div id="content"><h1 class="w3-xxlarge"><b>VanJS</b>: Getting Started</h1><blockquote><i>Truth is ever to be found in the simplicity, and not in the multiplicity and confusion of things.<br><br>-- Isaac Newton</i></blockquote><p>To get started, add the line below to your script:</p><pre><code class="language-js">import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.6.1.min.js"</code></pre><p>To code without ES6 modules, add the following line to your HTML file instead:</p><pre><code class="language-html">&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.6.1.nomodule.min.js"&gt;&lt;/script&gt;</code></pre><p>Alternative, you can download the files (<code class="symbol"><a href="/code/van-1.6.1.min.js" download="van-1.6.1.min.js" style="white-space: nowrap;" title="Download van-1.6.1.min.js">van-1.6.1.min.js</a></code>, <code class="symbol"><a href="/code/van-1.6.1.nomodule.min.js" download="van-1.6.1.nomodule.min.js" style="white-space: nowrap;" title="Download van-1.6.1.nomodule.min.js">van-1.6.1.nomodule.min.js</a></code>) and serve them locally.</p><h2 class="w3-xxlarge w3-text-red" id="npm-integration"><a class="self-link" href="#npm-integration">NPM Integration</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>It's also possible to integrate with <b>VanJS</b> via NPM, making it handy to build web applications with tools like <a href="https://vitejs.dev/" class="w3-hover-opacity">Vite</a> or <a href="https://parceljs.org/" class="w3-hover-opacity">Parcel</a>. You can also build your own NPM packages that depend on <b>VanJS</b>. To get started with <b>VanJS</b> via NPM, run:</p><pre><code class="language-shell">npm install vanjs-core</code></pre><p>To use the <b>VanJS</b> NPM package, add this line to your script:</p><pre><code class="language-js">import van from "vanjs-core"</code></pre><p>or this line if you want to import the debug version of <b>VanJS</b>:</p><pre><code class="language-js">import van from "vanjs-core/debug"</code></pre><p>You can check out the <code class="symbol"><a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/npm-examples/hello?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">Hello World</a></code> app built with <b>VanJS</b> NPM + Vite (<a href="https://github.com/vanjs-org/van/tree/main/npm-examples/hello" class="w3-hover-opacity">source code</a>).</p><h2 class="w3-xxlarge w3-text-red" id="typescript-support-for-non-npm-integration"><a class="self-link" href="#typescript-support-for-non-npm-integration">TypeScript Support for Non-NPM Integration</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><h3 class="w3-large w3-text-red" id="for-esm-modules"><a class="self-link" href="#for-esm-modules">For ESM Modules</a></h3><p>To get TypeScript support for your ESM modules, download the corresponding <code class="symbol">.d.ts</code> file from the <a href="#download-table" class="w3-hover-opacity">Download Table</a> and store it alongside the <code class="symbol">.js</code> source file, and then import the <code class="symbol">.js</code> file as normal:</p><pre><code class="language-js">import van from "./van-1.6.1.min.js"</code></pre><h3 class="w3-large w3-text-red" id="for-script-tag"><a class="self-link" href="#for-script-tag">For Script Tag</a></h3><p>To get TypeScript support for code that would be imported via a <code class="language-html">&lt;script&gt;</code> tag, download a <code class="symbol">.d.ts</code> file from the <a href="#download-table" class="w3-hover-opacity">Download Table</a> (any file from the table would work), and then add the following code at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Van } from "./van-1.6.1.d.ts"

declare const van: Van

</code></pre><h2 class="w3-xxlarge w3-text-red" id="test-it-out"><a class="self-link" href="#test-it-out">Test It Out</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>The following code will produce a funnier <code class="symbol">Hello</code> component:</p><pre><code class="language-js">const {button, div, pre} = van.tags

const sleep = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms))

const Run = ({sleepMs}) =&gt; {

const steps = van.state(0)

;(async () =&gt; { for (; steps.val &lt; 40; ++steps.val) await sleep(sleepMs) })()

return pre(() =&gt; `${" ".repeat(40 - steps.val)}🚐💨Hello VanJS!${"_".repeat(steps.val)}`)

}

const Hello = () =&gt; {

const dom = div()

return div(

dom,

button({onclick: () =&gt; van.add(dom, Run({sleepMs: 2000}))}, "Hello 🐌"),

button({onclick: () =&gt; van.add(dom, Run({sleepMs: 500}))}, "Hello 🐢"),

button({onclick: () =&gt; van.add(dom, Run({sleepMs: 100}))}, "Hello 🚶‍♂️"),

button({onclick: () =&gt; van.add(dom, Run({sleepMs: 10}))}, "Hello 🏎️"),

button({onclick: () =&gt; van.add(dom, Run({sleepMs: 2}))}, "Hello 🚀"),

)

}

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

</code></pre><p><b>Demo:</b></p><p id="demo-hello-fun"></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/start/hello-fun">Try on jsfiddle</a></p><p><i>If you encounter problems after pasting the code above to your HTML file, be mindful of where to place your script. See <a href="https://github.com/vanjs-org/vanjs-org.github.io/pull/9" class="w3-hover-opacity">#9</a> for a detailed discussion.</i></p><h2 class="w3-xxlarge w3-text-red" id="download-table"><a class="self-link" href="#download-table">Download Table</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><div id="download-table-div"></div></div>

<aside id="toc"><ul><li><a href="#npm-integration" class="w3-hover-opacity">NPM Integration</a></li><li><a href="#typescript-support-for-non-npm-integration" class="w3-hover-opacity">TypeScript Support for Non-NPM Integration</a><ul><li><a href="#for-esm-modules" class="w3-hover-opacity">For ESM Modules</a></li><li><a href="#for-script-tag" class="w3-hover-opacity">For Script Tag</a></li></ul></li><li><a href="#test-it-out" class="w3-hover-opacity">Test It Out</a></li><li><a href="#download-table" class="w3-hover-opacity">Download Table</a></li></ul></aside>

</div>

</div>

<script>

// Script to open and close sidebar

const w3_open = () => {

document.getElementById("mySidebar").style.display = "block"

document.getElementById("myOverlay").style.display = "block"

}

const w3_close = () => {

document.getElementById("mySidebar").style.display = "none"

document.getElementById("myOverlay").style.display = "none"

}

const tocDom = document.getElementById("toc")

// Tracks the current toc item

const trackToc = () => {

const allHeadings = [...document.querySelectorAll("h2,h3")]

const currentHeadingIndex = allHeadings.findIndex(h => h.getBoundingClientRect().top >= 0)

let currentHeading

if (currentHeadingIndex < 0) currentHeading = allHeadings[allHeadings.length - 1]; else {

currentHeading = allHeadings[currentHeadingIndex]

if (currentHeadingIndex > 0 && currentHeading.getBoundingClientRect().top > innerHeight)

currentHeading = allHeadings[currentHeadingIndex - 1]

}

for (const e of document.querySelectorAll("#toc li a"))

if (e.href.split("#")[1] === currentHeading?.id) {

e.classList.add("current-heading")

const {top: tocTop, bottom: tocBottom} = tocDom.getBoundingClientRect()

const {top: eTop, bottom: eBottom} = e.getBoundingClientRect()

if (eBottom > tocBottom) tocDom.scrollTop += eBottom - tocBottom

else if (eTop < tocTop) tocDom.scrollTop -= tocTop - eTop

} else

e.classList.remove("current-heading")

}

trackToc()

document.addEventListener("scroll", trackToc)

addEventListener("resize", trackToc)

// Dark / light theme handling

const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)")

const root = document.documentElement

const btn = document.getElementById("theme-toggle")

const applyTheme = theme => {

if (theme === "dark") {

root.setAttribute("data-theme", "dark")

document.getElementById("prism-css").href = "/code/prism-v2-dark.css"

btn.textContent = "☀️"

} else {

root.removeAttribute("data-theme")

document.getElementById("prism-css").href = "/code/prism-v2.css"

btn.textContent = "🌙"

}

if (typeof updateChart === "function") updateChart()

}

const stored = localStorage.getItem("theme")

if (stored === "light" || stored === "dark")

applyTheme(stored)

else

applyTheme(prefersDarkMq.matches ? "dark" : "light")

btn.addEventListener("click", () => {

const current = root.getAttribute("data-theme") === "dark" ? "dark" : "light"

const next = current === "dark" ? "light" : "dark"

localStorage.setItem("theme", next)

applyTheme(next)

})

prefersDarkMq.addEventListener("change", e => {

if (!localStorage.getItem("theme"))

applyTheme(e.matches ? "dark" : "light")

})

const copy = e => {

const file = e.previousElementSibling.innerText

const importLine = file.includes("nomodule") ?

`<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/${file}"><\/script>` :

`import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/${file}"`

navigator.clipboard.writeText(importLine)

.then(() => e.querySelector(".tooltip").innerText = "Copied")

.catch(() => e.querySelector(".tooltip").innerText = "Copy failed")

}

const resetTooltip = e => e.querySelector(".tooltip").innerText = "Copy import line"

</script>

<!-- Place this tag in your head or just before your close body tag. -->

<script async src="https://buttons.github.io/buttons.js"></script>

<link rel="prefetch" href="/code/prism-v1.js" as="script"><link rel="prefetch" href="https://www.gstatic.com/charts/loader.js" as="script"><link rel="prefetch" href="/code/diff.min.js" as="script"><link rel="prefetch" href="/code/van-1.6.1.nomodule.min.js" as="script"><link rel="prefetch" href="/code/van-x-0.6.3.nomodule.min.js" as="script"></body></html>