🪐 Context

Every component should be wrapped inside a Context to get the needed CSS.

root.render(
  <JupyterLabTheme>
    <Cell />
  </Jupyter>
);

If you prefer to not wrap in a Context, you can just use the JupyterLabCss component.

root.render(
  <>
    <JupyterLabCss colorMode='dark' />
    <Cell />
  </>
);

We also have a more evolved Context that allows you to specify behaviour for the kernels.

root.render(
  <Jupyter
    lite={false}
    useRunningKernelIndex={-1}
    startDefaultKernel={true}
    terminals={false}
  >
    <Notebook
      nbformat={notebookExample1 as INotebookContent}
      CellSidebar={CellSidebar}
      Toolbar={NotebookToolbar}
      height='calc(100vh - 2.6rem)' // (Height - Toolbar Height).
      cellSidebarMargin={120}
      uid="notebook-uid"
    />
  </Jupyter>
);

The Jupyter Context has the following properties.

• collaborative
• defaultKernelName
• injectableStore - Read more about the State
• jupyterServerUrl - Read also Deployment
• jupyterServerToken - Read also Deployment
• initCode - The code to run on the Kernel when it is ready.
• lite - Use a pyodide (in browser) Kernel.
• loadJupyterCss
• startDefaultKernel
• terminals
• theme
• useRunningKernelId
• useRunningKernelIndex