Kaio Preview

Kaio Preview opens a live, side-by-side rendering of a Jupyter .ipynb file. Markdown tables, relative images, common math delimiters, syntax-highlighted code, and saved text, HTML, image, and interactive Plotly outputs are supported. It reads the VS Code notebook document, so edits made in the notebook editor appear in the preview as you work.

Use

1. Open a .ipynb file in VS Code.
2. Run Kaio Preview: Open Side-by-Side Notebook Preview from the Command Palette, or use the notebook editor title button.
3. Edit notebook cells. The preview updates as the notebook changes.
4. Click a cell in the preview to jump to it and enter editing in the notebook editor. Markdown links inside cells still work as links.
5. In notebook edit mode, use the Preview action on a cell to open Kaio Preview at that same cell. The focused preview cell is highlighted.

Set Kaio Preview: Theme to Light, Dark, or Auto in VS Code Settings. Auto follows the active VS Code color theme. Use the Light/Dark toggle in the preview header to switch themes for the current extension session.

The extension does not execute cells; it displays outputs already present in the notebook.

Development

Run npm install in this folder, then open the repository root and press F5. Choose kaio-preview when prompted for the extension project folder.

When running in Entension Development Host, you can open new code by

code --extensionDevelopmentPath="/Users/hotronghai/lectures-fs/VS Code Extension/kaio-preview" "/Users/hotronghai/lectures-fs"