Awesome Open Source
Awesome Open Source

MDX Docs

📝 Document and develop React components with MDX and Next.js

https://mdx-docs.now.sh/

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 README.md 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!

<Box
  p={3}
  bg='tomato'>
  This will render as a component
</Box>

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:

```.jsx
<button>Beep</button>
```

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 => (
    <div
      {...props}
      style={{
        padding: '32px',
        backgroundColor: 'tomato'
      }}
    />
  )
}
// example _app.js
<Layout
  {...this.props}
  components={components}>
  <Layout.Main>
    <Component {...page} />
  </Layout.Main>
</Layout>

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

Documentation


Prior Art

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

Related

Next.js, MDX, react-live

MIT License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,513,839) 
Reactjs (72,884) 
Markdown (6,639) 
Nextjs (6,562) 
Documentation (4,498) 
Docs (1,701) 
Design System (1,008) 
Mdx (432) 
Theming (151) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194