notebook-preview and rendering a static notebook with nteract

[mikepqr]

I'm looking for a js library to parse the contents of a notebook file and insert a static preview into the DOM. I don't need any interactivity. It seems like my options are https://github.com/jsvine/notebookjs and @nteract/notebook-preview (was notebook-preview?).

The nteract library is appealing because my host application is react, and it saves me the trouble of reactizing things. But I saw this commit, which I assume means it's unsupported/deprecated.

So: I'm writing to ask: is notebook-preview indeed dead? And am I right in thinking there is no similarly high-level library in the nteract ecosystem? Or am I missing something obvious about how stateful-components and ... commutable? fit together to do what I want? Maybe this would make a nice hello world example in the docs if so?

[captainsafia]

is notebook-preview indeed dead?

Unfortunately, software never dies. 😛

But, yes, notebook-preview is deprected. We're no longer making bug fixes/improvements to the library. It's stable so we still use it in some places, such as the commuter project. You can view the code for that here.

And am I right in thinking there is no similarly high-level library in the nteract ecosystem?

There's similar stuff in the nteract/presentational-components, nteract/notebook-app-component, and nteract/stateful-components. So you can still achieve the same affect using the new packages.

Or am I missing something obvious about how stateful-components and ... commutable?

Nope, you've pieced together the two key components needed here. commutable parses the serialized JSON of the notebook into an immutable in-memory model that can be displayed by the React components in stateful-components. These components are "stateful" because they read properties from a Redux store.

So, you can combine React + Redux + nteract packages to build a non-interactive previewer for notebooks.

This is a step-up in effort from NotebookPreview but gives you some nice benefits like the ability to modify the styles of your components.

Depending on your scenario, you might be fine if you mimick what we do in commuter and build on-top of notebook-preview.

But if you want something more sophisticated, stable, and supported the new stack is the way to go.

Maybe this would make a nice hello world example in the docs if so?

An appropriate request! We've been building up the docs in this area but haven't gotten to the cornerstone demo of all the different components end-to-end. The code in notebook-app-component can serve as a good guide for how to get started.

Feel free to post follow-up questions here.

[mikepqr]

Thank you very much for the reply! I will take a look at all these leads and let you know if I have any questions as I put the pieces together.

[dakavisa]

Hey @mikepqr I need to do exactly the same as you, did you get any solution with the new components or end up using notebook-preview?

[mikepqr]

I used notebook-preview with some very hacky and incomplete styling to make it look a little more native in my app. As @captainsafia mentions, styling notebook-preview is very difficult. But other than that, it took me only a few minutes to get set up.

We do plan to migrate to the new stuff, but I couldn't figure out how to use it in the amount of time I had.

[captainsafia]

@mikepqr We're working on onboarding a doc writer to document the "new stuff" some more so the process should hopefully be less painful.

Let me know if you'd be interested in providing feedback on the upcoming docs!

[mikepqr]

Great! I would love to take a look/provide feedback.