How to embed live code editor for React components in MDX docs

1. remark-mdx-code-meta

   1 1 44 10.0 JavaScript

   Discontinued A remark MDX plugin for using markdown code block metadata

   Let's get started from customizing unified pipeline to support the live argument after the triple backtick (code fence) and the name of language. Install remark-mdx-code-meta to do so.

2. Civic Auth

   www.civic.com featured

   Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

   

3. react-live

   2 2 4,445 5.9 TypeScript

   A flexible playground for live editing React components

   

   We depend on react-live for preview and editor.

4. prism-react-renderer

   3 13 1,931 6.5 TypeScript

   🖌️ Renders highlighted Prism output to React (+ theming & vendored Prism)

   

   For non-live codeBlock, you may want to render it by prism-react-renderer which is working also under the LiveEditor. I'm not sure what is the best way to share the style and theme between them but do so anyhow.

5. Docusaurus

   4 303 59,543 9.6 TypeScript

   Easy to maintain open source documentation websites.

   

   LivePreview is not server-rendered so a layout shift occurs, though LiveEditor seems to support SSR. You should refer to Docusaurus Live Codeblock theme for more solid implementation including fallback on the server. Also, see the issue about SSR

Suggest a related project