Skip to contentnotionic
Docs menu

Guides

Footnotes

Numbered footnotes from a section of your Notion page.

Notion has no footnote block, so notionic builds footnotes from what Notion has: a section of notes at the end of the page, and links to them in the text. Each link becomes a numbered superscript, and the section becomes a footnote list that links back to each reference. Nothing extra is fetched, and no JavaScript ships.

Write footnotes in Notion

  1. At the end of the page, add a heading named Footnotes, at any level.
  2. Under it, write each note as its own paragraph or list item.
  3. In the text, select the word and link it to its note: on the note, open ⋯ › Copy link to block, then paste it as the word's link.

The links still work in Notion: clicking one jumps to its note.

  • Numbers follow reading order. The first note you link to is 1, wherever it sits in the list, and the list is sorted by number.
  • A note linked twice keeps one number, and gets a back-link to each place: ↩ a b.
  • The section runs to the next heading of the same or a higher level. Under a toggleable heading, it's the toggle's content.
  • Notes nothing links to are listed after the numbered ones, so nothing disappears. A section nothing links to renders as ordinary content.

Options

TypeScript
<NotionRenderer  blocks={blocks}  footnotes={{    headings: ["Footnotes", "Referências", "Références"],    showTitle: true,    title: "Notes",  }}/>
  • headings: the heading texts that start the section, matched ignoring case. Default ["Footnotes"]. List one per language you write in; [] turns footnotes off.
  • showTitle: show the heading above the list. By default, a separator sits there instead, and the heading is only read by screen readers.
  • title: the title to show, instead of the heading's text.

Change the list

The list renders through Footnotes. Replace it with components.footnotes, which gets the notes (each with its block, number and refIds), the title, showTitle, the heading's level and context:

TypeScript
import { RichText, type FootnotesProps } from "notionic"
function MyFootnotes({ notes, context }: FootnotesProps) {  return (    <ol className="text-sm">      {notes.map((note) => (        <li key={note.block.id} id={note.number ? `fn-${note.number}` : undefined}>          {/* render note.block, and link back to note.refIds */}        </li>      ))}    </ol>  )}
<NotionRenderer blocks={blocks} components={{ footnotes: MyFootnotes }} />

Keep the ids: references link to #fn-1, and back-links to #fnref-1, #fnref-1-2…

Outlines and Markdown

collectHeadings leaves the footnotes heading out of a table of contents, unless the title shows. blocksToMarkdown writes GitHub-flavored footnotes: word[^1] in the text and [^1]: The note at the end. Pass both the same footnotes option as the renderer:

TypeScript
collectHeadings(blocks, { footnotes })blocksToMarkdown(blocks, { footnotes })