Awesome Open Source
Awesome Open Source

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

MIT License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,535,723
Reactjs (75,636
Markdown (6,862
Demo (4,291
Styled Components (3,747
Docs (1,736
Rebass (30
React Markdown (18
React Live (6
Related Projects