Showcase: Ultra-lightweight native MathML formula rendering in MDX docs

[x-at-01]

MDX blends Markdown with JSX, giving developers rich customization capabilities. When rendering equations inside MDX, loading KaTeX/MathJax assets or CSS files inside components introduces bundle bloat.

Native MathML Core
By utilizing native MathML Core (fully supported by Chrome 109+, Safari, and Firefox), we can compile TeX formulas directly to native HTML <math> tags. This runs completely layout-engine free in the client.

We created @webc.site/math:

• Zero Client JS Overhead: Compiles TeX to MathML Core, allowing equations to render natively via browser C++ layout engine.
• Tiny Build Footprint: Only 3.58 KB (Gzipped), zero dependencies.
• Incredible Speed: Runs at ~329,000 ops/s, ensuring fast bundling during compile-time MDX compilation.

It can be easily integrated as an AST transformer plugin inside the MDX compilation pipeline, keeping React/Vue/Svelte MDX component outputs super lightweight!

[ChristianMurphy]

Thanks for sharing @xtco3o!
Are you planning on making a remark plugin, or adding support in remark-math?
Also I notice the package is missing TypeScript typings is that planned?

[x-at-01]

Hi @ChristianMurphy! Yes, I have created and published a remark plugin: @webc.site/math-remark (npm link: https://www.npmjs.com/package/@webc.site/math-remark), which can be used in MDX. It also includes TypeScript definitions (index.d.ts).