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 400,000 packages pre-installed, including @nteract/transforms-full with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var transformsFull = require("@nteract/transforms-full")

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

@nteract/transforms-full v6.0.3

Transforms from nteract

nteract transforms

This contains all the transforms that nteract uses, which extends all those supported by Jupyter frontends from @nteract/transforms while adding on

  • GeoJSON
  • Plotly
  • Vega


It's likely you don't need to use this package directly and can instead use a release of the display area (:soon:).


You may use whichever package manager (npm or yarn) best suits your workflow. The nteract team internally uses yarn.

npm install @nteract/transforms-full
yarn add @nteract/transforms-full

Note: React is a peer dependencies you'll have to install yourself.


Standard nteract Transforms

import {
} from '@nteract/transforms-full'

// Jupyter style MIME bundle
const bundle = {
  'text/plain': 'This is great',

// Find out which mimetype is the richest
const mimetype = richestMimetype(bundle, transforms)

// Get the matching React.Component for that mimetype
let Transform = transforms[mimetype]

// Create a React element
return <Transform data={bundle[mimetype]} />

Adding New Transforms

import {
} from '@nteract/transforms-full'

import someCustomTransform from 'somewhere';

let registry = { transforms, displayOrder };

registry = registerTransform(registry, someCustomTransform);


const Transform = registry.transforms[mimetype];
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