Docs menu
Examples
Footnotes and Resources
Footnotes and a resources list, built from sections of the page.
Notion has no footnote or resources block, so notionic reads both from sections of the page. Each is shown once below; the guides have the details.
In Notion: add a heading named Footnotes at the end of the page, write each note under it, then link words in the text to the notes with Copy link to block. See Footnotes.
notionic numbers each linked word1 in reading order, and a note linked twice2 keeps its number, as this second link2 shows.
Renders as: a superscript number linking to the note, and a list at the end that links back to each reference, with no JavaScript.
// Name the section in other languages, and show its title above the list.<NotionRenderer blocks={blocks} footnotes={{ headings: ["Footnotes", "Notes"], showTitle: true, title: "Notes" }}/>In Notion: add a heading named Resources, and under it one list item per link, starting with the link. See Resources.
The live list is the Resources section at the end of this page, just above the footnotes.
Renders as: one row per link, with the site's favicon, the title and a muted description on one line.
import { plainText, type ResourcesProps } from "notionic"
// Cards in a grid instead of rows.export function Resources({ items }: ResourcesProps) { return ( <ul className="grid gap-2 sm:grid-cols-2"> {items.map((item) => ( <li key={item.block.id}> <a href={item.href} className="flex h-full flex-col rounded-lg border border-border p-3 hover:bg-muted"> <span className="font-medium">{plainText(item.title)}</span> <span className="text-sm text-muted-foreground"> {/* Plain text: links in the description can't sit inside the card's link. */} {item.description ? plainText(item.description) : item.preview?.description} </span> </a> </li> ))} </ul> )}
<NotionRenderer blocks={blocks} components={{ resources: Resources }} />- Notion API reference - The blocks notionic renders. (opens in a new tab)
- shadcn/ui - The components the registry builds on. (opens in a new tab)
- Tailwind CSS - Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. (opens in a new tab)
