Demo

Every kind of block, rendered on the server by <NotionBlocks>.

Below is a sample page in the shape fetchBlockTree returns, rendered by <NotionBlocks blocks={blocks} /> while this site was built. It is plain HTML: open your browser's developer tools and you will find no client component except the play button.

Text

Rich text keeps its bold, italic, ~~strikethrough~~, inline code, colors, backgrounds and links.

Blocks become the HTML you would write by hand.

Callouts keep their icon. Everything here was rendered on the server.

Lists

Consecutive items are grouped into a list
Items can nest
1. Numbered inside bulleted
2. And so on

Render Notion pages

Ship them as HTML, not JavaScript

Toggles become <details>

Hidden until opened, with no JavaScript.

Code and math

import { NotionBlocks } from "@yokinist/notion-rsc";

export default async function Page() {
  const blocks = await fetchBlockTree(notion, pageId);
  return <NotionBlocks blocks={blocks} />;
}

\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

Layout

Block	Element	Client JS
Toggle	<details>	None
Code	<pre>	None
Video embed	<button>	Until clicked

Columns

Side by side from 768px wide, stacked on smaller screens.

Widths

As dragged in Notion: 60% and 40% here.

Media and embeds

Images and files

Images get a caption from <figcaption>.

Bookmarks

The official API only gives a bookmark's URL, so the title, description and image come from the page's Open Graph tags.

ReactReact is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.react.dev

GitHub - vercel/next.js: The React FrameworkThe React Framework. Contribute to vercel/next.js development by creating an account on GitHub.github.com

Players

Players show a preview from oEmbed and load only when clicked, so they set no third-party cookies until then.

YouTube

Spotify

SoundCloud

Posts on X

Examples

Small blogs on a Notion database, in Next.js, React Router and TanStack Start.

@yokinist/notion-fetch

Rate-limit-safe requests, whole pages in one call, and files that do not expire.