![\"Tina4\"](\"https://tina4.com/logo.svg\"){kind=logo}
\n\n \n
\n 1.5KB core gzipped. Reactive frontend. Signals. Web Components. Zero dependencies.\n
\n\n\n ![\"npm\"](\"https://img.shields.io/npm/v/tina4js?color=7b1fa2&label=npm\")
![\"Tests\"](\"https://img.shields.io/badge/tests-303%20passing-brightgreen\"){kind=icon}
![\"Core](\"https://img.shields.io/badge/core-1.5KB%20gzipped-blue\"){kind=icon}
![\"Zero](\"https://img.shields.io/badge/dependencies-0-brightgreen\"){kind=icon}
![\"Docs\"](\"https://img.shields.io/badge/docs-tina4.com%2Fjs-7b1fa2\"){kind=icon}
\n Documentation •\n Quick Start •\n What's Included •\n Live Gallery •\n tina4.com\n
\n\n---\n\n## Quick Start\n\n```bash\n# Create a project\nnpx tina4js create my-app\n\n# With optional CSS framework\nnpx tina4js create my-app --css\n\n# With PWA support\nnpx tina4js create my-app --css --pwa\n\n# Run it\ncd my-app && npm install && npm run dev\n```\n\nOpen http://localhost:3000 -- your app is running.\n\n---\n\n## What's Included\n\nEvery module is built from scratch -- no node_modules bloat, no third-party runtime dependencies.\n\n| Module | Gzipped | What it does |\n|--------|---------|-------------|\n| **Core** | 1.51 KB | Signals, computed, effect, batch, html tagged templates, Tina4Element web components |\n| **Router** | 0.12 KB | Client-side SPA routing, path params (`{id}`), guards, history/hash mode |\n| **API** | 1.49 KB | Fetch client with auth (Bearer + formToken + FreshToken rotation), interceptors, per-request headers/params |\n| **WebSocket** | 0.91 KB | Signal-driven status, auto-reconnect with exponential backoff, pipe() to signal, JSON auto-parse |\n| **PWA** | 1.16 KB | Service worker + manifest generation, cache strategies (network-first, cache-first, stale-while-revalidate) |\n| **SSE** | 1.33 KB | Server-Sent Events and NDJSON streaming, dual-mode (EventSource + fetch), reactive status signal |\n| **Storage** | 1.67 KB | `persist()` wrapper for signals: survives a page refresh, opt-in per signal, SSR-safe, with loud warnings on credential-shaped keys |\n| **Debug** | 5.11 KB | Dev overlay (Ctrl+Shift+D) -- signals, components, routes, API panels |\n\n**303 tests across 14 test files. Zero dependencies. Under 3KB for the full core.**\n\nFor full documentation visit **[tina4.com/javascript](https://tina4.com/js)**.\n\n---\n\n## Install\n\n```bash\nnpm install tina4js\n```\n\nOr use via CDN with zero build tools:\n\n```html\n\n```\n\n---\n\n## Getting Started\n\n### 1. Create a project\n\n```bash\nnpx tina4js create my-app --css\ncd my-app && npm install\n```\n\nThis creates:\n\n```\nmy-app/\n index.html # Entry point\n package.json # Dependencies: tina4js, vite, typescript\n src/\n main.ts # App entry -- imports routes, starts router\n routes/\n index.ts # Route definitions\n pages/\n home.ts # Home page handler\n components/\n app-header.ts # Example web component\n public/\n css/\n default.css # Default styles\n```\n\n### 2. Create a signal\n\n```ts\nimport { signal, computed, html } from 'tina4js';\n\nconst count = signal(0);\nconst doubled = computed(() => count.value * 2);\n\nconst view = html`\n \n ${count}\n \nDoubled: ${doubled}
\n`;\n\ndocument.body.append(view);\n```\n\n### 3. Create a route\n\n```ts\nimport { route, router, html } from 'tina4js';\n\nroute('/', () => html`