index.html

<!DOCTYPE html>
<html lang="en"><head>
    <link rel="icon" href="/logo.svg">
    <title>VanJS - A 1.0kB No-JSX Framework Based on Vanilla JavaScript</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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 rel="stylesheet" href="/code/prism-v1.css">
    <link rel="stylesheet" href="/vanjs.css">
  </head>
  <body class="line-numbers" data-prismjs-copy="📋">
    <!-- Gurubase Widget -->
    <script async src="https://widget.gurubase.io/widget.latest.min.js" id="guru-widget-id" data-widget-id="f0WMAZ_-X7VX2FTx6oGbm_FvuhgEyJTZKjTrEqCDlQ0" data-text="Ask AI" data-bg-color="rgba(244, 67, 54, 0.3)" data-light-mode="true">
    </script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q0NB75RY7E"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-Q0NB75RY7E');
    </script>
    <script type="text/javascript" src="/code/prism-v1.js" defer></script><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" defer></script><script type="text/javascript" src="/code/van-1.5.3.nomodule.min.js" defer></script><script type="text/javascript" src="home.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 current">Home</a><a href="/start" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">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">VanJS</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>

    <!-- !PAGE CONTENT! -->
    <div class="w3-main" style="margin-left:300px;">
      <div id="page">
        <div id="content"><h1 class="w3-xxlarge"><b>VanJS</b>: A 1.0kB Grab 'n Go Reactive UI Framework without React/JSX</h1><p></p><div>📣 <a href="https://github.com/vanjs-org/van/discussions/144" class="w3-hover-opacity">Introducing <b>VanX</b> →</a></div><p></p><blockquote><i>Enable everyone to build useful UI apps with a few lines of code, anywhere, any time, on any device.</i></blockquote><p><b>VanJS</b> (<a href="/about#name" class="w3-hover-opacity">abbreviated <b>Van</b>illa <b>J</b>ava<b>S</b>cript</a>) is an <b><i>ultra-lightweight</i></b>, <b><i>zero-dependency</i></b>, and <b><i>unopinionated</i></b> Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with <b>VanJS</b> feels like building React apps in a <a href="/about#story" class="w3-hover-opacity">scripting language</a>, without JSX. Check-out the <code class="symbol">Hello World</code> code below:</p><pre><code class="language-js">// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello = () =&gt; div(
  p("👋Hello"),
  ul(
    li("🗺️World"),
    li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
  ),
)

van.add(document.body, Hello())
// Alternatively, you can write:
// document.body.appendChild(Hello())
</code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/home/hello">Try on jsfiddle</a></p><p>You can convert any HTML or MD snippet into <b>VanJS</b> code with our online <a href="/convert" class="w3-hover-opacity">converter</a>.</p><p id="code-counter"><b>VanJS</b> helps you manage states and UI bindings as well, with a more natural API:</p><pre><code class="language-js">const Counter = () =&gt; {
  const counter = van.state(0)
  return span(
    "❤️ ", counter, " ",
    button({onclick: () =&gt; ++counter.val}, "👍"),
    button({onclick: () =&gt; --counter.val}, "👎"),
  )
}

van.add(document.body, Counter())
</code></pre><p><b>Demo:</b> <span id="demo-counter"></span></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/home/counter">Try on jsfiddle</a></p><h2 class="w3-xxlarge w3-text-red" id="why-vanjs"><a class="self-link" href="#why-vanjs">Why VanJS?</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><h3 class="w3-large w3-text-red" id="reactive-programming-without-react-jsx"><a class="self-link" href="#reactive-programming-without-react-jsx">Reactive Programming without React/JSX</a></h3><p>Declarative DOM tree composition, reusable components, reactive state binding - <b>VanJS</b> offers every good aspect that React does, but without the need of React, JSX, transpiling, virtual DOM, or any hidden logic. Everything is built with simple JavaScript functions and DOM.</p><h3 class="w3-large w3-text-red" id="grab-n-go"><a class="self-link" href="#grab-n-go">Grab 'n Go</a></h3><p><b><i>No installation</i></b>, <b><i>no configuration</i></b>, <b><i>no dependencies</i></b>, <b><i>no transpiling</i></b>, <b><i>no IDE setups</i></b>. Adding a line to your script or HTML file is all you need to start coding. And any code with <b>VanJS</b> can be pasted and executed directly in your browser's developer console. <b>VanJS</b> allows you to focus on the business logic of your application, rather than getting bogged down in frameworks and tools.</p><h3 class="w3-large w3-text-red" id="ultra-lightweight"><a class="self-link" href="#ultra-lightweight">Ultra-Lightweight</a></h3><p><b>VanJS</b> is the smallest reactive UI framework in the world, with just 1.0kB in the gzipped minified bundle. It's <b>50~100 times</b> smaller than most popular alternatives. Guess what you can get from this 1.0kB framework? All essential features of modern web frameworks - DOM templating, state, state binding, state derivation, effect, SPA, client-side routing and even hydration!</p><p></p><div style="text-align: center"><label><input type="radio" name="bundle-type" id="radioMinGz" checked onclick="updateChart()"><span class="fixed-width" style="margin-right: 60px;">.min.js.gz</span></label> <label><input type="radio" name="bundle-type" id="radioMin" onclick="updateChart()"><span class="fixed-width">.min.js</span></label></div><div id="size-comp"></div><p></p><blockquote><i>Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.<br><br>-- Antoine de Saint-Exupéry, Airman's Odyssey</i></blockquote><h3 class="w3-large w3-text-red" id="easy-to-learn"><a class="self-link" href="#easy-to-learn">Easy to Learn</a></h3><p>Simplicity at its core. Only 5 functions (<code class="symbol">van.tags</code>, <code class="symbol">van.add</code>, <code class="symbol">van.state</code>, <code class="symbol">van.derive</code>, <code class="symbol">van.hydrate</code>). The entire tutorial plus the API reference is <a href="/tutorial" class="w3-hover-opacity">just one single web page</a>, and can be learned within 1 hour for most developers.</p><h3 class="w3-large w3-text-red" id="performance"><a class="self-link" href="#performance">Performance</a></h3><p><b>VanJS</b> is among the fastest web frameworks, according to the <a href="https://krausest.github.io/js-framework-benchmark/2023/table_chrome_117.0.5938.62.html" class="w3-hover-opacity">results</a> by <a href="https://github.com/krausest/js-framework-benchmark" class="w3-hover-opacity">krausest/js-framework-benchmark</a>. For SSR, <b>Mini-Van</b> is <a href="https://github.com/vanjs-org/mini-van/tree/main/bench#react-vs-mini-van" class="w3-hover-opacity"><b>1.75X</b> to <b>2.25X</b> more efficient</a> compared to React.</p><h3 class="w3-large w3-text-red" id="typescript-support"><a class="self-link" href="#typescript-support">TypeScript Support</a></h3><p><b>VanJS</b> provides first-class support for TypeScript. With the <code class="symbol">.d.ts</code> file in place, you'll be able to take advantage of type-checking, IntelliSense, large-scale refactoring provided by your preferred development environment. Refer to the <a href="/start#download-table" class="w3-hover-opacity">Download Table</a> to find the right <code class="symbol">.d.ts</code> file to work with.</p><h2 class="w3-xxlarge w3-text-red" id="want-to-learn-more"><a class="self-link" href="#want-to-learn-more">Want to Learn More?</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><ul><li><a href="/start" class="w3-hover-opacity">Get Started</a> (CDN, NPM or local download)</li><li>Learn from the <a href="/tutorial" class="w3-hover-opacity">Tutorial</a></li><li>Learn by <a href="/demo" class="w3-hover-opacity">Examples</a> (and also <a href="/demo#community-examples" class="w3-hover-opacity">Community Examples</a>)</li><li>Get bored? <a href="/demo#game" class="w3-hover-opacity">Play a fun game</a> built with <b>VanJS</b> under 60 lines</li><li>Convert HTML or MD snippet to <b>VanJS</b> code with our online <a href="/convert" class="w3-hover-opacity">HTML/MD to <b>VanJS</b> Converter</a></li><li>Check out <a href="/vanui" class="w3-hover-opacity"><b>VanUI</b></a> - A collection of grab 'n go reusable utility and UI components for <b>VanJS</b></li><li>Want reactive list, global app state, server-driven UI, serialization and more? Check out <a href="/x" class="w3-hover-opacity"><b>VanX</b></a> - The 1.2kB official <b>VanJS</b> extension</li><li>Want server-side rendering? Check out <a href="/minivan" class="w3-hover-opacity"><b>Mini-Van</b></a> and <a href="/ssr" class="w3-hover-opacity">Hydration</a> (the entire vanjs.org site is built on top of <b>Mini-Van</b>)</li><li>Debugging complex dependencies in your app? checkout <a href="/graph" class="w3-hover-opacity"><b>VanGraph</b></a></li><li>For questions, feedback or general discussions, visit our <a href="https://github.com/vanjs-org/van/discussions" class="w3-hover-opacity">Discussions</a> page</li><li>✨ <a href="https://gurubase.io/g/vanjs" class="w3-hover-opacity">Ask <b>VanJS</b> Guru</a> - a <b>VanJS</b>-focused AI to answer your questions</li></ul><h2 class="w3-xxlarge w3-text-red" id="source-code"><a class="self-link" href="#source-code">Source Code</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p style="display: flex; align-items: center;"><svg style="margin-right: 6px;" height="16" aria-hidden="true" viewbox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path></svg><a href="https://github.com/vanjs-org/van" class="w3-hover-opacity">github.com/vanjs-org/van</a></p><p>See also: <a href="/about#source-guide" class="w3-hover-opacity">A Guide to Reading <b>VanJS</b> Codebase</a></p><h2 class="w3-xxlarge w3-text-red" id="ide-plug-ins"><a class="self-link" href="#ide-plug-ins">IDE Plug-ins</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p style="display: flex; align-items: center;"><img style="margin-right: 6px;" src="/vs-code-16x16.png" height="16" width="16" aria-hidden="true"><a href="https://marketplace.visualstudio.com/items?itemName=TaoXin.vanjs-importtag" class="w3-hover-opacity">VS Code Extension</a></p><h2 class="w3-xxlarge w3-text-red" id="community-add-ons"><a class="self-link" href="#community-add-ons">Community Add-ons</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p><b>VanJS</b> can be extended via add-ons. Add-ons add more features to <b>VanJS</b> and/or provide an alternative styled API. Below is a curated list of add-ons built by <b>VanJS</b> community:</p><table><thead><tr><th>Add-on</th><th>Description</th><th>Author</th></tr></thead><tbody><tr><td><a href="https://medium-tech.github.io/van-cone-website/" class="w3-hover-opacity">Van Cone</a></td><td>An SPA framework add-on for <b>VanJS</b></td><td><a href="https://github.com/b-rad-c" class="w3-hover-opacity">b-rad-c</a></td></tr><tr><td><a href="https://van-element.pages.dev/" class="w3-hover-opacity">van_element</a></td><td>Web Components with <b>VanJS</b></td><td><a href="https://github.com/Atmos4" class="w3-hover-opacity">Atmos4</a></td></tr><tr><td><a href="https://thednp.github.io/vanjs-feather/" class="w3-hover-opacity">VanJS Feather</a></td><td>Feather Icons for <b>VanJS</b></td><td><a href="https://github.com/thednp" class="w3-hover-opacity">thednp</a></td></tr><tr><td><a href="https://github.com/vanjs-org/van/blob/main/addons/van_dml" class="w3-hover-opacity">van_dml.js</a></td><td>A new flavour of composition for <b>VanJS</b></td><td><a href="https://github.com/efpage" class="w3-hover-opacity">Eckehard</a></td></tr><tr><td><a href="https://github.com/vanjs-org/van/blob/main/addons/van_jsx" class="w3-hover-opacity">van-jsx</a></td><td>A JSX wrapper for <b>VanJS</b>, for people who like the JSX syntax more</td><td><a href="https://github.com/cqh963852" class="w3-hover-opacity">cqh963852</a></td></tr><tr><td><a href="https://github.com/iuroc/vanjs-router" class="w3-hover-opacity">vanjs-router</a></td><td>A router solution for <b>VanJS</b> (<code class="symbol">README.md</code> in simplified Chinese)</td><td><a href="https://github.com/iuroc" class="w3-hover-opacity">欧阳鹏</a></td></tr><tr><td><a href="https://github.com/kwameopareasiedu/vanjs-routing" class="w3-hover-opacity">VanJS Routing</a></td><td>Yet another routing solution for <b>VanJS</b></td><td><a href="https://github.com/kwameopareasiedu" class="w3-hover-opacity">Kwame Opare Asiedu</a></td></tr><tr><td><a href="https://github.com/kwameopareasiedu/vanjs-form" class="w3-hover-opacity">VanJS Form</a></td><td>Fully typed form state management library (with validation) for <b>VanJS</b></td><td><a href="https://github.com/kwameopareasiedu" class="w3-hover-opacity">Kwame Opare Asiedu</a></td></tr><tr><td><a href="https://github.com/WilliCommer/vanjs-bootstrap" class="w3-hover-opacity">vanjs-bootstrap</a></td><td><b>VanJS</b> Bootstrap Components</td><td><a href="https://github.com/WilliCommer" class="w3-hover-opacity">Willi Commer</a></td></tr><tr><td><a href="https://github.com/MeddahAbdellah/vanrx" class="w3-hover-opacity">vanrx</a></td><td>An ultra-lightweight Redux addon for <b>VanJS</b></td><td><a href="https://github.com/MeddahAbdellah" class="w3-hover-opacity">Meddah Abdallah</a></td></tr><tr><td><a href="https://github.com/ken-okabe/vanfs" class="w3-hover-opacity">VanFS</a></td><td>1:1 bindings from F# to <b>VanJS</b></td><td><a href="https://github.com/ken-okabe" class="w3-hover-opacity">Ken Okabe</a></td></tr><tr><td><a href="https://github.com/zakarialaoui10/van-wrapper" class="w3-hover-opacity">Van-wrapper</a></td><td>A tool that facilitates the rendering of <b>VanJS</b> elements within other popular frameworks</td><td><a href="https://github.com/zakarialaoui10" class="w3-hover-opacity">Zakaria Elalaoui</a></td></tr><tr><td><a href="https://github.com/thednp/create-vanjs" class="w3-hover-opacity">Create VanJS</a></td><td>The fastest way to kickstart your first <b>VanJS</b> Project: <code>npm create vanjs@latest</code></td><td><a href="https://github.com/thednp" class="w3-hover-opacity">thednp</a></td></tr><tr><td><a href="https://github.com/thednp/vite-plugin-vanjs" class="w3-hover-opacity">Vite Plugin for VanJS</a></td><td>A mini meta-framework for <b>VanJS</b> featuring routing, metadata, isomorphic rendering and JSX transformation</td><td><a href="https://github.com/thednp" class="w3-hover-opacity">thednp</a></td></tr><tr><td><a href="https://github.com/thednp/vite-vanjs-svg" class="w3-hover-opacity">Vite VanJS SVG</a></td><td>A Vite plugin to transform SVG files to <b>VanJS</b> components on the fly</td><td><a href="https://github.com/thednp" class="w3-hover-opacity">thednp</a></td></tr><tr><td><a href="https://thednp.github.io/vanjs-lucide" class="w3-hover-opacity">VanJS Lucide</a></td><td>Lucide Icons for <b>VanJS</b></td><td><a href="https://github.com/thednp" class="w3-hover-opacity">thednp</a></td></tr></tbody></table><h2 class="w3-xxlarge w3-text-red" id="support-feedback"><a class="self-link" href="#support-feedback">Support &amp; Feedback</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>🙏 <b>VanJS</b> aims to build a better world by reducing the entry barrier of UI programming, with no intention or plan on commercialization whatsoever. If you find <b>VanJS</b> interesting, or could be useful for you some day, please consider starring the project on <a href="https://github.com/vanjs-org/van" class="w3-hover-opacity">GitHub</a>. It takes just a few seconds but your support means the world to us and helps spread <b>VanJS</b> to a wider audience.</p><p><a class="github-button" href="https://github.com/vanjs-org/van" data-icon="octicon-star" data-show-count="true" aria-label="Star vanjs-org/van on GitHub">Star</a> <a class="github-button" href="https://github.com/vanjs-org/van/subscription" data-icon="octicon-eye" data-show-count="false" aria-label="Watch vanjs-org/van on GitHub">Watch</a> <a class="github-button" href="https://github.com/vanjs-org/van/discussions" data-icon="octicon-comment-discussion" aria-label="Discuss buttons/github-buttons on GitHub">Discuss</a> <a class="github-button" href="https://github.com/vanjs-org/van/issues" data-icon="octicon-issue-opened" data-show-count="false" aria-label="Issue vanjs-org/van on GitHub">Issue</a> <a class="github-button" href="https://github.com/vanjs-org" aria-label="Follow @vanjs-org on GitHub">Follow @vanjs-org</a></p><blockquote><i>In the name of <b>Van</b>illa of the House <b>J</b>ava<b>S</b>cript, <a href="/about#name" class="w3-hover-opacity">the First of its name</a>, Smallest Reactive UI Framework, 1.0kB JSX-free Grab 'n Go Library, <a href="https://vanjs.org/about#story" class="w3-hover-opacity">Scripting Language</a> for GUI, <a href="https://chat.openai.com/g/g-7tcSHUu27-vanjs-app-builder" class="w3-hover-opacity">GPT-Empowered</a> Toolkit, by the word of Tao of the House Xin, Founder and Maintainer of <b>VanJS</b>, I do hereby grant you the permission of <b>VanJS</b> under <a href="https://github.com/vanjs-org/van/blob/main/LICENSE" class="w3-hover-opacity">MIT License</a>.</i></blockquote><p class="contact">Contact us: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none" role="img" aria-labelledby="a7if5hb4iar7vvxwyraz9fhyh4t2zeon" class="octicon"><title id="a7if5hb4iar7vvxwyraz9fhyh4t2zeon">X</title><g clip-path="url(#clip0_1668_3024)"><path d="M9.52217 6.77143L15.4785 0H14.0671L8.89516 5.87954L4.76437 0H0L6.24656 8.8909L0 15.9918H1.41155L6.87321 9.78279L11.2356 15.9918H16L9.52183 6.77143H9.52217ZM7.58887 8.96923L6.95596 8.0839L1.92015 1.03921H4.0882L8.15216 6.7245L8.78507 7.60983L14.0677 14.9998H11.8997L7.58887 8.96957V8.96923Z" fill="currentColor"></path></g><defs><clippath id="clip0_1668_3024"><rect width="16" height="16" fill="white"></rect></clippath></defs></svg><a href="https://x.com/intent/follow?region=follow_link&amp;screen_name=taoxin" class="w3-hover-opacity">@taoxin</a> / <svg height="16" aria-hidden="true" viewbox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path></svg><a href="https://github.com/Tao-VanJS" class="w3-hover-opacity">Tao Xin</a> / <svg viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25v-8.5C0 2.784.784 2 1.75 2ZM1.5 12.251c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.809L8.38 9.397a.75.75 0 0 1-.76 0L1.5 5.809v6.442Zm13-8.181v-.32a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25v.32L8 7.88Z"></path></svg><a href="mailto:tao@vanjs.org" class="w3-hover-opacity">tao@vanjs.org</a> / <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none" role="img" aria-labelledby="e723dcjjyhqiunljk7lgl7qrcshazrj"><title id="e723dcjjyhqiunljk7lgl7qrcshazrj">LinkedIn</title><g clip-path="url(#clip0_202_91845)"><path d="M14.5455 0H1.45455C0.650909 0 0 0.650909 0 1.45455V14.5455C0 15.3491 0.650909 16 1.45455 16H14.5455C15.3491 16 16 15.3491 16 14.5455V1.45455C16 0.650909 15.3491 0 14.5455 0ZM5.05746 13.0909H2.912V6.18764H5.05746V13.0909ZM3.96291 5.20073C3.27127 5.20073 2.712 4.64 2.712 3.94982C2.712 3.25964 3.272 2.69964 3.96291 2.69964C4.65236 2.69964 5.21309 3.26036 5.21309 3.94982C5.21309 4.64 4.65236 5.20073 3.96291 5.20073ZM13.0938 13.0909H10.9498V9.73382C10.9498 8.93309 10.9353 7.90327 9.83491 7.90327C8.71855 7.90327 8.54691 8.77527 8.54691 9.67564V13.0909H6.40291V6.18764H8.46109V7.13091H8.49018C8.77673 6.58836 9.47636 6.016 10.52 6.016C12.6924 6.016 13.0938 7.44582 13.0938 9.30473V13.0909V13.0909Z" fill="currentColor"></path></g></svg><a href="https://www.linkedin.com/in/taoxin/" class="w3-hover-opacity">Tao Xin</a></p></div>
        <aside id="toc"><ul><li><a href="#why-vanjs" class="w3-hover-opacity">Why VanJS?</a><ul><li><a href="#reactive-programming-without-react-jsx" class="w3-hover-opacity">Reactive Programming without React/JSX</a></li><li><a href="#grab-n-go" class="w3-hover-opacity">Grab 'n Go</a></li><li><a href="#ultra-lightweight" class="w3-hover-opacity">Ultra-Lightweight</a></li><li><a href="#easy-to-learn" class="w3-hover-opacity">Easy to Learn</a></li><li><a href="#performance" class="w3-hover-opacity">Performance</a></li><li><a href="#typescript-support" class="w3-hover-opacity">TypeScript Support</a></li></ul></li><li><a href="#want-to-learn-more" class="w3-hover-opacity">Want to Learn More?</a></li><li><a href="#source-code" class="w3-hover-opacity">Source Code</a></li><li><a href="#ide-plug-ins" class="w3-hover-opacity">IDE Plug-ins</a></li><li><a href="#community-add-ons" class="w3-hover-opacity">Community Add-ons</a></li><li><a href="#support-feedback" class="w3-hover-opacity">Support &amp; Feedback</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)

      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.5.3.nomodule.min.js" as="script"><link rel="prefetch" href="/code/van-x-0.6.2.nomodule.min.js" as="script"></body></html>