Skip To Article

If you are using thebe-react you can add thebe-lite into your app and enable it at runtime via the useJupyterLite option. It's worth noting thebe-lite is always directly loaded onto your page via a script tag and accessed globally, while we prefer to load thebe-core lazily by the same method. This is for considerations such as package size, build system compatibility and for uniformity while playing nicely with serverside rendering frameworks like Remix.

Aync loadingΒΆ

To load thebe-core the package use the ThebeBundleLoaderProvider component:

<ThebeBundleLoaderProvider loadThebeLite publicPath="/thebe">
  <ThebeServerProvider> ... </ThebeServerProvider>
</ThebeBundleLoaderProvider>

This makes the core API availalbe to the child component tree via the useThebeLoader hook, to load thebe-lite add the loadThebeLite boolean prop.

This will load the appropriate javascript directly to the page either on render (if a start prop is passed) or when the load function from the useThebeLoader hook is called from a child component.

MyST MarkdownMyST Markdown
Community-driven tools for the future of technical communication and publication, part of Jupyter.