How to edit MDX online？

[New-King]

I am a user from China, forgive my poor English 😁.. I think MDX is amazing and interesting, and I'm planning to use it for my personal website, but I'm having a bit of trouble...
I want to achieve a similar MDX online editing functions (https://mdxjs.com/playground/)

For example, right now I can get the following code with the codemirror editor and compile() :
let Code = String(await compile("# Hello", {
jsx:true,
remarkPlugins:[ remarkGfm ]
}))
console.log(Code)

Result👇
function _createMdxContent(props) {
const _components = Object.assign({
h1: "h1"
}, props.components);
return <_components.h1>{"Hello"}</_components.h1>;
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout>
: _createMdxContent(props);
}
export default MDXContent;

If I copy it 👆 to an mdx file, I can successfully use it as a component of the websiteimport Hello from Hello.mdx' <Hello/> ✅

But I want to use this MDX component right away, because it's temporary and needs to be changed frequently, I don't need to create a file, I want it to compile into a component that I can use right away. I don't know how the example of the official website is implemented, because I use Vite+vue3, I can't find a similar demo or method, vue seems to have no good plug-in to help me realize this function...😭

My ideal effect:👇
let Hello = SomeFunction(Code);
<Hello />

Rather than modifying the file manually or through a back-end server and returning the latest file

[wooorm]

You are looking for the evaluate function: https://mdxjs.com/packages/mdx/#evaluatefile-options.