EN | FR
Not just a template. A standards-first web foundation.
BrowserUX Starter is a collection of front-end starter templates built around native web standards: PWA, Web Components, semantic HTML, native CSS, browser APIs, and controlled service workers.
Project website | Documentation | Changelog
npm create browserux@latest- Node.js
20or>=22
We recommend using an active LTS release.
The CLI asks for a project name, a template, and whether to use TypeScript. It then scaffolds the selected starter and prints the next commands.
BrowserUX Starter is not trying to replace Next, Nuxt, Astro, Remix, or any full-stack application framework. It answers a different need: a standards-first front-end foundation for people who want to stay close to the browser platform, keep control of their architecture, and ship static sites or client-side apps without adopting a larger framework layer.
React and Vue are available as UI-layer templates, not as a shift away from the native web. They sit on top of the same foundation: PWA support, semantic HTML, native CSS, browser APIs, Web Components, and explicit service worker control.
Choose raw or vite-vanilla if you want to build without React or Vue while keeping the BrowserUX UI elements. Choose vite-react or vite-vue if you want a modern SPA with routing and tests while keeping the same standards-first base.
- 📱 PWA: Web App Manifest, Service Worker, Cache API, offline fallback, install flow.
- 🧩 Web Components: Custom Elements, Shadow DOM, slots, HTML attributes, native lifecycle.
- 🎨 Native CSS: CSS variables, media queries, semantic HTML elements, native user interface patterns, user preferences such as color scheme.
- 🌐 Browser APIs: Web Share API,
beforeinstallprompt, View Transitions API,localStorage, and progressive enhancement. - 📝 Semantic HTML: native elements and browser behavior before proprietary abstractions.
| Logo | Template | What it is for | Stack |
|---|---|---|---|
 |
raw |
Learning template for native PWA internals with pure HTML/CSS/JS, a hand-written service worker, and no build step. | HTML, CSS, Vanilla JS, Cache API |
 |
vite-vanilla |
Static multi-page app with Vite, Workbox, optimized assets, sitemap, and full SW control. | Vanilla JS or TS, Vite, Workbox, MPA |
 |
vite-react |
React 19 SPA with React Router v7, data loaders, tests, and BrowserUX Web Components. | React 19, React Router v7, Vite, Workbox, Vitest |
 |
vite-vue |
Vue 3 SPA with Vue Router 4, Composition API, tests, and BrowserUX Web Components. | Vue 3, Vue Router 4, Vite, Workbox, Vitest |
- 📴 Offline-ready PWA: manifest, icons, service worker registration,
offline.html, and install/update UI. - ⚙️ Explicit service worker control:
injectManifest, Workbox strategies, static asset injection throughsw-assets.js. - 🧩 Native UX components: theme switcher, share button, and PWA UI built as Web Components.
- ⚡ Vite production pipeline: image optimization, AVIF/WebP generation, preload hints, sitemap and robots generation.
- 🎨 UX-first CSS base:
browserux.csstokens, reset, accessibility utilities, native user interface patterns, dark mode variables, and project-level overrides. - 🛠️ Developer experience: CLI scaffolding, optional TypeScript for Vite templates, tests for React/Vue templates and CLI utilities.
Use BrowserUX Starter when you want to build a fast, accessible, installable front-end while staying close to the native browser platform.
- Static websites and landing pages that need a clean production base.
- Lightweight web apps that should work offline or be installable.
- Front-end projects where you want explicit service worker and cache control.
- Teams that want reusable UX primitives without adopting a full-stack framework.
- Learning projects for PWA, service workers, Web Components, and native browser APIs.
BrowserUX Starter is intentionally front-end first. It is not meant to provide server rendering, backend routing, database access, authentication flows, API handlers, or full-stack deployment conventions out of the box.
If your project depends on SSR, server components, complex backend workflows, or framework-managed data loading across server and client, a full-stack framework may be a better fit.
Depending on the selected template, the CLI gives you a ready-to-edit project with:
- PWA manifest, icons, service worker registration, and offline page.
- BrowserUX CSS base and native UI components.
- Web Components for theme switching, native sharing, and PWA install/update UI.
- Vite configuration with Workbox, image optimization, preload hints, sitemap, and robots generation.
- Optional TypeScript setup for Vite templates.
- Tests for React/Vue templates and CLI utilities.
- Choose
rawfor learning native PWA internals with pure HTML/CSS/JS, no tooling, and direct Cache API usage. - Choose
vite-vanillafor a static multi-page site with Vite and no React/Vue. - Choose
vite-reactfor a React 19 SPA with React Router v7 and tests. - Choose
vite-vuefor a Vue 3 SPA with Vue Router 4 and tests.
| Feature | raw |
vite-vanilla |
vite-react |
vite-vue |
|---|---|---|---|---|
| Build tool | - | Vite | Vite | Vite |
| UI framework | - | - | React 19 | Vue 3 |
| App model | Learning/static pages | MPA | SPA | SPA |
| Routing | Static | Static | React Router v7 | Vue Router 4 |
| Service worker | Manual | Workbox injectManifest |
Workbox injectManifest |
Workbox injectManifest |
| PWA/offline | Yes | Yes | Yes | Yes |
| Image optimization | - | Yes | Yes | Yes |
| SEO files | Manual | Generated | Generated | Generated |
| Web Components | BrowserUX components | BrowserUX components | BrowserUX components | BrowserUX components |
| Tests | - | - | Vitest | Vitest |
| TypeScript option | - | Yes | Yes | Yes |
- Introduction: philosophy, prerequisites, overview
- Getting Started: installation via CLI, first app in minutes
- Configuration:
vite.config.mjsfrom A to Z - View Transitions: concept, graceful degradation, implementations per template
- HTML
<head>Anatomy: line-by-line explanation of each tag and its role
- Overview: comparison table and selection criteria
- raw: pure HTML, manual service worker, no build tool
- vite-vanilla: static MPA, total service worker control
- vite-react: React 19 SPA with React Router v7
- vite-vue: Vue 3 SPA with Vue Router 4
- Overview: native APIs only philosophy
- browserux-theme-switcher: light/dark toggle
- browserux-share-button: native sharing with fallback modal
- browserux-pwa-ui: PWA installation and update UI
- Overview: build pipeline and execution order
- vite-plugin-image-optimize: compression, AVIF and WebP generation
- vite-plugin-preload-assets: critical asset preloading
- vite-plugin-seo-files: automatic sitemap and robots.txt generation
- vite-plugin-inject-sw-assets: static asset injection into the service worker
- Overview: what is a PWA, why offline-first
- Service Worker:
generateSWvsinjectManifest - Caching Strategies: CacheFirst, NetworkFirst, per asset type
- Offline Support:
offline.html, fallbacks, degraded behavior - Web App Manifest: icons, theme, installation
- Overview: stack, scope, conventions
- Components: UI component tests
- Pages: page and routing tests
- Build Pipeline Validation: how BrowserUX validates plugin-driven production builds
- CLI:
create-browseruxutility tests
- Static Hosts: Netlify, Vercel, GitHub Pages, Apache
- create-browserux: options, behavior, excluded files
- Contributing: report a bug, suggest an improvement, submit a PR
- Changelog