Skip to main content

MDX

MDX allows using JSX in Markdown, creating dynamic and component-driven content for websites, documentation, and applications.

Note

Please note that Markdown is also supported in LiveCodes and is documented here.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "mdx",
      "content": "import { Counter } from './script';\n\n# Counter\n\n<Counter />\n"
    },
    "style": {
      "language": "css",
      "content": "body, body button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n"
    },
    "script": {
      "language": "jsx",
      "content": "import { useState } from \"react\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>\n        click me\n      </button>\n    </div>\n  );\n}\n"
    }
  }
};
createPlayground('#container', options);

Usage​

Components can be imported from the script editor that uses JSX or React by importing from './script' (with no extension).

Example:

import { ComponentName } from './script';

Language Info​

Name​

mdx

Extension​

.mdx

Editor​

script

Compiler​

MDX

Version​

@mdx-js/mdx: v3.1.0

Code Formatting​

Using Prettier.

Custom Settings​

Custom settings added to the property mdx are passed as a JSON object to mdx.compile. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Starter Template​

https://livecodes.io/?template=mdx

Sponsors