Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jxnblk/mdx-docs
:memo: Document and develop React components with MDX and Next.js
https://github.com/jxnblk/mdx-docs
design-system docs documentation markdown mdx nextjs react theming
Last synced: 3 months ago
JSON representation
:memo: Document and develop React components with MDX and Next.js
- Host: GitHub
- URL: https://github.com/jxnblk/mdx-docs
- Owner: jxnblk
- License: mit
- Archived: true
- Created: 2018-08-07T16:44:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-25T16:02:23.000Z (about 5 years ago)
- Last Synced: 2024-04-14T07:47:58.062Z (8 months ago)
- Topics: design-system, docs, documentation, markdown, mdx, nextjs, react, theming
- Language: JavaScript
- Homepage: https://mdx-docs.now.sh
- Size: 1.75 MB
- Stars: 453
- Watchers: 6
- Forks: 32
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# MDX Docs
:memo: Document and develop React components with [MDX][] and [Next.js][]
https://mdx-docs.now.sh/
[![Build Status][badge]][travis]
[![Downloads][downloads-badge]][npm]
[![Version][version-badge]][npm]
[![MIT License][license]](LICENSE.md)
```sh
npm init docs
```
- :memo: Create documentation with markdown
- :atom_symbol: Import and use React components
- :gear: Component-based API
- :computer: Live code examples
- :nail_care: Customizable themes
- ▲ Built for Next.js
[badge]: https://flat.badgen.net/travis/jxnblk/mdx-docs
[travis]: https://travis-ci.org/jxnblk/mdx-docs
[version-badge]: https://flat.badgen.net/npm/v/mdx-docs
[downloads-badge]: https://flat.badgen.net/npm/dt/mdx-docs
[npm]: https://npmjs.com/package/mdx-docs
[license]: https://flat.badgen.net/badge/license/MIT/blue
## 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](templates/next/README.md)
for more documentation.
To add MDX Docs to an existing Next.js app, see the [Custom Setup](docs/pages/custom-setup.md) 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.
```mdx
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](https://github.com/FormidableLabs/react-live).
To make a code block render as an editable example, use the `.jsx` language attribute (note the `.` prefix).
````mdx
Live code example:
```.jsx
Beep
```
````
[react-live]: https://github.com/FormidableLabs/react-live
## Components Scope
To add components to scope for use in the live code examples,
pass a `components` object to the [`Layout`](docs/pages/components.md#Layout) component.
```jsx
// example components
import React from 'react'
export default {
Box: props => (
)
}
```
```jsx
// example _app.js
```
The `components` object can also include components to render the HTML elements in MDX.
## Documentation
- [Components](https://mdx-docs.now.sh/components)
- [Custom Setup](https://mdx-docs.now.sh/custom-setup)
---
#### Prior Art
[mdx-go][],
[Compositor x0][],
[mdx-deck][],
[live-doc][],
[Doctor Mark][],
[docz][]
#### Related
[Next.js][],
[MDX][],
[react-live](https://github.com/FormidableLabs/react-live)
[mdx-go]: https://github.com/jxnblk/mdx-go
[Compositor x0]: https://compositor.io/x0
[live-doc]: https://github.com/jxnblk/live-doc
[Doctor Mark]: https://github.com/jxnblk/doctor-mark
[mdx-deck]: https://github.com/jxnblk/mdx-deck
[docz]: https://github.com/pedronauck/docz
[MDX]: https://github.com/mdx-js/mdx
[Next.js]: https://github.com/zeit/next.js/
[MIT License](LICENSE.md)