Components

Create contextual stories under content/ using MDX — Markdown with embedded components. Every file becomes a page during the build and can pull in IIIF resources, sliders, and cards.

See the Creating Markdown Content guide for a full walkthrough.

Authoring basics

• Store .mdx files under content/. Nested directories become URL paths.
• Start each file with optional YAML front matter to set titles, metadata, and referenced manifests.
• Write Markdown as usual, then drop components such as <Viewer /> or <ReferencedItems /> wherever you need them.

Example

---title: The Nez Percé (Nimíipuu)referencedManifests:  - https://api.dc.library.northwestern.edu/api/v2/works/14a6aa15-9e12-47a7-9617-91f430d4f47b?as=iiif--- # The Nez Percé (Nimíipuu) The Nez Percé, or Nimíipuu, lived across what is now Idaho, Oregon, and Washington. ## Watch the work <Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/14a6aa15-9e12-47a7-9617-91f430d4f47b?as=iiif" /> <ReferencedItems />

Custom MDX components

Canopy auto-loads React components from app/components/mdx.tsx. Export any component you want to use and it becomes available inside every MDX file.

import type {ReactNode} from 'react'; export default function Callout({children}: {children?: ReactNode}) {  return <article className="custom-callout">{children}</article>;}

export const components = {  Callout: './Callout.tsx',};

• components can export multiple entries. You can also export individual functions (e.g., export const Gallery = () => …) and they’ll be merged automatically.
• The entry supports .ts, .tsx, .js, and .jsx and is bundled with esbuild during every build.
• npm run dev watches app/components/**/*.{js,jsx,ts,tsx}. Changing a component rerenders MDX with the new version and triggers the browser reload.

Once a component is exported, use it directly in content:

<Callout>  <p>The Canopy builder hydrates everything automatically.</p></Callout>

Included helpers

• GoogleAnalytics: drop-in Global Site Tag component ready for _app.mdx.

Developers who need deeper guidance—including runtime-only components, bundling behavior, and troubleshooting tips—should read Developers → Components. That page covers both SSR-safe components and the clientComponents runtime workflow so we don’t duplicate instructions here.