Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including choreographer-router with all npm packages installed. Try it out:

var choreographerRouter = require("choreographer-router")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

choreographer-router v1.0.2

Client side router for Web Components using URI Templates

choreographer-router 💃🕺

A client-side router for web apps using Web Components and URI Templates.


import { Choreographer, Router, UriTemplate }
  from 'choreographer-router'

const choreographer = new Choreographer({
  stage: document.body,
  scenes: [
    // Static route renders the <app-signup> custom element
    ['/signup', 'app-signup'],
    // Pass the `email` query string parameter as dataset property
    ['/login{?email,}', 'app-login'],
    // Redirect to a URL
    ['/account', new URL('/account/profile', location)],
    // Catch-all fallback route showing a custom element
    ['/{pathname}', 'app-404']


Class: UriTemplate

Code: source/uri-template.js


URI Templates (RFC6570) implementation.

Class: Router

Code: source/router.js

The History API and link click trapping. The popstate event is fired whenever a navigation occurs.

Class: Choreographer({ stage, scenes })

Code: source/choreographer.js

Associates Web Component element names with specific routes. Creates and removes Web Components (custom HTML elements) as scenes on the stage.

  • stage is an container HTML element where the active scene element is appended.
  • scenes is an Array or other iterable object whose elements are key-value pairs. Each key is a URI Template of a route. Its value is the type of content to perform on the stage.

Scene content can be:

  • An absolute URL instance to which to redirect.
  • A tag name to render, for example a custom element. If a route change renders the same tag name as the current scene, only its dataset attributes are updated without recreating the entire scene. Use the attributeChangedCallback hook of Custom Elements to handle these changes.
  • A callback function to invoke with arguments pattern and params. The current stage will be cleared.

See Also


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free