Technical
Documentation

Master the micro.js standalone framework. A high-performance, Zero-Reload engine designed for modern web exploration and instant content delivery.

Architecture

At its core, the framework uses a Fetch-Parse-Swap lifecycle. It overrides default browser navigation to provide an app-like feel while maintaining the simplicity of static HTML.

  1. Intercept: The global click listener catches <a> interactions.
  2. Fetch: Target HTML is retrieved asynchronously via the Fetch API.
  3. Parse: The raw HTML response is converted into a DOM Document.
  4. Swap: The content container (<main>) is updated with new content.
  5. Sync: Page title, body classes, and container classes are synchronized.

API Reference

The SPA object provides total control over the navigation state.

Method Description
init() Initializes framework listeners and security checks.
navigate(url, push) Performs a programmatic SPA navigation.
updateActiveLinks() Refreshes .active status on navigation links.

Usage Example

import SPA from './assets/js/micro.js';
SPA.init();

Event System

Integrate with navigation lifecycle events to build dynamic UI components like progress bars or status badges.

window.addEventListener('spa:navigated', (e) => {
    const { url, time } = e.detail;
    console.log(`Navigated to ${url}`);
});

Security & CORS

Standard security policies apply. SPA navigation requires a local server context.

PROTOCOL ERROR

Navigation will fallback to standard reload if running on the file:// protocol. Use a local server (Vite/LiveServer) for the full SPA experience.