No longer maintained see https://mdxjs.com for a better alternative

live-doc

Convert markdown to live React demos http://jxnblk.com/live-doc

Built with: react-markdown, React Live, Rebass, and styled-components

Getting Started

npm i -g live-doc

Convert a markdown file to a React app and save as index.html:

doc README.md

Live Code Example

By using the .jsx language attribute at the beginning of a code block, live-doc will convert the example into a live-editable example using React Live.

<div>
  <Heading color='tomato'>
    Hello! Edit me
  </Heading>
  <button
    onClick={e => {
      alert('Hello')
    }}
    children='Beep'
  />
</div>

In this example, the Rebass Heading component has been added to the scope in the docs/config.js file, making it available to the React Live preview.

React Live noInline Mode

To enable the noInline mode in React Live, use the ..jsx language attribute at the beginning of a code block.

const Hello = () => <h1>Hello</h1>

const App = () => (
  <div>
    <Hello />
    <button
      onClick={e => {
        alert('Beep')
      }}
      children='Beep'
    />
  </div>
)

render(<App />)

CLI Options

-d --out-dir    Output directory
-c --config     Path to config file

Configuration

To customize the output React app, create a config file that exports an object.

// config.js
module.exports = {
  // Scope for react-live previews
  scope: {
    foo: 'Hello'
  },
  title: 'Page Title',
  css: 'body { color: tomato }',
  script: 'console.log("Hello");',
  // Meta tags
  meta: [
    {
      name: 'og:image',
      content: 'kitten.jpg'
    }
  ]
}

Then pass the file with the --config flag to the CLI.

doc README.md --config config.js

GitHub Made by Jxnblk