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.
After the installation it will automatically copy all Javascript and CSS assets to your public directory. No CDNs are used.
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.
import {HeaderScripts, HeaderStyles} from 'wljs-notebook-react/head.js'Example usage in a Next.js template:
Details
import { Html, Head, Main, NextScript } from 'next/document'
import {HeaderScripts, HeaderStyles} from 'wljs-notebook-react/head.js'
import Script from 'next/script'
export function MakeHeaderScripts () {
return HeaderScripts.map((script, index) => (
<Script
key={index}
{...script.attributes}
/>
));
}
export function MakeHeaderStyles () {
return HeaderStyles.map((style, index) => (
<link
rel='stylesheet'
href={style.attributes.href}
/>
));
}
export default function Document() {
return (
<Html>
<Head>
{MakeHeaderStyles()}
{MakeHeaderScripts()}
</Head>
<body className="bg-white text-gray-800 px-6">
<Main />
<NextScript />
</body>
</Html>
)
}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:
Details
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)