Render components in your content

Content authored in the admin – a collection description, a content page body – can embed Fontdue components directly, written as custom elements like <fontdue-character-viewer> or <fontdue-buy-button>. An editor can drop a type tester or a buy button into a description without a code change. To make those elements render as live components on a React site, swap each custom element for its React import as you render the HTML.

The example template does this with a small helper that parses an HTML field and replaces each Fontdue element with its component:

// FontdueHTML.tsx (excerpt)
import parse from "html-react-parser";
import CharacterViewer from "fontdue-js/CharacterViewer";
import BuyButton from "fontdue-js/BuyButton";

export default function FontdueHTML({ html }: { html: string | null | undefined }) {
  return parse(html ?? "", {
    replace: (node) => {
      if ("name" in node && "attribs" in node) {
        const props = attrsToProps(node.attribs); // attributes → React props
        if (node.name === "fontdue-character-viewer") return <CharacterViewer {...props} />;
        if (node.name === "fontdue-buy-button") return <BuyButton {...props} />;
        // ...one branch per element the editor can embed
      }
    },
  });
}

Render any HTML field through <FontdueHTML html={...} /> and the elements an editor wrote in the admin become live components. The full element-to-component mapping is in the template’s FontdueHTML component.