Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vanjs-org/van

🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.
https://github.com/vanjs-org/van

data-binding dom dom-manipulation grab-n-go lightweight lightweight-framework lightweight-javascript-library minimalist no-dependencies no-setup reactive reactive-ui ui-framework ultra-light ultra-thin vanilla-dom-manipulation vanilla-javascript vanilla-js vannilajs

Last synced: 2 days ago
JSON representation

🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.

Host: GitHub
URL: https://github.com/vanjs-org/van
Owner: vanjs-org
License: mit
Created: 2023-05-08T05:45:31.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-05-21T04:11:41.000Z (7 months ago)
Last Synced: 2024-05-21T05:25:01.785Z (7 months ago)
Topics: data-binding, dom, dom-manipulation, grab-n-go, lightweight, lightweight-framework, lightweight-javascript-library, minimalist, no-dependencies, no-setup, reactive, reactive-ui, ui-framework, ultra-light, ultra-thin, vanilla-dom-manipulation, vanilla-javascript, vanilla-js, vannilajs
Language: JavaScript
Homepage: https://vanjs.org
Size: 2.68 MB
Stars: 3,535
Watchers: 33
Forks: 79
Open Issues: 30
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-tiny-js - van - vDOM-based framework optimized for no-build setups, <img align="top" height="24" src="./img/vanjs-core.svg"> (UI Frameworks)
awesome-github-star - van - Everyone can build a useful UI app in an hour. | vanjs-org | 2449 | (JavaScript)
jimsghstars - vanjs-org/van - 🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour. (JavaScript)
my-awesome-list - van - Everyone can build a useful UI app in an hour. | vanjs-org | 3920 | (JavaScript)

README

        [![Gurubase](https://img.shields.io/badge/Gurubase-Ask%20VanJS%20Guru-006BFF)](https://gurubase.io/g/vanjs)

# 🍦 **VanJS**: The Smallest Reactive UI Framework in the World

📣 [Introducing VanX →](https://github.com/vanjs-org/van/discussions/144) 




  

    

      

        

          🖊️ Get Started

        

        

          📖 Tutorial

        

        

          📚 Examples

        

        

          📝 HTML/MD to VanJS Converter

        

        

          ⚔️ VanX

        

        

          💬 Discuss

        

      

    

  



> Enable everyone to build useful UI apps with a few lines of code, anywhere, any time, on any device.

**VanJS** is an ***ultra-lightweight***, ***zero-dependency*** and ***unopinionated*** Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with **VanJS** feels like building React apps in a [scripting language](https://vanjs.org/about#story), without JSX. Check-out the `Hello World` code below:

```javascript

// Reusable components can be just pure vanilla JavaScript functions.

// Here we capitalize the first letter to follow React conventions.

const Hello = () => 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())

```

[Try on jsfiddle](https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/home/hello)

You can convert any HTML or MD snippet into **VanJS** code with our online [converter](https://vanjs.org/convert).

**VanJS** helps you manage states and UI bindings as well, with a more natural API:

```javascript

const Counter = () => {

  const counter = van.state(0)

  return div(

    "❤️ ", counter, " ",

    button({onclick: () => ++counter.val}, "👍"),

    button({onclick: () => --counter.val}, "👎"),

  )

}

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

```

[Try on jsfiddle](https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/home/counter)

## Why VanJS?

### Reactive Programming without React/JSX

Declarative DOM tree composition, reusable components, reactive state binding - **VanJS** 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.

### Grab 'n Go

***No installation***, ***no configuration***, ***no dependencies***, ***no transpiling***, ***no IDE setups***. Adding a line to your script or HTML file is all you need to start coding. And any code with **VanJS** can be pasted and executed directly in your browser's developer console. **VanJS** allows you to focus on the business logic of your application, rather than getting bogged down in frameworks and tools.

### Ultra-Lightweight

**VanJS** is the smallest reactive UI framework in the world, with just 1.0kB in the gzipped minified bundle. It's **50~100 times** 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!

![Size comparison](doc/size_comp.png)

> _Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away._

>

> _-- Antoine de Saint-Exupéry, Airman's Odyssey_

### Easy to Learn

Simplicity at its core. Only 5 functions (`van.tags`, `van.add`, `van.state`, `van.derive`, `van.hydrate`). The entire tutorial plus the API reference is [just one single web page](https://vanjs.org/tutorial), and can be learned within 1 hour for most developers.

### Performance

**VanJS** is among the fastest web frameworks, according to the [results](https://krausest.github.io/js-framework-benchmark/2023/table_chrome_117.0.5938.62.html) by [krausest/js-framework-benchmark](https://github.com/krausest/js-framework-benchmark). For SSR, **Mini-Van** is [**1.75X** to **2.25X** more efficient](https://github.com/vanjs-org/mini-van/tree/main/bench#react-vs-mini-van) compared to React.

### TypeScript Support

**VanJS** provides first-class support for TypeScript. With the `.d.ts` 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 [Download Table](https://vanjs.org/start#download-table) to find the right `.d.ts` file to work with.

## Want to Learn More?

* [Get Started](https://vanjs.org/start) (CDN, NPM or local download)

* Learn from the [Tutorial](https://vanjs.org/tutorial)

* Learn by [Examples](https://vanjs.org/demo) (and also [Community Examples](https://vanjs.org/demo#community-examples))

* Get bored? [Play a fun game](https://vanjs.org/demo#game) built with **VanJS** under 60 lines

* Convert HTML or MD snippet to **VanJS** code with our online [HTML/MD to **VanJS** Converter](https://vanjs.org/convert)

* Check out [**VanUI**](https://github.com/vanjs-org/van/tree/main/components) - A collection of grab 'n go reusable utility and UI components for **VanJS**

* Want reactive list, global app state, server-driven UI, serialization and more? Check out [**VanX**](https://vanjs.org/x) - The 1.2kB official **VanJS** extension

* Want server-side rendering? Check out [**Mini-Van**](https://github.com/vanjs-org/mini-van) and [Hydration](https://vanjs.org/ssr) (the entire [vanjs.org](https://vanjs.org/) site is built on top of **Mini-Van**)

* Debugging complex dependencies in your app? checkout [**VanGraph**](https://github.com/vanjs-org/van/tree/main/graph)

* For questions, feedback or general discussions, visit our [Discussions](https://github.com/vanjs-org/van/discussions) page

* [How did **VanJS** get its name?](https://vanjs.org/about#name)

* ✨ [Ask **VanJS** Guru](https://gurubase.io/g/vanjs) - a **VanJS**-focused AI to answer your questions

## IDE Plug-ins

* [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=TaoXin.vanjs-importtag)

## See Also

[A Guide to Reading **VanJS** Codebase](https://vanjs.org/about#source-guide)

## Support & Feedback

🙏 **VanJS** 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 **VanJS** interesting, or could be useful for you some day, please consider starring the project. It takes just a few seconds but your support means the world to us and helps spread **VanJS** to a wider audience.

> In the name of **Van**illa of the House **J**ava**S**cript, [the First of its name](https://vanjs.org/about#name), Smallest Reactive UI Framework, 1.0kB JSX-free Grab 'n Go Library, [Scripting Language](https://vanjs.org/about#story) for GUI, [GPT-Empowered](https://chat.openai.com/g/g-7tcSHUu27-vanjs-app-builder) Toolkit, by the word of Tao of the House Xin, Founder and Maintainer of **VanJS**, I do hereby grant you the permission of **VanJS** under [MIT License](https://github.com/vanjs-org/van/blob/main/LICENSE).

Contact us: [@taoxin](https://twitter.com/intent/follow?region=follow_link&screen_name=taoxin) / [[email protected]](mailto:[email protected]) / [Tao Xin](https://www.linkedin.com/in/taoxin/)

## Community Add-ons

**VanJS** can be extended via add-ons. Add-ons add more features to **VanJS** and/or provide an alternative styled API. Below is a curated list of add-ons built by **VanJS** community:

| Add-on | Description | Author |

| ------ | ----------- | ------ |

| [Van Cone](https://medium-tech.github.io/van-cone-website/) | An SPA framework add-on for **VanJS** | [b-rad-c](https://github.com/b-rad-c) |

| [van_element](/addons/van_element/) | Web Components with **VanJS** | [Atmos4](https://github.com/Atmos4) |

| [VanJS Feather](https://thednp.github.io/vanjs-feather/) | Feather Icons for **VanJS** | [thednp](https://github.com/thednp) |

| [van_dml.js](/addons/van_dml) | A new flavour of composition for **VanJS** | [Eckehard](https://github.com/efpage) |

| [van-jsx](/addons/van_jsx) | A JSX wrapper for **VanJS**, for people who like the JSX syntax more | [cqh963852](https://github.com/cqh963852) |

| [vanjs-router](https://github.com/iuroc/vanjs-router) | A router solution for **VanJS** (`README.md` in simplified Chinese) | [欧阳鹏](https://github.com/iuroc) |

| [VanJS Routing](https://github.com/kwameopareasiedu/vanjs-routing) | Yet another routing solution for **VanJS** | [Kwame Opare Asiedu](https://github.com/kwameopareasiedu) |

| [VanJS Form](https://github.com/kwameopareasiedu/vanjs-form) | Fully typed form state management library (with validation) for **VanJS** | [Kwame Opare Asiedu](https://github.com/kwameopareasiedu) |

| [vanjs-bootstrap](https://github.com/WilliCommer/vanjs-bootstrap) | **VanJS** Bootstrap Components | [Willi Commer](https://github.com/WilliCommer) |

| [vanrx](https://github.com/MeddahAbdellah/vanrx) | An ultra-lightweight Redux addon for **VanJS** | [Meddah Abdallah](https://github.com/MeddahAbdellah) |

| [VanFS](https://github.com/ken-okabe/vanfs) | 1:1 bindings from F# to **VanJS** | [Ken Okabe](https://github.com/ken-okabe) |

## Contributors (60)

*If I miss anyone's contribution here, apologies for my oversight 🙏, please comment on [#87](https://github.com/vanjs-org/van/issues/87) to let me know.*

[Emoji key](https://allcontributors.org/docs/en/emoji-key)

  

    

      
_{Tao Xin}
🎨 💻 📖 💡

      
_{Wei Sun}
🐛

      
_{Ryan Olson}
🖋

      
_{Tamotsu Takahashi}
💻

      
_icecream17
💻

      
_enpitsulin
💡 💻

      
_{Elliot Ford}
💻

    

    

      
_andrewgryan
🎨 💻 🐛

      
_FredericH
💡 💻

      
_ebraminio
💻 ⚠️

      
_Eckehard
💻 🔌

      
_{Austin Merrick}
💻 🤔 🎨

      
_{Lee Byonghun}
💻

      
_{caputdraconis}
💻

    

    

      
_{Achille Lacoin}
💻

      
_cqh
💻 🔌

      
_awesome
📹

      
_artydev
💡 💬

      
_{Neven DREAN}
💡 🐛

      
_{Stephen Handley}
💡

      
_{Ionut Stoica}
🤔

    

    

      
_{Rasmus Schultz}
🤔

      
_cloudspeech
🤔

      
_{Daniel Upshaw}
🔌

      
_barrymun
💡

      
_{Giulio Malventi}
🖋 🐛

      
_{Yahia Berashish}
🐛 💻 🔌 🤔 💡

      
_{Phil Schumann}
🐛

    

    

      
_{Raphaël Gauthier}
💻 🔌

      
_Nail
💻 🔌

      
_{Brian Takita}
🐛 🤔

      
_{Jonny Fillmore}
🐛

      
_{Lima Neto}
🖋

      
_{b rad c}
💻 🔌

      
_欧阳鹏
🔌 📹

    

    

      
_{Daniel Mazurkiewicz}
💻

      
_Atmos4
💻 🔌

      
_{Kwame Opare Asiedu}
🔌 💡

      
_{ali-alnasser570}
🤔

      
_{Auryn Engel}
📹

      
_{Samuel Wyndham}
📹

      
_sekoyo
🐛

    

    

      
_{Owen Furnell}
🐛

      
_MrVoltz
🐛

      
_Kane
💡

      
_{Vlad Sirenko}
💡 💻

      
_董凯
💡

      
_{Meddah Abdallah}
🔌

      
_Miroslaw
🐛

    

    

      
_{Jon Nyman}
🤔

      
_ericraider33
🐛

      
_{Ken Okabe}
🔌

      
_Nick
💡

      
_thednp
🔌

      
_{Bairui Su}
💻

      
_jroush-ipg
🐛

    

    

      
_kangaroolab
💡

      
_{Graham Stratford}
🐛

      
_{Kursat Aktas}
💻 🔌

      
_bleistivt
🐛