I've been frustrated with managing markdown in my projects for a long time so I'm happy to share a new approach that I implemented. To render md content, the first challenge is the choice of a library: On one hand, you have the "lego brick" solutions like unified, remark, and rehype. They're powerful, but setting up the whole AST pipeline and that plugging system is for me an unnecessary complexity. On the other hand, you have things like @next/mdx which are cool but too page-focused and doesn't work on the client side. So I used to prefer solution like markdown-to-jsx or react-markdown. The DX is much better, works client and server side, the solution is lighter. But that solutions don't support HTML or MDX out of the box, so you end up with the same plugin issues. Plus, using them with i18n (like i18next or next-intl) is usually a mess. You end up with a if/else logic to render the right language, and your page weight explodes. I finally also came across several issues regarding the front-matter handling. (And Until recently both of that solutions used to be react only solutions.) So I decided to build something new for intlayer. Something that just works out if the box. > Note that to do it, I chose to fork the amazing work from markdown-to-jsx v7.7.14 (by quantizor) which is based on simple-markdown v0.2.2 (by Khan Academy) to build the solution. So I build this parser with a few main goals: - Lightweight solution - Framework-agnostic (React, Vue, Svelte, Angular, Solid, Preact) - Simple MDX setup: No crazy plugin chains - SSR and Client-side support - Configurable at the provider level to map your design system components - Component-focused, to fine grain the rendering for each part of my app - Type-safe (Retrieving front-matter as a typed object, get types components Props) - i18n friendly (Loading optimized for i18n use cases) - using zod schema to validate the front-matter Demo: So what’s the innovation here? - Truly Universal: The exact same logic for React, Vue, Svelte, etc. - Lightweight MDX-like Compiler: Works seamlessly on the edge and server. - No Loading Time: Content is loaded at build time, whatever you are using fs, fetch, etc - Allows you to organize and reuse small markdown sections across multiple docs or pages easily. - Parse your front-matter in a type safe way. (like used to do contentLayer) For what use cases is it designed for? - Blogs / Doc / Privacy Policy / Terms of Service - Dynamic content retrieved from a backend - Externalizing pages content to a headless CMS - Loading .md files Complete docs: https://intlayer.org/doc/concept/content/markdown Code https://github.com/aymericzip/intlayer/ Does this resonate with you? Curious if others feel the same, and how you’re currently handling Markdown in your apps? |