Is there any plugin that can turn jsx code into code playground?

[aweiu]

Suppose the content of mdx is:

The result displayed by the browser is:

Or a demo card like this:

[ChristianMurphy]

Are you looking for a playground for JSX codeblocks?
If so https://github.com/kevin940726/remark-codesandbox may be what you are looking for.

If you are looking for the source of the playground on the site, it isn't a plugin, but it's available at https://github.com/mdx-js/mdx/blob/main/docs/_component/editor.client.js

If you are looking for a more full featured documentation solution, there are several mdx based ones:
https://storybook.js.org/docs/react/api/mdx
https://docusaurus.io/docs/markdown-features/react

[aweiu]

Thanks for your reply! But none of those you listed is what I want.

My requirement is to "convert all the JSX code of the user in an mdx file into playground"

---

Now, I am writing a remark plug-in to implement it, But I have a big problem：How can multiple JSX code blocks in the same mdx file isolate the scope?，for example:

## Example 1

\```jsx
import TestComponent from './Test'

const testVariable = 1
\```

## Example 2

\```jsx
import TestComponent from './Test'

const testVariable = 2
\```

You will receive an error that Testcomponent and testvariable are redefined.

I don't know how to generate mdast in the remark plug-in to realize the scope isolation of each JSX block

[ChristianMurphy]

How can multiple JSX code blocks in the same mdx file isolate the scope?

I don't quite understand, what do you want the scope isolated from?

---

In your example you didn't use codeblocks, did you mean to? (if so use quaduple backticks in the outer codeblock ```` so you can use triple back ticks in the block ```)
Could you also share an example of how you are trying to run the code? Maybe in a sandbox:

description	codesandbox	stackblitz
MDX Loader with Next.js	codesandbox	stackblitz
MDX Evaluate with Node.js	codesandbox	stackblitz
MDX Evaluate with Create React App	codesandbox	stackblitz

[aweiu]

Coming! sorry to bother you again:

https://codesandbox.io/s/magical-river-0pkmm?file=/next.config.mjs

[wooorm]

A new thread, but responding to #1902 (reply in thread).

The biggest problem with your approach: JSX is not MDX. If you want JSX, don’t use MDX. If you want MDX, don’t use ```jsx. Use Babel or so when you want to evaluate JS(X).

Further problems with your code:

• You are using MDX in MDX. This is unrelated to what you want to do (turning code into a playground)
• The code for the editor component on our website is here
• The—hastily written—plugin used on our website to enhance certain code blocks in MDX files, is here

[aweiu]

QQ20220119-193956-HD.mp4

I have now implemented it by import a demo file instead of converting JSX directly.

After I finish it, I will share this remark plugin on GitHub.(Now it's too simple)