Playground

Write some MDX code and see it render to the right. Below, you can also see the output JSX and the intermediary ASTs. This can be helpful for debugging or exploring how MDX works. All Rebass components are in scope, so you can use those in the editor.

# Hello, world!

<Button>Here is a button</Button>

# Hello, world!
<Button>Here is a button</Button>

Hello, world!

MDAST

{
  "type": "root",
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "children": [
        {
          "type": "text",
          "value": "Hello, world!",
          "position": {
            "start": {
              "line": 1,
              "column": 3,
              "offset": 2
            },
            "end": {
              "line": 1,
              "column": 16,
              "offset": 15
            },
            "indent": []
          }
        }
      ],
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 1,
          "column": 16,
          "offset": 15
        },
        "indent": []
      }
    },
    {
      "type": "jsx",
      "value": "<Button>Here is a button</Button>",
      "position": {
        "start": {
          "line": 3,
          "column": 1,
          "offset": 17
        },
        "end": {
          "line": 3,
          "column": 34,
          "offset": 50
        },
        "indent": []
      }
    }
  ],
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 3,
      "column": 34,
      "offset": 50
    }
  }
}

HAST

{
  "type": "root",
  "children": [
    {
      "type": "element",
      "tagName": "h1",
      "properties": {},
      "children": [
        {
          "type": "text",
          "value": "Hello, world!",
          "position": {
            "start": {
              "line": 1,
              "column": 3,
              "offset": 2
            },
            "end": {
              "line": 1,
              "column": 16,
              "offset": 15
            }
          }
        }
      ],
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 1,
          "column": 16,
          "offset": 15
        }
      }
    },
    {
      "type": "text",
      "value": "\n"
    },
    {
      "type": "jsx",
      "value": "<Button>Here is a button</Button>",
      "position": {
        "start": {
          "line": 3,
          "column": 1,
          "offset": 17
        },
        "end": {
          "line": 3,
          "column": 34,
          "offset": 50
        },
        "indent": []
      }
    }
  ],
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 3,
      "column": 34,
      "offset": 50
    }
  }
}

JSX

/* @jsx mdx */
const makeShortcode = name => function MDXDefaultShortcode(props) {
  console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
  return <div {...props}/>
};
const Button = makeShortcode("Button");
const layoutProps = {
  
};
const MDXLayout = "wrapper"
function MDXContent({
  components,
  ...props
}) {
  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
    <h1>{`Hello, world!`}</h1>
    <Button mdxType="Button">Here is a button</Button>
    </MDXLayout>;
}
MDXContent.isMDXComponent = true;

Edit this page on GitHub

Getting Started