A React component library that helps render notebooks or individual cells exported to MDX format, preserving interactivity and outputs on your blog, documentation, or any React-based/static MDX site.
Currently this is a working prototype
npm i wljs-notebook-reactSee how to export your notebooks to MDX [here].
- Embed interactive widgets or 3D figures into a blog page
This library is used on wljs.io documentation pages. See a basic Next.js template for hosting WLJS Notebooks as MDX files.
These should not be used manually—use the output generated by WLJS Notebook.
WLJSStore(only once per page): Loads heavy content like 3D graph data, hash maps for interactive widgets, etc.WLJSEditor: Renders an input/output cellWLJSHTML: Renders raw HTML content
You can stylize code cells globally using this export
DefaultClasses
WLJS Notebook relies on several JavaScript modules that interact via a special global scope system (similar to the Obsidian plugin architecture). These must be included as module scripts in your website’s <head> before hydration. You can use a CDN or host them locally. By default, the CDN option is used.
import {HeaderScripts} from 'wljs-notebook-react/head.js'Example usage in a Next.js template:
/* _document.tsx */
import { Html, Head, Main, NextScript } from 'next/document'
import {HeaderScripts} from 'wljs-notebook-react/head.js'
import Script from 'next/script'
export function MakeHeaderScripts () {
return HeaderScripts.map((script, index) => (
<Script
key={index}
{...script.attributes}
/>
));
}
/* Website or section template */
export default function Document() {
return (
<Html>
<Head>
{MakeHeaderScripts()}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}WLJS components rely heavily on the Tailwind CSS framework. We recommend using TWind for on-the-fly class generation. Some custom classes—for math symbols and other elements—must also be included.
import 'wljs-notebook-react/styles.css'Example usage in a Next.js template:
pages/_app.tsx
import 'wljs-notebook-react/styles.css'
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
The WLJSStore MDX component lazily loads JSON data files related to the notebook or cells. By convention, these files are stored in an attachments folder next to the MDX file, but their location is up to you.
To move them automatically during the build step (since many bundlers don’t support this by default), use a custom post-processing remark plugin:
wljs-notebook-react/remark.js
remarkPlugins: [
[
require('wljs-notebook-react/remark.js'),
{
fromDir: path.resolve(__dirname, 'pages'), // Where MDX files live
publicDir: path.resolve(__dirname, 'public'), // Where to copy files
},
],
],Example usage in a Next.js template:
next.config.js
const path = require('path');
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
options: {
remarkPlugins: [
[
require('wljs-notebook-react/remark.js'),
{
fromDir: path.resolve(__dirname, 'pages'), // Where MDX files live
publicDir: path.resolve(__dirname, 'public'), // Where to copy files
},
],
],
},
});
/** @type {import('next').NextConfig} */
const nextConfig = {
// Configure `pageExtensions`` to include MDX files
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
// Optionally, add any other Next.js config below,
webpack: (config) => {
config.module.rules.push({
test: /\.txt$/,
type: 'asset/resource',
});
return config;
},
}
module.exports = withMDX(nextConfig)