Use remark-mdx only to parse jsx syntax

[Specy]

I'm using react-markdown library and I like the flexibility it gives with including your own components, I was expanding on it to create custom components using html syntax using the raw plugin, it works fine but It's a bit buggy sometimes and using objects as props is annoying, so I wanted to try and use something better and stumbled on the remark-mdx plugin. Ideally I'd want to continue using the react markdown library and just add a plugin to it but I was wondering, is it possible to use remark-mdx only to parse the syntax and props of jsx elements? I don't want imports and other things, I'll only use it for remote md and live editors. If anyone has suggestions let me know!

[ChristianMurphy]

Welcome @Specy! 👋

TL;DR Use MDX directly, it does all the things you you describe in your question, out of the box.

I like the flexibility it gives with including your own components

Custom components are a common need there are three approaches to it:

1. web components/custom elements https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements
2. markdown directives https://github.com/remarkjs/remark-directive
3. MDX https://mdxjs.com/

It's a bit buggy sometimes

Can you give a specific example of what you believe is a bug?

using objects as props is annoying

HTML does not support this

I'd want to continue using the react markdown library and just add a plugin to it but I was wondering, is it possible to use remark-mdx only to parse the syntax and props of jsx elements?

No.
react-markdown parses Markdown into a Markdown AST, converts that into an HTML AST, then generates h() calls.
mdx parses MDX into Markdown + JS AST, converts that into and HTML + JS AST, converts that into a JS AST, compiles that into a JS file, then can (optionally) run that file.
The pipelines are significantly different, trying to mix them would be complex, especially since MDX does everything you described as requirements already (more on that below).

syntax and props of jsx elements? I don't want imports and other things

MDX is a language. You can choose what you write or do not write. There is no requirement to use imports.
MDX has a components prop which can pass in elements you want globally available on the page.

I'll only use it for remote md and live editors.

MDX can be both server side and client side rendered.
It can handle both static content pulled from a database and live editing needs.
Plus directly using MDX give access to related tooling like: MDX Intellisense https://github.com/mdx-js/mdx-analyzer, and MDX static analysis https://github.com/mdx-js/eslint-mdx, and a variety of pre-made MDX editors.

[Specy]

I've looked a bit the mdx website and I'm a bit confused about what it can do. The end users will be the ones writing the mdx so I need it to be safe both for server and client.
The reason why I mentioned I only want the syntax support is because of this, I want to provide components but don't want to allow all of the other things, the reason why I wanted to stick to the react markdown module was because it had plugin support but I saw that the mdx module also has it so I'd switch to it if I had a way to solve this other security issue (if there even is one)

[ChristianMurphy]

TL;DR if you want to support untrusted user generated content, consider using one of the first to suggestions from my initial reply:

1. web components/custom elements https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements
2. markdown directives https://github.com/remarkjs/remark-directive

---

I've looked a bit the mdx website and I'm a bit confused about what it can do.

It is a language, which mixes Markdown and JSX.
It compiles MDX down into a JavaScript file with hyperscript functions, that JavaScript output is portable across frameworks (React, Vue, Svelte, etc) and across runtimes (browser, node, deno, etc).

It also supports the remark, rehype, and recma ecosystem of plugins, which allow its output to be highly customized.

The end users will be the ones writing the mdx so I need it to be safe both for server and client.
[...] I had a way to solve this other security issue (if there even is one)

It can run both on the client and server.
Safety/security is another matter:

Please note that MDX is a programming language. If you trust your authors, that’s fine. But be extremely careful with user content and don’t let random people from the internet write MDX. If you do, you might want to look into using <iframe>s with sandbox, but security is hard, and that doesn’t seem to be 100%. For Node, vm2 sounds interesting. But you should probably also sandbox the whole OS using Docker or similar, perform rate limiting, and make sure processes can be killed when taking too long.

source: https://mdxjs.com/docs/getting-started/#security

Disabling imports will not change that.
JSX and expressions, by definition, can contain arbitrary code.

The reason why I mentioned I only want the syntax support is because of this, I want to provide components but don't want to allow all of the other things

If you want a focused markdown like experience which can embed custom components, without imports and risk of arbitrary code, look into markdown directives (https://github.com/remarkjs/remark-directive).

If you want JSX, understand that it is a superset of JavaScript, not a subset.
It comes with "all of the other things."
Trying to turn major syntax off, whether in react-markdown or in mdx will be: complex, error prone, and require deep technical knowledge of parsers and compilers.
You are essentially creating a brand new language forking off of markdown/mdx.

the reason why I wanted to stick to the react markdown module was because it had plugin support

MDX also supports remark and rehype, same as react-markdown.

[Specy]

At this point I might make a fork of react markdown to add support for custom components and prop validation, I already implemented most of it, just need to improve DX and make some improvements.

Thanks for all the info regarding MDX, I guess it's not fitting for my usecase but I might use it in the future for other projects

[ChristianMurphy]

TL;DR
You're welcome to use the code in any way you want.
Your current solution sounds like re-implementing MDX in a more round about way, without really addressing the security considerations. 🤔
I'd encourage you to take a step back from the low level details and think more about the high level needs of the project, there is likely a much simpler approach that achieves the same goal. (related https://xyproblem.info/ and https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem)
Happy to discuss more if you are interested.

---

At this point I might make a fork of react markdown to add support for custom components and prop validation

Okay, if you're building it off remark-mdx, that is the same base library mdx uses and also supports arbitrary JS.
The same goes for supporting JSX using any other library.
Pushing that into react-markdown doesn't make it more secure.

prop validation [...] improve DX and make some improvements

MDX has comprehensive capabilities around prop validation and author/developer experience built into https://github.com/mdx-js/mdx-analyzer and https://github.com/mdx-js/eslint-mdx