GitHub - vanjs-org/van: 🍦VanJS (Vanilla JavaScript): World's smallest reactive UI framework

Mai 25, às 07:31


4 min de leitura


0 leituras

🍦 VanJS: The Smallest Reactive UI Framework in the World VanJS (abbr. Vanilla JavaScript) is an ultra-lightweight, zero-dependency and unopinionated Reactive UI framework based on pure vanilla JavaScript and...
GitHub - vanjs-org/van: 🍦VanJS (Vanilla JavaScript): World's smallest reactive UI framework

🍦 VanJS: The Smallest Reactive UI Framework in the World

VanJS (abbr. Vanilla JavaScript) is an ultra-lightweight, zero-dependency and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels a lot like React. Check-out the Hello World code below:

// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello = () => div(
 li(a({href: ""}, "🍦VanJS")),
van.add(document.body, Hello())
// Alternatively, you can write:
// document.body.appendChild(Hello())

Try on jsfiddle

You can convert any HTML snippet into VanJS code with our online converter.

VanJS helps you manage state and UI binding as well, with a more natural API:

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

Why VanJS?

VanJS has the vision to be the scripting language for UI, just like bash is the scripting language for terminal. VanJS empowers frontend engineers, backend engineers, system engineers, data scientists, and anyone else to build comprehensive user interfaces. You can code with VanJS anywhere, any time, and on any device – even on your smartphone! 👏👏👏

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 3rd-party dependencies, no transpiling, no IDE setups. Adding a line to your script or HTML file is all you need to start coding. VanJS allows you to focus on the business logic of your application, rather than getting bogged down in frameworks and tools.


VanJS is a very thin layer on top of Vanilla JavaScript and DOM, barely enough to make the DOM manipulation and state binding as ergonomic as (if not more than) React, and it delegates most of work to standard browser APIs implemented in native code. As a result, the bundled size of VanJS is just 1.2kB, which is more than 100 times smaller than most popular UI frameworks:

Size comparison

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

TypeScript Support

VanJS provides first-class support for TypeScript. Simply download the corresponding .d.ts file along with your .js file, and 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 to find the right .d.ts file to work with.

Easy to Learn

VanJS puts heavy emphasis on the simplicity of the framework. There are only 4 exported functions in the API and feels a lot like React. Because of that, the walkthrough tutorial is the same as the full API referrence, and can be learned within 1 hour for most developers.

Want to Learn More?

Support & Feedback

🙏 VanJS aims to build a better world by reducing the entry barrier for 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.

We're looking for the 1.0 milestone (commitment to API stability) soon, your precious feedback will be greatly appreciated. You can submit your feedback in our Discussions page.

Contact us: [email protected] / Tao Xin


Ordered chronologically by first contribution:

Continue lendo


Founding Developer of WordPress: I Just Paid for Twitter Blue - Here's Why | HackerNoon
Start WritingNotificationssee moreFounding Developer of WordPress: I Just Paid for Twitter Blue - Here's Why [email protected] 26th 2023 New Story by @techtweeter Too Long; Didn't Read3. I believe in...

Mai 26, às 21:45


Google lança API para exibir extensões na barra lateral do Chrome
O Google está lançando uma nova API chamada Chrome Side Panel, que permite que extensões do Chrome exibam interfaces na barra lateral do navegador. A novidade possibilita que as extensões criem “experiências...

Mai 26, às 21:24

IT Forum

OLX Brasil anuncia novo CEO: Olivier Aizac - IT Forum
Olivier Aizac (esquerda) e Andries Oudshoorn. Foto: Kaique Talles, Divulgação A OLX Brasil anunciou nessa sexta (26) a nomeação do executivo francês Olivier Aizac como Chief Executive Officer (CEO). A...

Mai 26, às 20:20


Concordex Launches Testnet Of Its Concordium-Built Institutional Focused DEX | HackerNoon
Too Long; Didn't ReadConcordex, the first dedicated decentralized exchange (DEX) built on the Concordium blockchain, has officially launched its testnet. The project raised $1.7 million in seed funding from...

Mai 26, às 20:09


Lançamentos do Amazon Prime Gaming em junho de 2023: SteamWorld Dig 2 e mais!
Índice Todos os lançamentos do Amazon Prime Gaming em junho de 2023Jogos gratuitos do Prime Gaming de junho de 2023Mutation NationSengoku 2Over TopSoccer BrawlSteamWorld Dig 2The Super SpyTop...

Mai 26, às 18:34


Implante cerebral da Neuralink já pode ser testado em humanos
Índice O histórico da tentativa da empresa de Musk de testar implante cerebralComo a Neuralink pesquisa a interação entre cérebro e máquina?O que as pesquisas em cérebros humanos na Europa conseguiram?Como...

Mai 26, às 18:33


THE SIX | HackerNoon
Too Long; Didn't ReadONE evening, at twilight, they were assembled in a group, all six of them. Uncle Paul was reading in a large book. He always reads to rest himself from his labors, finding that after work...

Mai 26, às 18:23


The Story-book of Science by Jean-Henri Fabre - Table of Links | HackerNoon
The Story-book of Science by Jean-Henri Fabre - Table of Links [email protected] Long; Didn't ReadThe Story-book of Science by Jean-Henri Fabre is part of the HackerNoon Books Series. Read this book...

Mai 26, às 18:22

IT Forum

Apple, Tesla e Amazon lideram ranking do BCG das mais inovadoras do mundo - IT Forum
Imagem: Shutterstock As empresas de tecnologia mantêm a liderança no ranking das 50 empresas mais inovadoras do mundo realizado pelo Boston Consulting Group (BCG). A Apple ocupa o primeiro lugar da lista...

Mai 26, às 18:15


Kingston lança pendrive com senha para maior segurança
Índice Linha IronKey para dados sensíveis Pendrive Locker +50 Vault Privacy 50 Ironkey Privacy 200Kingston ajuda usuários em nova compra A Kingston Brasil convidou jornalistas e influencers a comparecem ao...

Mai 26, às 16:56