react-ipython-notebook

Rationale

Rendering an IPython notebook should be reasonably simple: JSON in, html out. It could be pretty easily accomplished with a minimal templating library, but since React is a glorified templating library and opens the door to robust markdown/mathjax/editing/manipulation/etc., it seemed like a natural approach (absolutely open to critique/differing opinions on this). The goals are:

A notebook component that can be dropped into an existing interface. It receives json and renders the notebook.
A command line conversion untility that just uses ReactDOMServer.renderToString to create equivalent output as a command line utility.

Notes

Incomplete and not fully functional. At the moment it just creates some basic cell markup and renders the markdown content. To see a simple example:

$ npm install
$ npm run build
$ node dist/bin/nbconvert.js test/fixtures/notebook1.ipynb.json

The output (beautified and with react tags removed) is:

<div class="ipynb">
  <div class="ipynbCell--text">
    <h1>test</h1>
    <p>$$y = x$$</p>
  </div>
  <div class="ipynbCell--code">
  </div>
  <div class="ipynbCell--code">
  </div>
  <div class="ipynbCell--code">
  </div>
  <div class="ipynbCell--code">
  </div>
  <div class="ipynbCell--code">
  </div>
  <div class="ipynbCell--raw">
  </div>
  <div class="ipynbCell--code">
  </div>
</div>

Todo

Add mathjax support and proper escaping of equations (escape with backtics and remove before insertion and mathjax rendering? Is there a better pattern for this?)
Render code cells
Figure out how images are bundled
Figure out what raw nbconvert cells do
Separate nbconvert into separate repo (i.e. avoid unnecessary dependencies in this repo)
And more

Example

To see it in action, run $ npm start , go to http://localhost:8080, and drag an ipynb file onto the "Choose file" button.

Building

There are a three different build processes going on, depending on the target. To build everything, just run

$ npm run build

Building `lib/`

src/ is all ES6, so lib/ contains a babel-transpiled version. Build with:

$ npm install -g babel-cli
$ npm run build-lib

Building the example

The example can either be served locally via webpack-dev-server with

$ npm run start

or built for distribution (todo: working example on gh-pages?) with

$ npm run build-example

Building `nbconvert`

A standalone command-line verison can be compiled with

$ npm run build-bin
$ node dist/bin/nbconvert.js /path/to/notebook.ipynb

Testing

Tests are done with react shallow rendering. Run with

$ npm run test

ameyc/react-ipython-notebook