mdjsx

CLI for rendering .mdx & .jsx files

npm i -D mdjsx

Add run scripts to your package.json

"scripts": {
  "start": "mdjsx hello.mdx",
  "build": "mdjsx hello.mdx -d dist"
}

Usage

Development server

mdjsx hello.mdx

Static build

mdjsx hello.mdx --out-dir dist

HTML only build

mdjsx hello.mdx --out-dir dist --static

Options

• -p --port: port number for development server
• -o --open: automatically open development server in default browser
• -c --config: path to config file
• -s --static: renders HTML without client-side bundle.js
• -d --out-dir: builds page to the given directory

MDX Format

MDX files combine markdown syntax with JSX. Each .mdx file can use front-matter to define default props and metadata used for static page generation.

Example .mdx file

---
title: Hello MDX
---

# Hello Markdown

<div>
  <h2>{props.title}</h2>
</div>

JSX Format

JSX files are rendered as pure React components, which allows for rapid prototyping without the need to setup a full React application. JSX files also use front-matter to define default props and metadata.

Example .jsx file

---
title: Hello JSX
---
<div>
  <h2>{props.title}</h2>
</div>

Configuration

A configuration file can be provided to add components and theme to scope.

// example config.js file
import * as Rebass from 'rebass'

const components = Rebass

const theme = {
  colors: {
    blue: '#07c',
    green: '#0f8'
  }
}

export default {
  components,
  theme
}

Use the --config flag to point to the configuration file.

mdjsx hello.mdx --config config.js

When a configuration file provides components in scope, they can be used in .mdx or .jsx files.

Example .jsx file

---
title: Hello JSX
---
<Box px={3} py={4} bg='blue' color='white'>
  <Heading>
    {props.title}
  </Heading>
</Box>

Provider

A wrapping higher-order component can be added to the config to provide data, layout, and other props to the rendered file.

// example config.js
import React from 'react'
import * as Rebass from 'rebass'

const components = Rebass

const provider = App => props => (
  <Rebass.Box px={3} py={4}>
    <App {...props} />
  </Rebass.Box>
)

export default {
  components,
  provider
}

MIT License