Skip to content

🪐 ⚛️ React.js components to create user interfaces 💯% compatible with Jupyter.

License

Notifications You must be signed in to change notification settings

stanxing/jupyter-ui

 
 

Repository files navigation

Datalayer

Become a Sponsor

🪐 ⚛️ Jupyter UI

Jupyter UI is a set of React.js components that allow a frontend developer to build data products compatible with the Jupyter ecosystem. The user interface delivers executable notebooks and cells.

You can try it on this CodeSandbox.

Read the documentation and stop extending, compose instead.

The below image shows a gallery of the available React.js components ready to be used in you custom application. These open source components are used to build Datalayer, a collaborative platform for data analysis.

Jupyter UI Gallery

Why?

The Jupyter(Lab) notebook is a tool that allows data scientist to analyse dataset. However, it is not easy to create a custom user interface integrated in an existing application. Jupyter UI, an open-source library, fills that gap and provides components that a developer can easily integrate in any React.js application.

The Jupyter(Lab) user interface is built on top of Lumino widget toolkit, an imperative way to build user interface and can not be consumed by industry standard declarative frameworks like React.js. As a user interface developer, if you want to create a custom data product on top of Jupyter, you have to stick to Lumino and carry-on the full notebook interface not tailored to your specific needs. This is not what you want. You just want to expose what you need, you want to develop with your favorite toolkit (like React.js) and you also want to integrate on a per-component basis the Jupyter functionality in your application.

IPyWidgets are supported (the Comm feature needs to be fixed). JupyterLite and PyScript support is on the roadmap. Autocompletion is also available.

You can find more context reading this abstract of the talk given at FOSDEM 2022 (video recording).

Integrations

We maintain a plugin for Docusaurus in the docusaurus package folder (see the Docusaurus example).

Jupyter UI Docusaurus

Please open issues for questions, feature requests, bug reports... We also welcome pull requests.

Use and Contribute

Start with the setup of your environment, then you can try out building your own with examples.

The typedoc documentation is available online.

⚖️ License

Copyright (c) 2022 Datalayer, Inc.

Released under the terms of the MIT license (see LICENSE).

About

🪐 ⚛️ React.js components to create user interfaces 💯% compatible with Jupyter.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 71.6%
  • Python 8.0%
  • Jupyter Notebook 6.8%
  • CSS 6.4%
  • JavaScript 4.8%
  • Makefile 1.2%
  • Other 1.2%