Repository files navigation

📣Introducing VanX →

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

VanJS is anultra-lightweight,zero-dependency andunopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming withVanJS feels like building React apps in ascripting language, without JSX. Check-out theHello World code below:

// Reusable components can be just pure vanilla JavaScript functions.// Here we capitalize the first letter to follow React conventions.constHello=()=>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

You can convert any HTML or MD snippet intoVanJS code with our onlineconverter.

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

constCounter=()=>{constcounter=van.state(0)returndiv("❤️ ",counter," ",button({onclick:()=>++counter.val},"👍"),button({onclick:()=>--counter.val},"👎"),)}van.add(document.body,Counter())

Try on jsfiddle

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.

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 withVanJS 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.

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

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

Simplicity at its core. Only 5 functions (van.tags,van.add,van.state,van.derive,van.hydrate). The entire tutorial plus the API reference isjust one single web page, and can be learned within 1 hour for most developers.

VanJS is among the fastest web frameworks, according to theresults bykrausest/js-framework-benchmark. For SSR,Mini-Van is1.75X to2.25X more efficient compared to React.

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 theDownload Table to find the right.d.ts file to work with.

• Get Started (CDN, NPM or local download)
• Learn from theTutorial
• Learn byExamples (and alsoCommunity Examples)
• Get bored?Play a fun game built withVanJS under 60 lines
• Convert HTML or MD snippet toVanJS code with our onlineHTML/MD toVanJS Converter
• Check outVanUI - A collection of grab 'n go reusable utility and UI components forVanJS
• Want reactive list, global app state, server-driven UI, serialization and more? Check outVanX - The 1.2kB officialVanJS extension
• Want server-side rendering? Check outMini-Van andHydration (the entirevanjs.org site is built on top ofMini-Van)
• Debugging complex dependencies in your app? checkoutVanGraph
• For questions, feedback or general discussions, visit ourDiscussions page
• How didVanJS get its name?
• ✨AskVanJS Guru - aVanJS-focused AI to answer your questions

• VS Code Extension

A Guide to ReadingVanJS Codebase

🙏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 findVanJS 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 spreadVanJS to a wider audience.

In the name ofVanilla of the HouseJavaScript,the First of its name, Smallest Reactive UI Framework, 1.0kB JSX-free Grab 'n Go Library,Scripting Language for GUI,GPT-Empowered Toolkit, by the word of Tao of the House Xin, Founder and Maintainer ofVanJS, I do hereby grant you the permission ofVanJS underMIT License.

Contact us:@taoxin /tao@vanjs.org /Tao Xin

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

If I miss anyone's contribution here, apologies for my oversight 🙏, please comment on#87 to let me know.

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 🐛	David Bismut 💻🔌🐛	ZAKARIA ELALAOUI 🔌	Michael Burdi 💻
carlosmintfan 🐛	reserved-word 🐛	Binh Tran 🤔💻🔌