Vanativ — Native Web Development

What is Vanativ?

Web Components

Build encapsulated, reusable UI elements with Custom Elements and Shadow DOM — no library required.

Modern CSS

Variables, nesting, container queries — use the platform's styling power directly.

Fetch API

Native HTTP client with streaming, retry logic, and interceptors. No Axios needed.

Client Router

SPA-style routing with the History API. Lightweight, declarative, zero dependencies.

Reactive State

State management powered by JavaScript Proxy. Subscribe, react, stay in control.

No Build Required

Works directly in the browser. Vite optional — for DX, not dependency.

Get Started

          # Clone and install
git clone https://github.com/idsquare/vanativ.git
cd vanativ
npm install

# Start dev server
npm run dev

# Or create a new project
npm create vanativ@latest my-app
        

What's Inside

Components UserCard, ProductCard, Counter, Accordion, ThemeSwitcher, Modal
Helpers DOM manipulation, animation, forms, string utilities
Utilities HTTP client, client-side router, reactive store
Styles Modern CSS with custom properties, dark mode, responsive design
Testing Playwright E2E tests with full examples
Benchmarks Performance comparison vs React, Vue, SolidJS, Svelte

Live Examples

01 — Basic Component Your first custom element 02 — Counter Stateful component with events 03 — User Card Shadow DOM profile card 04 — Form Handling Native validation and form state 05 — API Integration Fetch & stream examples 06 — Router Client-side routing without framework 07 — State Management Reactive store patterns 08 — Todo App Complete application example 09 — External CSS Styling strategy with separate CSS 10 — Helper Utilities Reusable utility functions 11 — Accordion Accessible disclosure widget 12 — Modal Dialog Native dialog element and focus management 13 — SSR + Declarative Shadow DOM Server-rendered HTML with encapsulated styles 14 — Worker User Pool Background processing with a worker pool 15 — Multi-User Chat Real-time chat with WebSocket and Web Workers

Benchmarks

Bundle Size

Compare gzipped output across frameworks. Vanativ ships the least JavaScript.

Load Performance

First Contentful Paint, Time to Interactive — measured with Lighthouse.

Runtime Speed

10, 1000, and 5000 components — render time and memory usage.

          # Run benchmarks
npm run benchmark:setup
npm run benchmark
npm run benchmark:report
        