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

• remark-mdx-code-meta

  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.

• react-live

  2 4,110 6.8 TypeScript

  A flexible playground for live editing React components

  

We depend on react-live for preview and editor.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• prism-react-renderer

  13 1,798 6.8 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.

• Docusaurus

  282 52,824 9.5 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