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: A View of BoondireferencedManifests:  - https://api.dc.library.northwestern.edu/api/v2/works/4bdb5a22-6c7f-498d-8e6e-e49ea9bc4778?as=iiif--- # A View of Boondi Northwestern University Libraries dates _The town & pass of Boondi, in Rajpootana_to 1826 to 1830. Explore the print in the viewer below. ## Explore the work <Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/4bdb5a22-6c7f-498d-8e6e-e49ea9bc4778?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 Tip({children}: {children?: ReactNode}) {  return <article className="custom-tip">{children}</article>;}

export const components = {  Tip: './Tip.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:

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

Included helpers

• Bibliography: render every MDX footnote as a site-wide bibliography.
• 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.