thebe-core is available from npm as an esm or commonjs module and as a bundled package with typescript types.
thebe-core can be used in the browser via a minimal API on exposed on window, see JS Bundle API Functions for a listing.
Load thebe-core on a web page using a script tag, either from unpkg.com as show or from your own server:
<script src="https://unpkg.com/thebe-core@latest/dist/lib/thebe-core.min.js"></script>Options & Configuration¶
thebe-core uses an options object (types as CoreOptions) based on the original on-page options defined in thebe.
The same mechanism is used in typescript and with js in the browser.
Read more in Options & Configuration, then come back here to continue and setup your connection.
Listening to events¶
thebe-core objects use promised during async interactions with the Jupyter backend which allows you to build a UI that responds to async changes. However, an event syatem is also available allowing you to receive finer grained status messages as well as react to events that originate from the server.
To listen to all events withing the scope of a particular Config object register your event handlers below.
const config = makeConfiguration({ useBinder: true });
config.events.on('status', (evt, { status, message }) => console.log(status, message));
config.events.on('error', (evt, { status, message }) => console.error(status, message));Establishing a Connection¶
The asynchronous connect function will establish a server connection based on a Config object.
...
const server = await connect(config);Once resolved it provides a ThebeServer object that can be used to start a new session / kernel. The configuration object is availble on server.config.
...
const session = await server.startNewSession();Setting up a Notebook¶
- loading code
- attaching to the session
- attaching to the DOM
Running code¶
Next Steps¶
- Enable WASM based kernels using JupyterLite