{"id":13566858,"url":"https://github.com/datalayer/jupyter-ui","last_synced_at":"2025-05-15T00:07:02.834Z","repository":{"id":42450239,"uuid":"412357052","full_name":"datalayer/jupyter-ui","owner":"datalayer","description":"🪐 ⚛️ React.js components 💯% compatible with 🪐 Jupyter https://jupyter-ui-storybook.datalayer.tech","archived":false,"fork":false,"pushed_at":"2025-05-08T10:05:21.000Z","size":6624,"stargazers_count":394,"open_issues_count":90,"forks_count":53,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-08T11:23:02.669Z","etag":null,"topics":["data","data-product","data-science","data-visualisation","datalayer","ipywidgets","jupyter","jupyterlab","lumino","notebook","reactjs","ui"],"latest_commit_sha":null,"homepage":"https://jupyter-ui.datalayer.tech","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datalayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["datalayer"]}},"created_at":"2021-10-01T06:38:39.000Z","updated_at":"2025-05-06T16:32:21.000Z","dependencies_parsed_at":"2024-04-06T03:25:03.813Z","dependency_job_id":"30313ffe-5f1e-4018-8d49-df5529f45791","html_url":"https://github.com/datalayer/jupyter-ui","commit_stats":{"total_commits":806,"total_committers":17,"mean_commits":"47.411764705882355","dds":"0.13399503722084372","last_synced_commit":"550b3ad187356d4480454a306d14c655e1d480a0"},"previous_names":["datalayer/jupyter-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer%2Fjupyter-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer%2Fjupyter-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer%2Fjupyter-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer%2Fjupyter-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datalayer","download_url":"https://codeload.github.com/datalayer/jupyter-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254249198,"owners_count":22039029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data","data-product","data-science","data-visualisation","datalayer","ipywidgets","jupyter","jupyterlab","lumino","notebook","reactjs","ui"],"created_at":"2024-08-01T13:02:18.198Z","updated_at":"2025-05-15T00:06:57.814Z","avatar_url":"https://github.com/datalayer.png","language":"TypeScript","funding_links":["https://github.com/sponsors/datalayer"],"categories":["TypeScript"],"sub_categories":[],"readme":"[![Datalayer](https://assets.datalayer.tech/datalayer-25.svg)](https://datalayer.io)\n\n[![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026style=flat\u0026color=1ABC9C)](https://github.com/sponsors/datalayer)\n\n# 🪐 ⚛️ Jupyter UI\n\n\u003e React.js components 💯% compatible with 🪐 Jupyter.\n\nJupyter UI is a set of [React.js](https://react.dev) components that allow a frontend/webapp developer to build data products compatible with the [Jupyter](https://jupyter.org) ecosystem. The user interface delivers executable notebooks, cells, terminals, file browsers and allows the developer to manage a full integrated React tree instead of relying on iframes to display the Jupyter noteboks.\n\n\u003chr/\u003e\n\nAs a developer start with the [setup of your environment](https://jupyter-ui.datalayer.tech/docs/develop/setup) and try [one of the examples](https://jupyter-ui.datalayer.tech/docs/category/examples). We have [documentation](https://jupyter-ui.datalayer.tech) for more details.\n\n\u003e You can try the CodeSanbox examples.\n\n- [A Notebook with CRA](https://codesandbox.io/p/sandbox/jupyter-react-cra-notebook-66r25c-66r25c).\n- [A Notebook with Next JS](https://codesandbox.io/p/devbox/jupyter-react-nextjs-qzv8cz).\n- [A simple Cell](https://codesandbox.io/p/sandbox/jupyter-react-cra-cell-te6hii-te6hii) - You may need to refesh the sandbox navigator.\n\nWe host a Storybook on ✨ https://jupyter-ui-storybook.datalayer.tech that showcases various low-level as high-level React.js components useful to build a Data Product.\n\n\u003cdiv align=\"center\" style=\"text-align: center\"\u003e\n  \u003cimg alt=\"Jupyter UI Gallery\" src=\"https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif\" /\u003e\n\u003c/div\u003e\n\nThe above 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](https://datalayer.io), a collaborative platform for data analysis.\n\n## Why?\n\nThe 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](https://jupyter-ui.datalayer.tech), an open-source library, fills that gap and provides components that a developer can easily integrate in any React.js application.\n\nThe 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.\n\nWe also aim removing the rigidity of the extension system and favor [composition over inheritance](https://en.wikipedia.org/wiki/Composition_over_inheritance).\n\nIPyWidgets are supported (the Comm feature needs to be fixed). JupyterLite and PyScript support is on the roadmap. Autocompletion is also available.\n\nYou can find more context reading this [abstract](https://fosdem.org/2022/schedule/event/lt_jupyter) of the talk given at [FOSDEM 2022](https://fosdem.org/2022) ([video recording](http://bofh.nikhef.nl/events/FOSDEM/2022/L.lightningtalks/lt_jupyter.webm)).\n\n## Next.js Integration\n\nSee the [Next.js example](https://github.com/datalayer/jupyter-ui/tree/main/examples/next-js).\n\n\u003cdiv align=\"center\" style=\"text-align: center\"\u003e\n  \u003cimg alt=\"Jupyter UI Docusaurus\" src=\"https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-nextjs.png\" /\u003e\n\u003c/div\u003e\n\n## Docusaurus Integration\n\nWe maintain a plugin for [Docusaurus](https://docusaurus.io) in the [docusaurus](https://github.com/datalayer/jupyter-ui/tree/main/packages/docusaurus-plugin) package folder (see the [Docusaurus example](https://github.com/datalayer/jupyter-ui/tree/main/examples/docusaurus)).\n\n\u003cdiv align=\"center\" style=\"text-align: center\"\u003e\n  \u003cimg alt=\"Jupyter UI Docusaurus\" src=\"https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-docusaurus.png\" /\u003e\n\u003c/div\u003e\n\n## Support\n\nPlease open [issues](https://github.com/datalayer/jupyter-ui/issues) for questions, feature requests, bug reports... We also welcome [pull requests](https://github.com/datalayer/jupyter-ui/pulls).\n\n## ⚖️ License\n\nCopyright (c) 2022 Datalayer, Inc.\n\nReleased under the terms of the MIT license (see [LICENSE](./LICENSE)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatalayer%2Fjupyter-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatalayer%2Fjupyter-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatalayer%2Fjupyter-ui/lists"}