Skip to content
NeXt UI Toolkit bower/npm distribution
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

NeXt UI Framework

NeXt UI toolkit is an HTML5/JavaScript based toolkit for network web application. It provides a network centric topology UI component featuring high performance and rich functionality. NeXt can display large complex network topologies, aggregated network nodes, traffic/path/tunnel/group visualizations and it includes different layout algorithms, map overlays, and preset user friendly interactions. NeXt can work together with DLUX to build ODL apps.

Homepage :

UI Toolkit Quicklook :

Current version : 1.0.0

Key Features

  • Large complex network topologies
  • Aggregated network nodes
  • Traffic/path/tunnel/group visualizations
  • Different layout algorithms
  • Map overlays
  • Preset user-friendly interactions

File structure

  |- css/
  |  |- next.css // next stylesheet file
  |  |- next.min.css // minimized stylesheet file
  |  |- next-componentized.css
  |  |- next-componentized.min.css
  |- js
  |  |- next.js // next js library
  |  |- next.min.js // minimized js library
  |- fonts/ // font resources foler
  |  doc/ //APi manual

Quick start

  1. Create a HTML file.
<!DOCTYPE html>
        <link rel="stylesheet" href="css/next.css">
        <script src="js/next.js"></script>
    <script type="text/javascript">
    //next code
  1. Edit next code
// Initialize a topology component
var topo = new nx.graphic.Topology({

// Create new app
var app = new nx.ui.Application();

// Attach topo to app
  1. Open html file with Chrome

Tutorials and Sample code

Tutorials :

Opendaylight sample code intergrate DLUX with NeXt:


Build instructions from source code

Git :

Environment requirements

In order to build NeXt from sources, you must have Node.js installed.

After that, make sure to have Grunt installed. To do so, run:

npm install grunt

Build process

  • npm install to install npm modules
  • grunt to build from sources

Authorized Devs Only: Bower Updates

You should only update Bower if the build is stable, or a major issue has been fixed.

To do so, type in the command line:

node update-bower.js -u {{GITHUB USERNAME}} -p {{GITHUB PASSWORD}} -v {{VERSION NUMBER}}

Make sure to turn {{GITHUB USERNAME}}, {{GITHUB PASSWORD}} and {{NEW VERSION}} into appropriate values.


node update-bower.js -u gituser -p 123456 -v 0.1.0

Leave the terminal window open until you see Done! message.

Who's Using NeXt

Here we feature a few customers who choose NeXt framework as their topology visualization tool and use it in their products.

Are you next?


Open Bugs


You can’t perform that action at this time.