Show HN: Embed Jupyter Notebooks in NextJS/Docusaurus/Fumadocs Docs

2 points

2 months ago

For some reason, embedding a Jupyter notebook in a documentation site still means doing one of these: screenshot every cell, run nbconvert and clean up the HTML, copy-paste the code into fenced blocks (losing the output), or iframe in nbviewer. Every time you update the notebook, you redo the whole dance.

notebook-mdx lets you just link the `.ipynb` file and it renders inline in your MDX. No export step, no cleanup, no re-pasting. Update the notebook, rebuild the docs, done.

    :::notebook{file="./analysis.ipynb"}
    :::

That's the API just link the file. You get authentic Jupyter styling (In/Out prompts, syntax highlighting, rich outputs including images and HTML), build-time rendering so there's zero client-side JS, multi-language support (Python, R, JS, SQL). Works with Next.js, Docusaurus, Fumadocs, and any MDX framework.

Example output:

- Example 1: https://notebook-mdx.vercel.app/docs/examples/notebook-demo

- Example 2: https://notebook-mdx.vercel.app/docs/examples/directive-exam...

Repo: https://github.com/abhay-ramesh/notebook-mdx

Docs: https://notebook-mdx.vercel.app