Vicinity World Framework (vwf) is built on VanJS - an ultra-lightweight (1.5KB) reactive JavaScript framework. Unlike React, Vue, or Angular, vwf has zero dependencies and requires no build tools to get started.

• ✨ Direct DOM manipulation (no virtual DOM)
• ⚡ True reactivity with van.state()
• 🎯 Simple, predictable patterns
• 📦 Import as ES6 modules - no bundler needed

The simplest vwf component is a function that returns DOM elements. Here's your first component:

import van from 'vanjs-core';
const { div, h1 } = van.tags;

// Your first component!
export const component = () => {
  return div(
    h1('Hello, VWF!')
  );
};

Breaking it down: van.tags gives you functions for creating HTML elements. Each function (div, h1, p, etc.) creates that element.

vwf uses file-based routing. Create a file and it becomes a route automatically:

// File: /demo/src/app/hello/page.js
import van from 'vanjs-core';
const { div, h1, p } = van.tags;

export const component = () => {
  return div(
    { class: 'max-w-4xl mx-auto p-8' },
    h1({ class: 'text-3xl font-bold mb-4' }, 'Hello, VWF!'),
    p({ class: 'text-smoke' }, 'This is your first page.')
  );
};

• page.js = A route that renders
• layout.js = Wraps child pages (optional)
• component export = Must be named "component"

Start the development server and see your page live:

# In your terminal
cd demo
npm run dev

# Open browser to:
https://dev.pakasa.world/demo/hello