React Jupyter Renderer

A React component library for rendering Jupyter notebook cells with Markdown support. This package allows you to display Jupyter notebooks in your React applications without the need for a Jupyter server.

Features

• 📝 Renders Markdown cells with full support for:
  • Math equations (KaTeX)
  • Code syntax highlighting
  • GitHub Flavored Markdown (tables, checklists, etc.)
• 💻 Displays code cells with syntax highlighting
• 🔄 Simple API for integrating with React applications
• 🎨 Themeable (light/dark mode support)
• 🔌 No server required - works with static notebook files

Installation

npm install react-jupyter-renderer
# or
yarn add react-jupyter-renderer

Make sure to also install the peer dependencies if you haven't already:

npm install react react-dom

Usage

import React from 'react';
import { JupyterNotebook } from 'react-jupyter-renderer';
import 'react-jupyter-renderer/dist/styles.css';
// For math rendering
import 'katex/dist/katex.min.css';

// Example with a notebook object
const MyNotebookViewer = ({ notebookData }) => {
  return (
    <JupyterNotebook notebookData={notebookData} theme="light" />
  );
};

export default MyNotebookViewer;

Loading a notebook from a file

import React, { useState, useEffect } from 'react';
import { JupyterNotebook } from 'react-jupyter-renderer';
import 'react-jupyter-renderer/dist/styles.css';
import 'katex/dist/katex.min.css';

function NotebookFromFile() {
  const [notebook, setNotebook] = useState(null);
  
  useEffect(() => {
    fetch('/path/to/notebook.ipynb')
      .then(response => response.json())
      .then(data => setNotebook(data));
  }, []);
  
  if (!notebook) return <div>Loading...</div>;
  
  return <JupyterNotebook notebookData={notebook} theme="dark" />;
}

API Reference

<JupyterNotebook>

The main component for rendering a complete Jupyter notebook.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | notebookData | Object or String | Yes | - | The Jupyter notebook data, either as a parsed object or a JSON string | | theme | String | No | 'light' | Theme for the notebook. Options: 'light', 'dark' |

<MarkdownCell>

Component for rendering individual Markdown cells.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | content | String or Array | Yes | - | Markdown content to render |

<CodeCell>

Component for rendering individual code cells.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | content | String or Array | Yes | - | Source code to display | | outputs | Array | No | [] | Cell outputs to display |

Styling

The package includes basic styles. You can customize the appearance by overriding CSS classes:

• .jupyter-notebook-container - Main container
• .jupyter-markdown-cell - Markdown cell container
• .jupyter-code-cell - Code cell container
• .code-input - Code input area
• .code-output - Code output area

License

MIT