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 1,000,000+ packages pre-installed, including @tensorflow/tfjs-vis with all npm packages installed. Try it out:

require("@tensorflow/tfjs/package.json"); // @tensorflow/tfjs is a peer dependency. var tfjsVis = require("@tensorflow/tfjs-vis")

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

@tensorflow/tfjs-vis v1.4.3

Utilities for in browser visualization with TensorFlow.js


tfjs-vis is a small library for in browser visualization intended for use with TensorFlow.js.

It's main features are:

  • A set of visualizations useful for visualizing model behaviour
  • A set of high level functions for visualizing objects specific to TensorFlow.js
  • A way to organize visualizations (the visor) of model behaviour that won't interfere with your web application

The library also aims to be flexible and make it easy for you to incorporate custom visualizations using tools of your choosing, such as d3, Chart.js or plotly.js.

Example Screenshots

Training Metrics

Training metrics (loss and accuracy) for a model

Model Evauation

Dataset accuracy metrics in a table and confusion matrix visualization

Model Internals

Model summary table and histogram of conv2d weights

Activations and custom visualizations

visualization of dataset activations in a conv2d layer and a dense layer



You can install this using npm with

npm install @tensorflow/tfjs-vis

or using yarn with

yarn add @tensorflow/tfjs-vis

You can also load it via script tag using the following tag, however you need to have TensorFlow.js also loaded on the page to work. Including both is shown below.

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


See for interactive API documentation.

Sample Usage

const data = [
  { index: 0, value: 50 },
  { index: 1, value: 100 },
  { index: 2, value: 150 },

// Get a surface
const surface = tfvis.visor().surface({ name: 'Barchart', tab: 'Charts' });

// Render a barchart on that surface
tfvis.render.barchart(surface, data, {});


Found a bug or have a feature request? Please file an issue on the main TensorFlow.js repository

Building from source

To build the library, you need to have node.js installed. We use yarn instead of npm but you can use either.

First install dependencies with



npm install

Then do a build with

yarn build


npm run build

This should produce a tfjs-vis.umd.min.js file in the dist folder that you can use.


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