A tiny weather app
🚀 Demo ● 📊 Results

This is a simple weather app, built in VanJS (as well as also 10 other frontend frameworks) in order to review, compare and benchmark frontend web frameworks.

• 🌦️ Live weather conditions
• 📅 7-day weather forecast
• 🔍 City search functionality
• 📍 Geolocation support
• 💾 Persistent location storage
• 📱 Responsive design
• ♿ Accessible interface
• 🎨 Multi-theme support
• 🧪 Fully unit tested
• 🌐 Internationalized

Task	Status
Test - Executes all e2e and unit tests
Lint - Verifies code style and quality
Build - Builds and deploys the app

First, follow the repo setup instructions. Then cd apps/vanjs and use the following commands:

npm run dev    # Start dev server (vite --port 3000)
npm test       # Run tests
npm run lint   # Run lint checks
npm build      # Build for production (vite build)
npm start      # Serve built prod app (from ./dist)

For troubleshooting, use npm run verify from the root of the project.

The main.js uses VanJS's hyperscript syntax with const { div, h1, p } = van.tags to create DOM elements functionally without JSX or templates.

VanJS provides reactive state through van.state('initial') which returns an object with a .val property. Changes to state.val automatically trigger re-renders of dependent DOM.

Components are plain JavaScript functions that return DOM elements. The WeatherApp class demonstrates organizing complex UI logic while maintaining VanJS's functional approach.

Unlike virtual DOM frameworks, VanJS directly manipulates the real DOM, making it extremely lightweight (~1KB) while maintaining reactivity through state bindings.

No templates, JSX, or HTML strings - everything is created through JavaScript functions, providing full IDE support and type safety for DOM creation.

VanJS is an ultra-tiny library for writing reactive UIs with plain functions. No build step, no virtual DOM, just direct DOM manipulation with reactivity built in. It’s surprisingly powerful for its size and is good for small apps or embedded widgets. Think of it as a modern alternative to jQuery that actually plays nice with modern JS.

VanJS is impressively tiny - just 1KB of runtime with zero dependencies. It's basically "what if we took the reactive parts of modern frameworks and stripped away everything else?" The result is surprisingly elegant for simple applications, but you'll quickly bump into its limitations.

The functional approach is refreshing after dealing with classes and complex component lifecycles. van.state(initialValue) creates reactive state, van.tags.div() creates DOM elements, and everything just works. Our weather app's temperature display is literally van.tags.span(temperature) - when temperature changes, the DOM updates automatically.

But the simplicity comes with trade-offs. There's no component abstraction beyond functions, no templating system, no event system. You're essentially building a reactive version of vanilla DOM manipulation. It works for basic interactivity but gets unwieldy fast.

The DOM creation syntax is functional but verbose: van.tags.div({class: "weather-card"}, van.tags.h2("Weather")). Coming from JSX or template languages, it feels like writing assembly code. You'll miss the declarative nature of modern frameworks.

VanJS works well for simple enhancements where you need just a touch of reactivity without the framework overhead. I've used it for mini apps, like raid-calculator. But for anything substantial, you'll spend more time fighting the limitations than building features. It's an interesting experiment in minimalism, but modern frameworks exist for good reasons.

Since the weather app is very simple, it may be helpful to see a more practical implementation of a VanJS app. So, checkout:

RAID Calculator - RAID array capacity and fault tolerance
🐙 Get it on GitHub at github.com/Lissy93/raid-calculator
🌐 View the website at raid-calculator.as93.net

Weather-Front is licensed under MIT © Alicia Sykes 2025.
View Attributions for credits, thanks and contributors.