Awesome Open Source
Awesome Open Source

No longer maintained see for a better alternative


Convert markdown to live React demos

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:


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.

  <Heading color='tomato'>
    Hello! Edit me
    onClick={e => {

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 = () => (
    <Hello />
      onClick={e => {

render(<App />)

CLI Options

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


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 --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