React Jupyter Notebook Viewer

Render Jupyter notebook files easily in your React/NextJS project to showcase your notebooks.

React Jupyter Notebook Viewer is a highly customizable static viewer for React. Therefore this package will never ever be transformed into an interactive Jupyter Notebook viewer.

Try it yourself!

• React Sandbox Demo
• NextJS Sandbox Demo

Install

npm install react-jupyter-notebook-viewer

Usage

React Applications

// App.js
import { JupyterNotebookViewer } from "react-jupyter-notebook-viewer";

export default function App() {
	return (
		<JupyterNotebookViewer
			filePath="/path/to/notebook" // Or a raw JSON notebook file location online
			notebookInputLanguage="python"
			// Rest of the properties if required.
		/>
	);
}

NextJS Applications

⚠️ DISCLAIMER

Using this package in a NextJS application requires a different approach.

1. Create a component using the package inside the /components/Notebook.js file:

// components/Notebook.js
import { JupyterNotebookViewer } from "react-jupyter-notebook-viewer";

function Notebook(props) {
	const notebook = new JupyterNotebookViewer(props);
	return <>{notebook}</>;
}

export default Notebook;

2. Use the created component in the desired file:

// pages/index.js
import dynamic from "next/dynamic";

const Notebook = dynamic(() => import("../components/Notebook"), {
	ssr: false
});

export default function IndexPage() {
	return (
		<Notebook
			filePath="/path/to/notebook" // Or a raw JSON notebook file location online
			notebookInputLanguage="python"
			// Rest of the properties if required.
		/>
	);
}

Types

| Property | Description | Required | Type | Default Value | | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ---------------------- | | filePath | The path to the Jupyter notebook file (.ipynb) | ✔️ | string | - | | className | The class name of the static viewer | ❌ | string | - | | notebookInputLanguage | The Jupyter notebook input code language | ❌ | string | - | | notebookOutputLanguage | The Jupyter notebook output code language | ❌ | string | notebookOutputLanguage \|\| notebookInputLanguage | | outputTextClassName | The Jupyter notebook output block execution number class name | ❌ | string | - | | inputTextClassName | The Jupyter notebook input block execution number class name | ❌ | string | - | | outputBlockClassName | The Jupyter notebook output block class name | ❌ | string | - | | outputImageClassName | The Jupyter notebook output image class name | ❌ | string | - | | outputOuterClassName | The Jupyter notebook output outer class name | ❌ | string | - | | inputOuterClassName | The Jupyter notebook input outer class name | ❌ | string | - | | outputBorderClassName | The Jupyter notebook output block left-border class name | ❌ | string | - | | inputBorderClassName | The Jupyter notebook input block left-border class name | ❌ | string | - | | outputTableClassName | The Jupyter notebook output table class name | ❌ | string | - | | inputMarkdownBlockClassName | The Jupyter notebook input markdown class name | ❌ | string | - | | inputCodeBlockClassName | The Jupyter notebook input code class name | ❌ | string | - | | inputCodeDarkTheme | The Jupyter notebook input code theme option | ❌ | boolean | false | | outputDarkTheme | The Jupyter notebook output code theme option | ❌ | boolean | false | | inputMarkdownDarkTheme | The Jupyter notebook input markdown theme option | ❌ | boolean | false | | showInputLineNumbers | The Jupyter notebook input code line numbers visibility | ❌ | boolean | false | | showOutputLineNumbers | The Jupyter notebook output code line numbers visibility | ❌ | boolean | false | | withOnClick | The Jupyter notebook on block click functionality | ❌ | boolean | false | | hideCodeBlocks | The Jupyter notebook input code blocks visibility | ❌ | boolean | false | | hideMarkdownBlocks | The Jupyter notebook input markdown blocks visibility | ❌ | boolean | false | | hideAllOutputs | The Jupyter notebook output (images/tables/code/etc.) blocks visibility | ❌ | boolean | false | | hideAllInputs | The Jupyter notebook input (code/markdown) blocks visibility | ❌ | boolean | false | | remarkPlugins | The Jupyter notebook remark plugins, see here | ❌ | array | - | | rehypePlugins | The Jupyter notebook rehype plugins, see here | ❌ | array | - |

License

The React Jupyter Notebook Viewer package is licensed under MIT.

Motivation

I required a Jupyter notebook renderer for React since I was busy on a React/NextJS project. There are a decent amount of packages that could have been used such as react-jupyter-notebook, but in my opinion these packages are not very customizable and some of them are deprecated. Therefore I started working on this idea.

I've mainly focused on the code block part and not the markdown part and this might be an issue in some situations since I've styled the markdown HTML elements myself. That's also one of the reasons I've added the properties remarkPlugins and rehypePlugins in case you'd like to customize it.

Links

• React Demo
• NextJS Demo
• NPM Package
• Source code
• React Syntax Highlighter
• React Markdown
• Remark Plugins
• Rehype Plugins