1. Notion original

2. Notion API

Partial output of src/routes/[slug]/notion-export.js

{
  "object": "block",
  "id": "4b8866c2-40ba-4b69-9570-b433e2261e63",
  "created_time": "2022-01-28T00:10:00.000Z",
  "last_edited_time": "2022-01-28T00:11:00.000Z",
  "has_children": false,
  "archived": false,
  "type": "image",
  "image": {
    "caption": [],
    "type": "file",
    "file": {
      "url": "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/4c737e93-7d21-42a1-9b66-23a53ecc0bca/282A2480-D6DE-4CA4-889E-068415F73B90_1_105_c.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220131%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220131T203424Z&X-Amz-Expires=3600&X-Amz-Signature=b9b59221adc2ec38dc21fe86a6d9adfff3966e77511b6be3185a5b6439eab0f3&X-Amz-SignedHeaders=host&x-id=GetObject",
      "expiry_time": "2022-01-31T21:34:23.999Z"
    }
  }
}
  json

3. Svelte output

Partial output of src/routes/[slug].svelte

<Image url="/assets/other-components/image/64680bf8-12ce-46f7-adfb-2c9822d2346b.jpg">cyborg tita</Image>
  html

The image is stored locally, using block id as the filename.

4. Example rendering

Rendered by Image.svelte

🏠 Browse the docs ⚘

High-level Discussion

Where notion2svelte Fits

Configuring your .env

Turn-intoable Block Components

Paragraph (aka “Text”)

Toggle Headings (not yet implemented)

Layout-only Components

IndentGroup

Column & ColumnList

Page-level Components

Title (aka Name)

Cover (Image & Icon)

Annotation Components

bold → <strong>

italic → <em>

~~strikethrough~~ → <s>

Other Components