svelte-headless-notion
v0.0.6
Published
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.
Downloads
420
Readme
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