UI-Router state visualizer and transition visualizer
Alternatives To Visualizer
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Transition Group9,77147,7154,6862 months ago43August 01, 2022218otherJavaScript
An easy way to perform animations when a React component enters or leaves the DOM
React Native Animatable9,4982,13024921 days ago23October 13, 2019209mitJavaScript
Standard set of easy to use animations and declarative transitions for React Native
React Burger Menu4,8629401152 months ago134May 23, 20227mitJavaScript
:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
4 years ago115
React Flip Toolkit3,772414119 days ago216September 04, 202247mitTypeScript
A lightweight magic-move library for configurable layout transitions
React Overdrive3,00010622 years ago10May 16, 201818mitJavaScript
Super easy magic-move transitions for React apps
React Awesome Slider2,60142136 months ago45February 21, 202076mitJavaScript
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
React Router Transition2,471458472 years ago20January 28, 202125mitJavaScript
painless transitions built for react-router, powered by react-motion
React Native Shared Element1,963592 months ago27January 24, 20227mitTypeScript
Native shared element transition "primitives" for react-native 💫
Router51,70712679a year ago148March 19, 202094mitTypeScript
Flexible and powerful universal routing solution
Alternatives To Visualizer
Select To Compare

Alternative Project Comparisons

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="//[email protected]"></script>

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

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

    Add the npm package to your project

    npm install @uirouter/visualizer
    • Use require or ES6 import:
    var Visualizer = require('@uirouter/visualizer').Visualizer;
    import { Visualizer } from '@uirouter/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);


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 false
  • transition: (boolean) Transition Visualizer is not rendered when this is false
  • 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 (future) to future states. Note: node.self 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 is-ng1 class.

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 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 "@uirouter/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('@uirouter/visualizer').Visualizer;
var router = new UIRouterReact();
var pluginInstance = router.plugin(Visualizer);

React (Declarative)

Add the plugin to your UIRouter component

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

render() {
  return <UIRouter plugins=[Visualizer]></UIRouter>
Popular Transition Projects
Popular Reactjs Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Ui Router