Svelte-notion

Headless Notion page rendering engine for Svelte. Simply fetch a page and render it as you want with snippets. Lightweight, fully typed and no runtime dependencies.

Install

pnpm add svelte-headless-notion

npm install svelte-headless-notion

Documentation and example

The documentation here is a notion page itself rendered with this librairy. The source code of this page is here

Prerequisites

• Notion API token
• Svelte >= 5.0

Usage

// src/routes/+page.server.ts
import { getPage } from 'svelte-headless-notion/server';

export const load = async () => {
	// This very slow you will obsiously want to chache it somewhere and make a custom SWR logic.
	const page = await getPage({
		auth: PRIVATE_NOTION_API_TOKEN,
		id: 'THE_PAGE_ID'
	});

	return {
		page
	};
};

<!--  src/routes/+page.svelte -->
<script lang="ts">
	import Page from 'svelte-headless-notion';
	let { data } = $props();
</script>

<Page page={data.data}>
	<!-- Example snippet to render a paragraph block -->
	{#snippet paragraph({ block, children, content })}
		<div>
			<p>
				{@render content()}
			</p>
			{@render children()}
		</div>
	{/snippet}
	<!-- Define other block snippet here (callout, image, pdf, child_database, etc...) -->
</Page>

License

MIT