VanillaJS Router - Live Demo

🏠 Home ℹ️ About 📊 Dashboard 👤 User Profile 🛍️ Products 🔒 Protected Area

📍 Anchor Links (native scrolling): Section 1 Section 2 Section 3 Section 4

📍 Current Route

Loading...

📋 Navigation Status

Ready

📊 Typed Parameters

{}

📜 Scroll Position

0, 0

Welcome to VanillaJS Router Demo!

Use the navigation buttons above to test all features. This router demonstrates:

UI-agnostic design - No DOM dependencies or assumptions
Event-based architecture - Subscribe to router events for UI updates
Hash-bang routing - URLs use #!/ prefix
Parameter arrays - All params are consistently arrays
Type coercion - Automatic string→number/boolean conversion
Async guards - Navigation can be cancelled or delayed
Scroll restoration - Positions remembered between routes
Anchor coexistence - Native #section links work alongside routing

🎯 NEW Event System: The router now uses a clean event system instead of DOM manipulation:

// Subscribe to navigation status updates
MyRouter.onStatus((status, type, context) => {
  console.log(status); // "🔄 Navigating...", "✅ Navigation complete"
});

// Subscribe to scroll events
MyRouter.onScroll((scrollData) => {
  console.log(scrollData); // { type: 'update', winX: 0, winY: 100, ... }
});

📜 Enhanced Scroll Test Area

Scroll down in this area, then navigate to other pages and back. The router remembers your scroll position!

📍 Demo Section 1 - UI-Agnostic Architecture

The router is now completely decoupled from UI concerns. Instead of assuming DOM elements exist, it emits events:

// OLD: Router directly manipulated DOM
updateNavStatus('✅ Navigation complete');

// NEW: Router emits events, application handles UI
MyRouter.onStatus((status, type) => {
  // Application decides how to display status
  document.getElementById('status').textContent = status;
});

💡 Benefits: This makes the router reusable across different UI frameworks and eliminates assumptions about HTML structure.

📍 Demo Section 2 - Custom Scroll Handling

Applications can now add custom scroll data through the event system:

MyRouter.onScroll((scrollData) => {
  if (scrollData.type === 'capture') {
    // Add custom scroll positions (e.g., specific containers)
    const customContainer = document.getElementById('my-container');
    scrollData.customY = customContainer.scrollTop;
  }

  if (scrollData.type === 'restore') {
    // Restore custom scroll positions
    if (scrollData.customY !== undefined) {
      document.getElementById('my-container').scrollTop = scrollData.customY;
    }
  }
});

📍 Demo Section 3 - Event-Driven Status Updates

The router provides rich status information through events:

MyRouter.onStatus((status, type, context) => {
  // status: The human-readable status message
  // type: 'info', 'loading', 'success', 'error'
  // context: { route, prevRoute } - current navigation context

  const statusEl = document.getElementById('nav-status');
  statusEl.textContent = status;
  statusEl.className = `status-value ${type}`;
});

🎨 Dynamic Styling: Applications can apply different CSS classes based on the status type, creating rich visual feedback.

📍 Demo Section 4 - Production Readiness

This event-driven architecture makes the router truly production-ready:

Framework agnostic - Works with React, Vue, Angular, or vanilla JS
No DOM assumptions - Can run in Node.js environments for SSR
Testable - Easy to unit test without DOM manipulation
Extensible - Applications can add custom data to events

The clean separation of concerns makes the router reusable across different projects and teams.

💭 Scroll to the very bottom to test the full scroll restoration effect!