Notion.tsx

How to use

1npm install notion.tsx @notionhq/client

1// tsconfig.json
2{
3  "compilerOptions": {
4    "jsx": "react-jsx",
5    "jsxImportSource": "notion.tsx",
6  },
7}

Example

Code

1import { Client } from '@notionhq/client';
2import { notionTsx, Page } from 'notion.tsx';
3
4const client = new Client({
5  auth: process.env.NOTION_API_KEY,
6});
7
8await notionTsx(client).createPage(
9  <Page parentDatabaseId={databaseId}>
10    <property type="title" name="Name">
11      text page!
12    </property>
13    <p
14      slot={
15        /** Child block */
16        <code language="javascript">
17          <text bold>console</text>
18          .log(a)
19        </code>
20      }
21    >
22      {/** Block content */}
23      Test <text italic>content</text>
24    </p>
25    123
26    <p>New paragraph</p>
27  </Page>,
28);

Result

Supported Syntaxes

Block elements

• p: Paragraph block
• code: Code block
• embed
• bookmark
• img
• video
• pdf
• file
• audio
• math
• hr
• breadcrumb
• toc
• a
• table
• tr
• column
• h1
• h2
• h3
• ul
• ol
• todo
• li
• q
• summary
• template
• callout
• sync

Rich text elements

• text: string children are also fell back to text element
• a
• user
• time
• page
• database
• template-mention: ?
• math