display.js

Rich Displays for Jupyter JavaScript Kernels

In[1]:

import { display } from "https://deno.land/x/display/mod.ts";
display({
  "text/markdown":
    "Get ready for **denotebooks**! ![](https://github.com/denoland.png?size=32)",
});

Out[1]:

Get ready for denotebooks!

Background

With Deno's 1.37 release comes a built in Jupyter kernel. You can create notebooks with JavaScript and TypeScript.

One key feature of Jupyter kernels is the ability to display objects as richer media types like HTML, Markdown, Images, Vega, JSON, and many more.

This module provides a simple API to display richer media types in the Deno kernel. Centering on this is the use of a Symbol.for('Jupyter.display') on an object to indicate to Deno that the object should be displayed.

{
  [Symbol.for('Jupyter.display')]: () => ({
    'text/markdown': '# Hello from Deno'
  })
}

Obviously this isn't the most fun interface which is why this module provides a display function to make it easier to use.

display({ "text/markdown": "# Hello from Deno" });

Roadmap

  • Create a display function to provide deno functionality like IPython.display(obj, raw=True)
  • Adapt display function to hook into sending display_data on the Deno kernel
  • Detect common objects and determine the best representation
    • Canvas -> image/png