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

JS

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

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "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);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  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"
    }
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

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"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "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"
    }
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Solid

import { createPlayground, type EmbedOptions } from 'livecodes';

export default function App() {
  const options: EmbedOptions = {
  "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"
    }
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Ripple

import { createPlayground, type EmbedOptions } from 'livecodes';

export default component App() {
  const options: EmbedOptions = {
    "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"
      }
    }
  };
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  <div {ref onMount}></div>
}

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

Links

• MDX
• JSX
• React
• Markdown support in LiveCodes
• JSX support in LiveCodes
• React support in LiveCodes