jeevangelista/react-jupyter-viewer

A react component to embed .ipyb notebooks in a blog or something

React-Jupyter-Viewer

IMPORTANT!!!!

I'm looking for contributors. I noticed that quite a lot of developers find this tool useful and at the same time I feel guilty that I cannot devote enough time to this project due to personal committments. Please reachout in case anyone wants to contribute!

Join the following Slack Workspace for any queries:

https://join.slack.com/t/reactjupytern-0nc7370/shared_invite/zt-gacg79oi-NYk9coLNBUXiqtQ80ohMKg

Use jupyter notebooks as a blog

The only reason why I am creating this component is to be able to publish my .ipynb notebooks on my GitHub pages as blog post. I have too many notebooks lying around with my programming notes. I'm too lazy to boot a ipython kernel to view one of my notebooks. Hence, this component.

I like the default notebook viewer provided by github but there are a few features that would make it more usable for me, which are mostly these: downloading it as a PDF, dark mode, mobile-enabled view and ability to publish my notebooks as blogs

Drop me a message if anyone wanna contribute.

(cover image src: https://notionpress.com/blog/wp-content/uploads/2018/06/Cover-design.png)

Feature Roadmap

• Load from local file
• Load from URL
• Code blocks
• Render markdown blocks
• Render image blocks
• Render Error blocks
• Add tags to distinguish outputs
• Cell block numbering
• Header Tab (Showing name of notebook and date etc.)
• Hide code execution number (toggle)
• Theme Toggle
• Markdown Dark Theme
• Resolve Relative Markdown sources for images
• Split as A4 size pages
• Side-by-side view
• Download notebook as pdf (will have to enable wordwrap while downloading it as pdf)
• text/html code block parser
• Markdown based index

---

Desirable Props

prop	priority	description
file	Critical	Load a file from storage
url	Critical	Load a file from storage
theme	good to have	Change from dark to light
blog title	Critical	Title for the blog.
blog cover	good to have	An option to put in cover pic for your blog

---

Usage

Note that the notebook URL must be the raw_notebook url on github. Click on the 'raw' button in github notebook preview to get the raw source.

import React from 'react';
import './App.css';
import JupViewer from './JupViewer'

const ipynb = require('./BenchmarkNotebook.ipynb')

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <JupViewer
          title="Jupyter as a Blog!"
          subtitle="I've always wanted to publish my jupyter notebooks as blogs. Finally I can."
          coverImg="https://notionpress.com/blog/wp-content/uploads/2018/06/Cover-design.png"
          // file={ipynb} 
          file="https://raw.githubusercontent.com/jakevdp/PythonDataScienceHandbook/master/notebooks/00.00-Preface.ipynb"
        />
      </div>
    )
  }
}

export default App;

---

Desktop Preview

Mobile Preview with theme toggle

Dark	Light

---

Dependencies

• react-ace
• react-markdown
• antd (UI lib cuz I'm too lazy)