Awesome Open Source
Awesome Open Source


Browser-based MDX editor

npm i -g ok-mdx
mkdir docs
touch docs/hello.mdx
mdx docs --open
  • Quickly prototype with React components
  • Zero configuration
  • Mix markdown with JSX
  • Live edit and autosave

What is this for?

MDX is great for documentation, building demos, or quickly prototyping with React components, without the need to set up a full-blown React application. Similar to Compositor x0, ok-mdx is meant to be installed as a global command line utility that you can use alongside your application setup or in isolated sandbox environments. ok-mdx works well as a local alternative to tools like CodeSandbox when working with React components.

Getting Started

ok-mdx needs a directory of .mdx or .md files to work.

After installing ok-mdx, create a folder and an empty .mdx file with the following command:

mkdir docs && touch docs/hello.mdx

Start the ok-mdx app:

mdx docs --open

This will open the application in your default browser, showing a list of the MDX files. Click on a filename to open the editor view. In the right panel, add some text to see the preview on the left.

MDX Format

MDX is a superset of markdown, which can also render JSX instead of HTML.

# Markdown Heading

<button className='blue'>JSX button</button>

Importing Components

In order to import components, be sure they're installed locally. This requires a package.json file in your current directory.

To create a package.json file, run npm init -y.

To install a component, use npm install. The following will install grid-styled and styled-components as a local dependency.

npm i grid-styled styled-components

To use components, import them at the top of your MDX file:

import { Flex, Box } from 'grid-styled'

# Hello

<Flex alignItems='center'>
  <Box p={3} width={1/2} bg='blue'>
  <Box p={3} width={1/2}>


-o --open     Opens development server in default browser
-p --port     Port for development server
--vim         Enable editor Vim mode


ok-mdx is only meant to be used for development. To export your MDX files, consider one of the following tools:

  • Compositor x0: great for creating documentation, blogs, static sites, or other small demos
  • Next.js: great for creating production-ready, server-side rendered React applications


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,119,969
Reactjs (170,810
Command Line (131,692
Editor (31,830
Markdown (29,231
React Component (6,307
Jsx (4,305
Mdx (1,094
Compositor (419