MDX runtime - render MDX on the client side with create react app - MDX for data exchange

[doldsimo]

Hello,

I am working on a project where I want to use MDX files for data exchange with create react app.

So the client has to render MDX at runtime.
I created a project with the runtime package.
It is working fine, but the current documentation shows that the runtime entry is in "WIP".
So I used the example from mdx runtime which is described in the older docs and the npm page.

The warnings say that it is not the recommended way to use MDX. So which is the correct way to use MDX to render while runtime?

Because of the warning I created a second project with which I can also render MDX at runtime with the example from the docs
in the do it yourselfe section on the getting started page.
So I rewrite the example that it is working in my create react app project.
After that, this approach was also working for me to render MDX at the runtime on the client side.

So I am on the point where I can render MDX at runtime with both projects. My question is does the runtime package the same as the "do it yourself" entry in the background?
And which approach would you recommend to use to continue?
Are there some important changes in the further release of the runtime package entry?
And could you say when will it be released?

Thank you for helping!

[ChristianMurphy]

I am working on a project where I want to use MDX files for data exchange with create react app.
And which approach would you recommend to use to continue?

Could you expand more on your use case and why you want to send components dynamically to the client?
Are you rendering user generated content? Or files written by yourself/your team?
Would serverside rendering or static file rendering work as an alternative?

The warnings say that it is not the recommended way to use MDX. So which is the correct way to use MDX to render while runtime?

Using @mdx-js/runtime is the equivalent of using eval. It can run any code.
Either use it with content that you trust completely.
Or sandbox the code to isolate it and limit potential impact, using sandbox/isolation libraries like: https://github.com/asvd/jailed, https://github.com/LavaMoat/lavamoat, etc

My question is does the runtime package the same as the "do it yourself" entry in the background?

Mostly, you can compare with the evaluate and run files in https://github.com/mdx-js/mdx/tree/main/packages/mdx/lib for a full comparison.

Are there some important changes in the further release of the runtime package entry?

Soon runtime will become evaluate mode on @mdx-js/mdx https://github.com/mdx-js/mdx/tree/main/packages/mdx#evaluatefile-options

And could you say when will it be released?

You can follow updates to the version 2 release, and it's release date at #1041

[doldsimo]

@ChristianMurphy thanks for the answer you helped me a lot!

My usecase is that I am creating a serverless learning application for students.

So for example an MDX file (or multiple Files in a .zip) are created by a tutor with an editor.
The students have the serverless application installed as a PWA where these files are loading in at runtime, because I use MDX for that data exchange of a learning section.

So the files are written by an editor which one is also created by myself, but that output file/files could also be modified, which means a security risk.
So I will use a sandbox for isolating.

[doldsimo]

@ChristianMurphy is there an example that shows how a sandbox/isolation library is used in the context of MDX to render the content on the client side?

I tried to do something with jailed, where I can run Javascript in the sandbox so far. However, I have problems how I can combine jailed with MDX.

So could you explain or show me an repository/codesandbox or an approach how I can use jailed in combination with MDX?

[tmkasun]

Hi @ChristianMurphy & @doldsimo

I too have the exact same requirement, We also have a serverless(no NodeJS backend) application and want to give MDX support to users to write their API documents. And render it in the client-side.

[wooorm]

There is not example yet.
Jailed hasn’t been updated for 5 years, that might signify that it won’t work well.
If you want to use Jailed or similar though, I think that’s more a question for those projects.
I wrote a bit about security concerns with MDX here: https://v2.mdxjs.com/docs/getting-started/#security