Single Page App HTML Template 2026

Q: How do I build a single page app without React or Vue?

Create one HTML file with all view sections as divs: , , etc. Initially hide all except the default view. Write a showView(id) function that hides all views and shows the one matching the id parameter. Attach click handlers to navigation links that call showView(). For URL state: use window.location.hash — set it on navigation, read it on load and hashchange. Add CSS transitions to the view divs for animated switching. This is the complete architecture for a 5–10 view internal tool or portfolio — no build step, no npm, no framework.

SPA Without a Framework — When It Makes Sense

React and Vue solve real problems at scale — component reuse across hundreds of views, state management across deeply nested trees, and team coordination on large codebases. But for an internal tool with 5 views, a portfolio with client-side filtering, or a dashboard with real-time chart updates, React adds 45KB of runtime, a build pipeline, and a dependency tree that needs weekly security updates. A vanilla JavaScript SPA serves the same user experience without the framework overhead — faster first paint, zero build step, and a codebase any developer can read without framework-specific knowledge.

Routing

Client-Side Hash Routing

Hash-based routing: #home, #dashboard, #settings, #profile. JavaScript hashchange event listener: reads window.location.hash, hides all view divs, shows the matching view. No server configuration required — the server always serves index.html, JavaScript handles the rest. History API routing (pushState) for clean URLs without the hash: intercept link clicks, push to history, render the matching view. Fallback to hash routing for static hosting environments that cannot configure 404 → index.html rewrites.

State

Vanilla State Management

A simple state object: const state = { user: null, theme: 'dark', filters: {} }. A setState function that merges updates and calls render: function setState(updates) { Object.assign(state, updates); render(state); }. Components re-render by reading from state, not storing their own. For async data: fetch returns a promise, setState is called in .then(). For localStorage persistence: JSON.stringify/parse on write/read. This pattern handles 90% of SPA state requirements without Redux, Zustand, or Pinia — add a framework only when this pattern breaks under the complexity of the specific project.

Transitions

Animated View Transitions

CSS-based view transitions: outgoing view fades out and slides left (transform:translateX(-20px), opacity:0), incoming view slides in from the right (transform:translateX(20px) → translateX(0), opacity:0 → 1). JavaScript: add 'leaving' class to outgoing view, wait for transition duration (250ms), swap views, add 'entering' class. The View Transitions API (Chrome 111+, Safari 18+) provides a native alternative: document.startViewTransition(() => { showNewView(); }) — the browser handles the cross-fade automatically with ::view-transition pseudo-elements for CSS control.

PWA

PWA-Ready Manifest and Service Worker

A web app manifest (manifest.json): name, short_name, start_url, display: 'standalone', theme_color, background_color, and icons array. A service worker (sw.js): cache-first strategy for static assets, network-first for API calls. Register in index.html: navigator.serviceWorker.register('/sw.js'). Standalone display mode removes the browser chrome on mobile — the app looks native when added to the home screen. Offline capability: the service worker serves cached pages when the network is unavailable. Cache versioning: update the cache name on each deploy to invalidate stale assets.

SPA Template — Framework vs Vanilla JavaScript Comparison

Consideration	React/Vue SPA	Vanilla JS SPA
Runtime bundle	45KB+ (React) / 34KB+ (Vue)	0KB framework — just your code
Build step	Required (webpack/vite)	None — open HTML in browser
Time to first paint	Slower (JS parse + hydrate)	Faster — no hydration cost
Developer knowledge	Framework-specific	Standard HTML/CSS/JS
Dependency security	100–500 npm packages	Zero dependencies
Best for	Large teams, complex apps	Solo projects, tools, internal apps

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I build a single page app without React or Vue?

Create one HTML file with all view sections as divs:

, etc. Initially hide all except the default view. Write a showView(id) function that hides all views and shows the one matching the id parameter. Attach click handlers to navigation links that call showView(). For URL state: use window.location.hash — set it on navigation, read it on load and hashchange. Add CSS transitions to the view divs for animated switching. This is the complete architecture for a 5–10 view internal tool or portfolio — no build step, no npm, no framework.

How do I handle API calls in a vanilla JavaScript SPA?

Use the Fetch API: fetch('/api/users').then(r => r.json()).then(data => setState({users: data})). For loading states: setState({loading: true}) before the fetch, setState({loading: false, users: data}) in .then(). For error handling: .catch(err => setState({error: err.message})). For authentication: store the JWT in localStorage, attach it to all requests with an Authorization header: headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}. Never store tokens in a JavaScript variable that does not persist across page refreshes — localStorage survives refresh, memory variables do not.

What is the View Transitions API and how do I use it for page transitions?

The View Transitions API (Chrome 111+, Safari 18+) provides native animated transitions between DOM states. Basic use: document.startViewTransition(() => { updateDOM(); }) — the browser automatically cross-fades the old and new state. Custom animations via CSS: ::view-transition-old(root) and ::view-transition-new(root) pseudo-elements control the transition. Named transitions: add view-transition-name CSS property to specific elements for matched transitions (the element appears to morph from old page to new page). Check support: if (!document.startViewTransition) { updateDOM(); return; } — falls back to instant switch on unsupported browsers.

How do I add offline support to a vanilla HTML SPA?

Register a service worker in your HTML: if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js'). In sw.js: on install event, cache all static files (HTML, CSS, JS, fonts). On fetch event: respond from cache if available (cache-first strategy), otherwise fetch from network. Cache versioning: const CACHE_VERSION = 'v2' — increment on each deploy. On activate event: delete caches with old version names. For dynamic data: cache API responses with a network-first strategy (try network, fall back to cache). The result: the SPA loads and operates offline, with stale data shown when the network is unavailable.

How many SPA HTML templates are in UIXDraft?

UIXDraft includes 180+ HTML/CSS templates including SPA-style single-file application layouts: hash-routing navigation systems, animated view switching, local state management patterns, dashboard views, and PWA-ready manifest files. One $35 purchase, commercial licence.

HTML Templates for Single Page Applications