import { Playground } from "@coralproject/mdx-book";

import "./README.css";

MDX Book

MDX Book is a docz inspired documentation generator with a playground and without gatsby and ssr.

GitHub

Installation

npm install --save-dev @coralproject/mdx-book

Entry File

This is an example entry file that your webpack configuration should include:

// main.js
import MDXBook from "@coralproject/mdx-book";
import theme from "prism-react-renderer/themes/nightOwl";

ReactDOM.render(
  <MDXBook
    documents={require.context(__dirname, true, /^.*\.mdx$/)}
    playgroundTheme={theme}
  />,
  container
);

Webpack Configuration

Just add this rule in your webpack configuration:

// webppack.config.js
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: ["babel-loader", "@coralproject/mdx-book/loader"]
      }
    ]
  }
};

Babel Configuration

This is the minimum required babel configuration:

// babel.config.js
module.exports = {
  plugins: ["transform-class-properties"],
  presets: [
    "@babel/react",
    ["@babel/env", { modules: false }]
  ]
};

MDX File with playground

import { Playground } from "@coralproject/mdx-book";

### Playground

<Playground>
  <div>Hello</div>
</Playground>

Playground

Hello