by ui-router

ui-router / visualizer

UI-Router state visualizer and transition visualizer

201 Stars 36 Forks Last release: about 1 month ago (7.2.1) MIT License 254 Commits 40 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.
  1. 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


Locate the Plugin

  • Using a

Add the script as a tag in your HTML.


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

  var Visualizer = window['@uirouter/visualizer'].Visualizer;
  • Using
    (SystemJS, Webpack, etc)

Add the npm package to your project

  npm install @uirouter/visualizer
  • Use
    or ES6
  var Visualizer = require('@uirouter/visualizer').Visualizer;
  import { Visualizer } from '@uirouter/visualizer';

Register the plugin

First get a reference to the

object instance. This differs by framework (AngularJS, Angular, React, etc. See below for details).

After getting a reference to the

object, register the
var pluginInstance = uiRouterInstance.plugin(Visualizer);


Configuring the plugin

You can pass a configuration object when registering the plugin. The configuration object may have the following fields:

  • state
    : (boolean) State Visualizer is not rendered when this is
  • transition
    : (boolean) Transition Visualizer is not rendered when this is
  • stateVisualizer.node.label
    : (function) A function that returns the label for a node
  • stateVisualizer.node.classes
    : (function) A function that returns classnames to apply to a node


The labels for tree nodes can be customized.

Provide a function that accepts the node object and the default label and returns a string:

function(node, defaultLabel) { return "label"; }

This example adds

to future states. Note:
contains a reference to the state declaration object.
var options = {
  stateVisualizer: {
    node: {
      label: function (node, defaultLabel) {
        return'.**') ? defaultLabel + ' (future)' : defaultLabel;

var pluginInstance = uiRouterInstance.plugin(Visualizer, options);


The state tree visualizer can be configured to add additional classes to nodes. Example below marks every node with angular.js view with

var options = {
  stateVisualizer: {
    node: {
      classes(node) {
        return Object.entries(node.views || {}).some((routeView) => routeView[1] && routeView[1].$type === 'ng1')
          ? 'is-ng1'
          : '';

var pluginInstance = uiRouterInstance.plugin(Visualizer, options);

Getting a reference to the

Angular 1

Inject the

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

. The router instance is passed to the config function.
import { Visualizer } from "@uirouter/visualizer";


export function configRouter(router: UIRouter) { var pluginInstance = router.plugin(Visualizer); }


@NgModule({ imports: [ UIRouterModule.forRoot({ config: configRouter }) ] ...

React (Imperative)

Create the UI-Router instance manually by calling

new UIRouterReact();
var Visualizer = require('@uirouter/visualizer').Visualizer;
var router = new UIRouterReact();
var pluginInstance = router.plugin(Visualizer);

React (Declarative)

Add the plugin to your

var Visualizer = require('@uirouter/visualizer').Visualizer;

... render() { return }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.