Docs menu
Examples
Links and embeds
Bookmarks, link previews, embeds, demos, child pages and links to pages.
Each example below is a real Notion block, rendered by notionic's built-in components, followed by a recipe to change it.
In Notion: paste a link and choose Create bookmark, or type /bookmark.
developers.notion.com
(opens in a new tab)Renders as: a card with the page's title, description and image, which fetchBlocks reads from the linked page. The image moves on top when the card is narrow. See Supported blocks.
import type { BlockProps } from "notionic"
export function Bookmark({ block }: BlockProps<"bookmark">) { const { url } = block.bookmark const preview = block.bookmarkPreview return ( <a href={url} className="flex flex-col rounded-lg border border-border p-4 hover:bg-muted"> <span className="font-medium">{preview?.title ?? url}</span> {preview?.description ? ( <span className="line-clamp-2 text-sm text-muted-foreground">{preview.description}</span> ) : null} </a> )}
// bookmarkPreviews: false skips fetching the linked pages: cards show the URL.const blocks = await fetchBlocks(notion, pageId, { bookmarkPreviews: false })<NotionRenderer blocks={blocks} components={{ bookmark: Bookmark }} />In Notion: paste a link and choose Paste as preview.
Link previews can't be added through Notion's API, so there's no live example here. One renders as a card like a bookmark's, from the same preview, and takes the same components.link_preview override.
In Notion: type /embed and paste a link.
(opens in a new tab)Renders as: a card like a bookmark's, unless its URL ends in /demos/<name>, which renders one of your demos, or its site is in embeds, which loads it in a sandboxed iframe. ?height= sets the height in pixels.
import type { DemoProps } from "notionic"
// A demo is your component; params come from the embed URL's query string.function Counter({ params }: DemoProps) { return <button type="button">Start at {params.start ?? "0"}</button>}
// An embed of …/demos/counter?start=5 renders <Counter />; codepen.io loads live.<NotionRenderer blocks={blocks} demos={{ counter: Counter }} embeds={["codepen.io"]} />In Notion: type /page to add a page inside this one.
A child page
Renders as: a row with the page's icon and title. Its content isn't fetched: link the row to wherever you publish it with pageHref. On these docs, only other docs get a link.
const paths = new Map([["3fcb17268ab381d995c6ff3f97dc741b", "/blog/a-child-page"]])
// Child pages, links to pages and page mentions all go through pageHref.<NotionRenderer blocks={blocks} pageHref={(pageId) => paths.get(pageId) ?? null} />In Notion: type /link to page and pick a page.
Link to page blocks can't be added through Notion's API, so there's no live example here. One renders like a child page: a row with the linked page's icon and title, through pageHref.