Aiga Docs

Interactive Demos

Try Aiga's features hands-on with interactive playgrounds.

Explore Aiga's key features through interactive demos. Each demo simulates real framework behavior to help you understand the architecture.

Sandbox Tier Explorer

Switch between the 4 isolation tiers to compare their features, overhead, and usage patterns. The capability matrix shows exactly what each tier provides.

Interactive Sandbox Tier Explorer

Direct Mount~0 MB
  • No isolation — shares host window/document
  • Fetches HTML, parses via DOMParser (XSS-safe)
  • Scripts run in host context
  • Error boundary catches uncaught errors
  • CORS detection with friendly error messages

Usage:

<!-- Trusted internal module, no overhead --> <aiga-app src="https://header.internal/" sandbox="none" />
Capabilitynonelightstrictremote
CSS Isolation✗✓✓✓
JS Isolation✗~✓✓
Storage Isolation✗✗✓✓
Cookie Isolation✗✓✓✓
Overlay Support✗✓✓✗
iframe Pool✗✗✓✗
Keep-Alive✓✓✓✓
RPC Channel✗✗✓✓

RPC Channel Simulator

Simulate typed RPC calls between a host application and a sub-app. Try calling methods, observe the message flow, and see what happens on timeout.

RPC Channel Simulator

Simulate typed RPC calls between host and sub-app:

// Host code const rpc = RpcChannel.forApp( iframe.contentWindow, "https://sub-app.example.com", 10_000 // timeout ); const result = await rpc.call("greet", "World"); // Sub-app code rpc.expose("greet", (name) => { return `Hello, ${name}!`; });

Message Log:

Click "Call Method" to start...

Router Playground

Enter URL paths and see how the router matches them against route configurations. Test dynamic parameters, nested routes, and 404 handling in both history and hash modes.

Router Playground

example.com
Matched!strict

App: dashboard-app

Route Configuration:

const router = new Router({ mode: 'history', routes: [ { path: '/dashboard', app: { src: '...', sandbox: 'strict' } }, { path: '/settings', app: { src: '...', sandbox: 'light' } }, { path: '/users/:id', app: { src: '...', sandbox: 'strict' } }, { path: '/admin', children: [ { path: '/users', app: { src: '...' } }, { path: '/config', app: { src: '...' } }, ] }, ], notFound: { src: '/404.html' }, });

Overlay Handling Demo

See how overlays work differently in Light (teleportation) and Strict (iframe promotion) modes. Toggle overlays to observe the detection and rendering flow.

Overlay Handling Demo

In light mode, overlays are detected via MutationObserver and teleported outside Shadow DOM to an overlay layer at the top of the document.

Detection signals (OV-13):

  • role="dialog" / role="tooltip" / role="alertdialog"
  • Class: modal, overlay, popup, popover, drawer, dialog...
  • position:fixed + z-index > 1000
  • Attribute changes watched: class, role, style

Shadow DOM Container

Shadow DOM

Sub-app content: buttons, forms, etc.

Test Scenarios

Comprehensive test plan covering 91 scenarios across all subsystems.

Cross-Origin Apps

Load cross-origin React and Svelte apps side by side in strict sandbox iframes.

On this page

Sandbox Tier ExplorerRPC Channel SimulatorRouter PlaygroundOverlay Handling Demo