Skip to content
This repository has been archived by the owner on Jan 31, 2023. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

MDX Docs

πŸ“ Document and develop React components with MDX and Next.js

Build Status Downloads Version MIT License

npm init docs
  • πŸ“ Create documentation with markdown
  • βš›οΈ Import and use React components
  • βš™οΈ Component-based API
  • πŸ’» Live code examples
  • πŸ’… Customizable themes
  • β–² Built for Next.js

Getting Started

To create a new documentation site, run npm init docs and follow the prompts. Once the application has been generated, see the for more documentation.

To add MDX Docs to an existing Next.js app, see the Custom Setup docs.

Using MDX

MDX lets you mix markdown with inline JSX to render React components. Write markdown as you normally would and use ES import syntax to use custom components in your document.

import { Box } from 'grid-styled'

# Hello MDX!

  This will render as a component

Live Code

MDX Docs has built-in components to render JSX fenced code blocks as live previews with editable code, powered by react-live. To make a code block render as an editable example, use the .jsx language attribute (note the . prefix).

Live code example:


Components Scope

To add components to scope for use in the live code examples, pass a components object to the Layout component.

// example components
import React from 'react'

export default {
  Box: props => (
        padding: '32px',
        backgroundColor: 'tomato'
// example _app.js
    <Component {} />

The components object can also include components to render the HTML elements in MDX.


Prior Art

mdx-go, Compositor x0, mdx-deck, live-doc, Doctor Mark, docz

Next.js, MDX, react-live

MIT License