Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/righ/react-ipynb-renderer

ipynb renderer for ReactJS
https://github.com/righ/react-ipynb-renderer

ipynb jupyter jupyter-notebook jupyter-theme jupyter-themes react

Last synced: about 1 month ago
JSON representation

ipynb renderer for ReactJS

Host: GitHub
URL: https://github.com/righ/react-ipynb-renderer
Owner: righ
License: apache-2.0
Created: 2021-06-06T15:58:06.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2024-09-21T16:11:05.000Z (about 2 months ago)
Last Synced: 2024-09-28T23:41:11.379Z (about 2 months ago)
Topics: ipynb, jupyter, jupyter-notebook, jupyter-theme, jupyter-themes, react
Language: Jupyter Notebook
Homepage: https://docs.walkframe.com/react-ipynb-renderer
Size: 3.99 MB
Stars: 14
Watchers: 1
Forks: 8
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # React Ipynb Renderer

This is a library to easily draw ipynb in a React application.

[![npm version](https://img.shields.io/npm/v/react-ipynb-renderer)](https://www.npmjs.com/package/react-ipynb-renderer)

[![e2e workflow](https://github.com/righ/react-ipynb-renderer/actions/workflows/e2e.yaml/badge.svg?branch=master)](https://github.com/righ/react-ipynb-renderer/actions/workflows/e2e.yaml)

[![License](https://img.shields.io/npm/l/react-ipynb-renderer)](https://github.com/righ/react-ipynb-renderer/blob/main/LICENSE)

![downloads](https://img.shields.io/npm/dm/react-ipynb-renderer?style=flat-square)

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Frigh%2Freact-ipynb-renderer.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Frigh%2Freact-ipynb-renderer?ref=badge_shield)



  



## Theme

Please choose your favorite combination from the multiple themes available for Jupyter and syntax highlighting. 

There are several options for each, allowing you to find the perfect match for your preference.

| solarizedl and duotone forest themes                                                                                          | monokai and xonokai themes                                                                                  |

| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |

| ![solarizedl](https://github.com/righ/react-ipynb-renderer/raw/master/images/solarizedl-duotone_earth.png) | ![monokai](https://github.com/righ/react-ipynb-renderer/raw/master/images/monokai-xonokai.png) |

As for jupyter themes, you may use your own customized CSS. You do not necessarily have to use the prepared jupyter theme.

## Formula renderer

You can choose Mathjax or Katex for rendering formulas. 

Normally I would recommend choosing react-ipynb-renderer which uses Mathjax.

react-ipynb-renderer-katex is a bit lighter than the mathjax version.

| Mathjax | Katex |

| ------- | ----- |

| [![NPM](https://nodei.co/npm/react-ipynb-renderer.png?mini=true)](https://www.npmjs.com/package/react-ipynb-renderer) | [![NPM](https://nodei.co/npm/react-ipynb-renderer-katex.png?mini=true)](https://www.npmjs.com/package/react-ipynb-renderer-katex) |

| [![CodeSandbox](https://img.shields.io/badge/Codesandbox-FFFFFF?style=for-the-badge&logo=codesandbox&logoColor=159D48)](https://codesandbox.io/s/react-ipynb-renderer-sample-kbu4z?file=/src/App.tsx) | [![CodeSandbox](https://img.shields.io/badge/Codesandbox-2B9895?style=for-the-badge&logo=codesandbox&logoColor=FFFFFF)](https://codesandbox.io/s/react-ipynb-renderer-katex-sample-770np1?file=/src/App.tsx) |

These will be released at the same time, so the versions will be the same. Even if only one of them has been changed.

# Install

```sh

$ npm install --save react-ipynb-renderer

```

or

```sh

$ npm install --save react-ipynb-renderer-katex

```

# Usage

Just pass an ipynb json object to `IpynbRenderer` component.

## Simplest example

### Using react-ipynb-renderer

```jsx

import { IpynbRenderer } from "react-ipynb-renderer";

// Jupyter theme

import "react-ipynb-renderer/dist/styles/monokai.css";

// import ipynb file as json

import ipynb from "./test.ipynb";

export const Component = () => {

  return (

    

  );

};

```

### Using react-ipynb-renderer-katex

```jsx

import { IpynbRenderer } from "react-ipynb-renderer-katex";

// Formula renderer for katex

import 'katex/dist/katex.min.css';

// Jupyter theme

import "react-ipynb-renderer-katex/dist/styles/monokai.css";

// import ipynb file as json

import ipynb from "./test.ipynb";

export const Component = () => {

  return (

    

  );

};

```

# Links

- https://docs.walkframe.com/products/react-ipynb-renderer/

- https://www.npmjs.com/package/react-ipynb-renderer

## License

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Frigh%2Freact-ipynb-renderer.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Frigh%2Freact-ipynb-renderer?ref=badge_large)