Component-driven Markup

React, and other component-based JavaScript libraries have historically been used for web development – building a frontend site, whether it be statically generated or server-side rendering. But there's an interesting trend to reuse UI components in environments that have been generated by templates or by hand before.

Docusaurus (open sourced by Meta) is React for documentation websites. A common objection might be – we don't need React to build a documentation website, and you'd be right. But a few great things about the experience:

• Integrate your existing design system into your documentation site.

• It's easy to add interactivity to documentation. That means code examples that can be easily run in the browser. You can build this yourself from scratch, but it would be difficult to slot this into an existing Markdown-based documentation engine.

• Idiomatic customization with React components.

• Still human editable with a Markdown-React hybrid (MDX)

There are other documentation projects on the same wavelength like VitePress.

It's not just documentation but any sort of markup. MJML-React is a project that uses React to generate email templates. It doesn't look that easy to use, but email-friendly HTML is a notoriously hard thing to do and is often hand-crafted. Any component reuse would be good.

The tooling has a long way to go, but I think it's a promising path.

So turns the Heptagon of Configuration.