Live example on https://jupyter-react-vite-example.vercel.app
Example to run Jupyter React in a Vite.js Web application.
npm i
npm run devEnsure to add the following script in the head of your HTML.
<!-- Needed for ipywidgets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
<script type="module">
globalThis.__webpack_public_path__ = '';
</script>To create a production build, you first need to patch @jupyter-widgets/controls to avoid issues with early loadings via require.js.
diff --git a/node_modules/@jupyter-widgets/controls/lib/index.js b/node_modules/@jupyter-widgets/controls/lib/index.js
index 0063f69..ade0862 100644
--- a/node_modules/@jupyter-widgets/controls/lib/index.js
+++ b/node_modules/@jupyter-widgets/controls/lib/index.js
@@ -22,5 +22,5 @@ export * from './widget_tagsinput';
export * from './widget_string';
export * from './widget_description';
export * from './widget_upload';
-export const version = require('../package.json').version;
+export const version = "0.1.0";
//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/node_modules/@jupyter-widgets/controls/src/index.ts b/node_modules/@jupyter-widgets/controls/src/index.ts
index 912458d..5edaa11 100644
--- a/node_modules/@jupyter-widgets/controls/src/index.ts
+++ b/node_modules/@jupyter-widgets/controls/src/index.ts
@@ -24,4 +24,4 @@ export * from './widget_string';
export * from './widget_description';
export * from './widget_upload';
-export const version = (require('../package.json') as any).version;
+export const version = "5.0.12";Then run the following command to build and test the artifacts in the dist folder.
# make run
npm run build
cd dist
python -m http.server 8675 # Or any other local server.
open http://localhost:8675
Copyright (c) 2025 Datalayer, Inc.
Released under the terms of the MIT license (see LICENSE.