Official Documentation

FlexRoute.js

The ultra-fast, zero-dependency conditional routing engine for modern JavaScript applications.

Star 18.7k v2.4.1

Route First

Describe route behavior as compact rules that stay readable as your app grows.

Data Aware

Dispatch loaders, metadata, and transitions through one predictable execution graph.

Framework Ready

Use it with vanilla JavaScript, React, Vue, Svelte, or any custom renderer.

Installation

Install in seconds

FlexRoute.js ships as a tiny ESM package with full TypeScript definitions and no required runtime adapter.

terminal

$ npm install flexroute
$ pnpm add flexroute

Quick Start

Create your first route graph

Define routes as plain objects, attach data loaders, and let the engine resolve each navigation with deterministic priority.

src/router.js ESM

import { FlexRoute } from 'flexroute';

const router = new FlexRoute({
  mode: 'history',
  base: '/',
  routes: [
    {
      path: '/',
      name: 'dashboard',
      load: async () => ({
        title: 'Overview',
        metrics: await fetchMetrics()
      })
    },
    {
      path: '/projects/:id',
      name: 'project.detail',
      match: ({ params }) => Boolean(params.id),
      load: ({ params }) => fetchProject(params.id)
    }
  ]
});

router.start(document.querySelector('#app'));

API Reference

Core primitives

new FlexRoute(options)

Creates a route engine with mode, base path, route definitions, and lifecycle hooks.

router.navigate(target)

Moves to a named route, absolute path, or structured location object.

router.current()

Returns the current route state, resolved params, query values, and loaded data.

router.on(event, handler)

Subscribes to lifecycle events such as beforeLoad, afterLoad, and error.

Advanced Settings

Tune route execution

Advanced options help teams balance latency, cache strategy, and error recovery across complex application surfaces.

const router = new FlexRoute({
  prefetch: 'intent',
  cache: {
    strategy: 'stale-while-refresh',
    maxAge: 30_000
  },
  transitions: {
    timeout: 250,
    restoreScroll: true
  }
});

FAQ

Common questions

Does FlexRoute.js require a specific UI framework?

No. The core package is renderer agnostic and works with any component model or vanilla DOM rendering.

Can route data be loaded asynchronously?

Yes. Loaders may return plain values or promises, and resolved data is attached to the current route state.

Is TypeScript supported?

Yes. Route names, params, loader output, and event payloads are designed for strong editor inference.