ok-cli

Hyperminimal dev server for React & MDX

• 0️⃣ Zero config
• 🎧 No plugins
• 🧠 Smart defaults
• ⚛️ Render React or MDX
• 🔥 Blazing

npm i -g ok-cli

ok docs/hello.mdx

Using React

ok-cli will render the default exported component of a module.

// example App.js
import React from 'react'
 
export default props =>
  <h1>Hello</h1>

ok docs/App.js

Using MDX

MDX is a superset of markdown, which lets you mix JSX with markdown syntax.

import Button from './Button'
 
# Markdown Heading
 
<Button>React Component</Button>

Layouts

MDX also supports layouts with React components. The default export in an MDX file will wrap the contents of the document.

// example Layout.js
import React from 'react'
 
export default ({ children }) =>
  <div
    style={{
      padding: 32,
      maxWidth: 768,
      margin: 'auto'
    }}>
    {children}
  </div>

import Layout from './Layout'
 
export default Layout
 
# Hello

Components

ok-cli has built-in support for customizing the components used in MDX. Export a named components object from the MDX document to customize the MDX markdown components.

// example components.js
import React from 'react'
 
export default {
  h1: props => <h1 {...props} style={{ color: 'tomato' }} />
}

export { default as components } from './components'
 
# Hello

Options

• --port, -p Port for the dev server
• --no-open Prevent opening in default browser

Node API

const start = require('ok-cli')
 
const options = {
  entry: './src/App.js'
}
 
start(options)
  .then(({ app, middleware, port }) => {
    console.log('listening on port:', port)
  })

MIT License