display.js

Rich Displays for Jupyter JavaScript Kernels

In[1]:

import { display } from "https://deno.land/x/display/mod.ts";

await display(
  {
    "text/markdown":
      "Get ready for **denotebooks**! ![](https://github.com/denoland.png?size=32)",
  },
  { raw: true },
);

Out[1]:

Get ready for denotebooks!

For more examples, check out the test notebooks.

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.

await display({ "text/markdown": "# Hello from Deno" }, { raw: true );

Usage

display

NOTE: display must always be used as the last expression in a cell until display_data is supported (see denoland/deno#20591)

In[2]:

import { display } from "https://deno.land/x/display/mod.ts";
import * as pl from "npm:nodejs-polars";

let df = new pl.DataFrame({
  fruit: ["Apples", "Oranges"],
  comparability: [0, 1],
});

await display(df);

Out[2]:

fruitcomparability
Apples0
Oranges1

Tagged templates

html

import { html } from "https://deno.land/x/display/mod.ts";
html`<h1>Hello Deno!</h1>`;

md

import { md } from "https://deno.land/x/display/mod.ts";
md`## Hello 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 (xref: denoland/deno#20591)
  • Duck type common objects and determine a decent representation
    • Canvas -> image/png
    • Polar's DataFrame -> { text/html, application/vnd.dataresource+json }
    • SVGElement -> image/svg+xml
    • HTMLElement -> text/html
    • React.Element -> text/html and/or application/vdom.v1+json