Narwhals Prolong Mischief
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


    UI-Router State Visualizer and Transition Visualizer

    Try the Demo plunker

    Image of Visualizer


    Visualizes the state tree and transitions in UI-Router 1.0+.

    This script augments your app with two components:

    1. State Visualizer: Your UI-Router state tree, showing the active state and its active ancestors (green nodes)

      • Clicking a state will transition to that state.
      • If your app is large, state trees can be collapsed by double-clicking a state.
      • Supports different layouts and zoom.
    2. Transition Visualizer: A list of each transition (from one state to another)

      • Color coded Transition status (success/error/ignored/redirected)
      • Hover over a Transition to show which states were entered/exited, or retained during the transition.
      • Click the Transition to see details (parameter values and resolve data)


    The Visualizer is a UI-Router plugin. Register the plugin with the UIRouter object.

    Locate the Plugin

    • Using a <script> tag

      Add the script as a tag in your HTML.

      <script src="//"></script>

      The visualizer Plugin can be found (as a global variable) on the window object.

      var Visualizer = window['ui-router-visualizer'].Visualizer;
    • Using require or import (SystemJS, Webpack, etc)

      Add the npm package to your project

      npm install --save ui-router-visualizer
      • Use require or ES6 import:
      var Visualizer = require('ui-router-visualizer').Visualizer;
      import { Visualizer } from 'ui-router-visualizer';

    Register the plugin

    First get a reference to the UIRouter object instance. This differs by framework (AngularJS, Angular, React, etc. See below for details).

    After getting a reference to the UIRouter object, register the Visualizer plugin

    var pluginInstance = uiRouterInstance.plugin(Visualizer);


    Getting a reference to the UIRouter object

    Angular 1

    Inject the $uiRouter router instance in a run block.

    // inject the router instance into a `run` block by name$uiRouter) {
     var pluginInstance = $uiRouter.plugin(Visualizer);

    Angular 2

    Use a config function in your root module's UIRouterModule.forRoot(). The router instance is passed to the config function.

    import { Visualizer } from "ui-router-visualizer";
    export function configRouter(router: UIRouter) {  
      var pluginInstance = router.plugin(Visualizer);
      imports: [ UIRouterModule.forRoot({ config: configRouter }) ]

    React (Imperative)

    Create the UI-Router instance manually by calling new UIRouterReact();

    var Visualizer = require('ui-router-visualizer').Visualizer;
    var router = new UIRouterReact();
    var pluginInstance = router.plugin(Visualizer);

    React (Declarative)

    Add the plugin to your UIRouter component

    var Visualizer = require('ui-router-visualizer').Visualizer;
    render() {
      return <UIRouter plugins=[Visualizer]></UIRouter>




    npm i ui-router-visualizer

    Downloadsweekly downloads








    last publish


    • avatar