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