Jupyter to Svelte

Convert Jupyter Notebooks into Svelte Components

• Motivation
• Features
• Installation
• Usage
  • Basic Usage
  • Specifying a Style Sheet
    • Creating a Style Sheet
• Contributing

Motivation

Jupyter Notebooks are great for exploratory data analysis, but they are not so great for sharing your work with others. This tool converts Jupyter Notebooks into Svelte components, which can be used in any Svelte application.

What's wrong with Jupyter's built-in conversion?

Jupyter's built-in conversion tool is great when you want to share a standalone file, be it markdown, HTML, or PDF. However, it doesn't work well when you want to have the notebook in a web application. For example, if you want to write a blog post in a Jupyter notebook, you can use this tool to convert the notebook into a Svelte component, which you can then use in your Svelte based web application.

Other reasons:

• The markdown outputted by Jupyter doesn't play nicely with MDsveX
• Jupyter's built-in tool doesn't support Plotly interactive charts
• Custom styling
  • consistent look and feel across your web application
  • Want to use a PrismJS theme for code

Features

• [x] PrismJS syntax highlighting for code blocks (Python only, R is not supported)
  • Assumes that a you have chosen a PrismJS theme and imported the css.
• [x] Math displayed with KaTeX
• [x] Interactive Plotly charts work out of the box
• [x] Specify your own CSS/Scss/Sass style sheet for your notebook

Installation

Assuming you have Node.js installed:

npm install --global jupyter2svelte

Usage

Basic Usage

Pass the path to the Jupyter Notebook you want to convert as an argument to the convert command:

jupyter2svelte convert notebook.ipynb

This will create a new file called notebook.svelte in the same directory as the notebook which you can then import into your Svelte application.

The Svelte component will accept 1 or 2 props depending on whether or not you have any images in your notebook and whether or not you want to embed the images in the component:

• img_alt_text - An array of strings that will be used as the alt attribute for the nth image. By default, the alt text will just be "Image".
• img_path_prefix - The path to the directory where the images are stored, in a typical SvelteKit application you will place the images in the static directory and you would set this prop to "/" or "/some/folder/"

<script>
  import Jupyter from "./notebook.svelte";
</script>

<Jupyter img_path_prefix={"/notebook/"} img_alt_text={["Some Desc. of Graph 1", "Some Desc. of Graph 2"]}/>

If you choose to embed the images in your component, you can pass the --embed-images flag to the convert command and there will be no img_path_prefix prop. The images will be embedded in the component as base64 encoded WebP images.

jupyter2svelte convert --embed-images notebook.ipynb

import Jupyter from "./notebook.svelte";

<Jupyter img_alt_text={["Some Desc. of Graph 1", "Some Desc. of Graph 2"]}/>

All Options:

• --style <style_sheet> Path to a CSS/Scss/Sass stylesheet to use
• -q, --quality <quality> Specify the compression quality of the WebP images (default: "80")
• -embd, --embed-images Embeds images in the component (default: false)
• -h, --help display help

Specifying a Style Sheet

You can specify a style sheet to be applied to the notebook by passing the path to the style sheet as an argument to the convert command:

jupyter2svelte convert --style style.scss notebook.ipynb

Creating a Style Sheet

You can create a style sheet by hand from scratch, or you can use the default_css command to output the default style sheet and go from there.

jupyter2svelte default_css > style.scss

Classes:

| Class (all classes are attached to an outer div) | Description | | ------------------------------------------------ | ----------------------------------------------------- | | input | what was an input block in Jupyter (markdown or code) | | input-md | markdown block in Jupyter | | input-code | code block in Jupyter | | output | what was an output block from code in Jupyter | | output-text | standard text output (e.g. print statement output) | | output-html-table | pandas dataframes | | output-image | images (e.g. Matplotlib/Seaborn plots) |

Contributing

Contributions are welcome! Please open an issue or a pull request. If you want to contribute code, please make sure to run npm run format before committing.

Features that would be nice to have:

• [ ] Support for other interactive plotting libraries (e.g. Bokeh)
• [ ] Support for R notebooks?