Curi

A JavaScript router for single-page applications

import { prepareRoutes, createRouter, announce } from "@curi/router";
import { browser } from "@hickory/browser";

let routes = prepareRoutes([
  { name: "Home", path: "" },
  { name: "About", path: "about" },
  { name: "Catch All", path: "(.*)" }
]);

let router = createRouter(browser, routes, {
  sideEffects: [
    announce(({ response }) => {
      return `Navigated to ${response.location.pathname}`;
    })
  ]
});

What is Curi?

Accessible

Curi helps make your application more accessible with focus management and navigation announcements.

Learn more.

Asynchronous

Routes can have asynchronous actions, like code splitting and data fetching. When the route matches, the application will not re-render until the route's async actions complete.

Learn more.

Flexible

You choose how to render. Curi is a Javascript router, not a React router, a Vue router, etc.

Curi provides official support for some UI renderers, but you can also interface it to work with your renderer of choice.

SSR Friendly

Server-side rendering with Curi is pain free. Thanks to Curi's async model, data loading with SSR doesn't require double renders.

Curi also provides a static package for pre-rendering static HTML pages.

Resources

Guides

Want to learn more? Check out the getting started guide.

API Documentation

Each package's API is well documented so you can spend less time wondering and more time building.

Examples

Want to see some example applications? There are many examples to choose from, using a few different UI renderers.

Tutorials

Do you learn by doing? Curi provides a few tutorials to help you get started.