<aside> 💡 This page is documentation for repository below. https://github.com/sota1235/notion-sdk-js-helper

</aside>

Paragraph block

Code

await client.pages.create({
  // ...
  children: [
    paragraph('paragraph'),
    paragraph('colored paragraph', {
      blockColor: 'blue',
    }),
    paragraph('annotated paragraph', {
      textAnnotation: {
        bold: true,
      },
    }),
    paragraph('parent paragraph', {
      children: [
        paragraph('child paragraph'),
      ],
    }),
  ],
});

Result

paragraph

colored paragraph

annotated paragraph

parent paragraph

child paragraph

Header blocks

Code

await client.pages.create({
  // ...
  children: [
    heading1('Heading1'),
    heading2('Heading2'),
    heading3('Heading3'),
    heading1('Toggleable heading1', {
      isToggleable: true,
      children: [
        heading2('Decorated header', {
          blockColor: 'red_background',
          textAnnotation: {
            italic: true,
          },
        }),
      ],
    }),
  ],
});

Result

Heading1

Heading2

Heading3

Toggleable heading1

Callout blocks

Code

await client.pages.create({
  // ...
  children: [
    callout('Callout', '🥴'),
    callout('Change color as you like', '🎨', {
      blockColor: 'red_background',
    }),
  ],
});

Result

<aside> 🥴 Callout

</aside>

<aside> 🎨 Change color as you like

</aside>

Quote blocks

Code

await client.pages.create({
  // ...
  children: [
    quote('Some great articles.'),
    quote('Some great articles with greate background color.', {
      blockColor: 'yellow_background',
    }),
  ],
});

Result

Some great articles.

Some great articles with greate background color.

List blocks

Code

await client.pages.create({
  // ...
  children: [
    bulletedListItem('Bulleted list item 1'),
    bulletedListItem('Bulleted list item 2', {
      children: [
        bulletedListItem('Child bulleted list item'),
      ],
    }),
    numberedListItem('Numbered list item 1'),
    numberedListItem('Numbered list item 2', {
      children: [
        numberedListItem('Child numbered list item'),
      ],
    }),
  ],
});

Result

• Bulleted list item 1
• Bulleted list item 2
  • Child bulleted list item

1. Numbered list item 1
2. Numbered list item 2
   1. Child numbered list item

Todo blocks

Code

await client.pages.create({
  // ...
  children: [
    todo('TODO 1'),
    todo('TODO 2', {
      checked: true,
      children: [
        todo('Child TODO'),
      ],
    }),
  ],
});

Result

• [ ] TODO 1
• [x] TODO 2
  • [ ] Child TODO

Toggle blocks

Code

await client.pages.create({
  // ...
  children: [
    toggle('Toggle block', {
      children: [
        paragraph('Child paragraph'),
      ],
    }),
  ],
});

• Toggle block

Code blocks

Code

await client.pages.create({
  // ...
  children: [
    code("console.log('Code block is here!');", 'typescript'),
  ],
});

Result

console.log('Code block is here!');

External resources blocks

Code

await client.pages.create({
  // ...
  children: [
    embed('<https://example.com/>', {
      captions: [richText('example caption', undefined, undefined)],
    }),
    image(
      '<https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Notion-logo.svg/1200px-Notion-logo.svg.png>',
      {
        captions: [richText('image caption', undefined, undefined)],
      },
    ),
  ],
});

Result

example caption

example caption

image caption

Divider blocks