> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/makenotion/notion-sdk-js/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Official JavaScript/TypeScript client library for the Notion API

<div className="relative bg-gradient-to-br from-[#040404] via-[#1a1a1a] to-[#040404] dark:from-[#0f1117] dark:via-[#1a1d27] dark:to-[#0f1117] overflow-hidden">
  <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-40" />

  <div className="relative max-w-7xl mx-auto px-6 sm:px-8 py-20 lg:py-24">
    <div className="grid lg:grid-cols-12 gap-12 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6">
          Notion SDK for JavaScript
        </h1>

        <p className="text-lg sm:text-xl text-gray-300 dark:text-gray-400 max-w-2xl mb-8">
          A simple and easy-to-use client for the Notion API. Build powerful integrations with type-safe TypeScript support, automatic retries, and comprehensive error handling.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-white text-[#040404] font-semibold hover:bg-gray-100 transition-colors no-underline">
            Get Started

            <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </a>

          <a href="/api/client" className="inline-flex items-center px-6 py-3 rounded-lg border border-white/30 bg-white/10 text-white font-semibold hover:bg-white/20 transition-colors no-underline backdrop-blur-sm">
            API Reference
          </a>
        </div>
      </div>

      <div className="lg:col-span-5 hidden lg:block">
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-[#040404] to-[#7c7c7c] rounded-2xl blur-2xl opacity-20" />

          <div className="relative bg-[#1a1d27] dark:bg-[#1a1d27] rounded-2xl p-6 border border-[#27272a] shadow-2xl">
            <div className="flex items-center gap-2 mb-4">
              <div className="w-3 h-3 rounded-full bg-red-500" />

              <div className="w-3 h-3 rounded-full bg-yellow-500" />

              <div className="w-3 h-3 rounded-full bg-green-500" />
            </div>

            <pre className="text-sm text-gray-300 overflow-x-auto">
              <code>
                {`const { Client } = require('@notionhq/client')

                                const notion = new Client({
                                auth: process.env.NOTION_TOKEN
                                })

                                const response = await notion.databases.query({
                                database_id: '897e5a76-ae52-4b48'
                                })`}
              </code>
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3">Quick Start</h2>
  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">Get up and running with the Notion SDK in minutes</p>

  <Steps>
    <Step title="Install the package">
      Install the Notion SDK using your preferred package manager:

      <CodeGroup>
        ```bash npm theme={null}
        npm install @notionhq/client
        ```

        ```bash yarn theme={null}
        yarn add @notionhq/client
        ```

        ```bash pnpm theme={null}
        pnpm add @notionhq/client
        ```
      </CodeGroup>
    </Step>

    <Step title="Create an integration">
      Go to [Notion's developer portal](https://www.notion.so/my-integrations) and create a new integration to get your API token. Make sure to grant the integration the necessary permissions for your use case.

      <Note>
        Store your API token securely as an environment variable. Never commit it to version control.
      </Note>
    </Step>

    <Step title="Initialize the client">
      Import and initialize the client with your integration token:

      ```javascript theme={null}
      const { Client } = require('@notionhq/client')

      const notion = new Client({
        auth: process.env.NOTION_TOKEN
      })
      ```
    </Step>

    <Step title="Make your first request">
      Start making requests to the Notion API:

      ```javascript theme={null}
      const response = await notion.users.list({})
      console.log(response.results)
      ```

      <Accordion title="Example Response">
        ```json theme={null}
        {
          "results": [
            {
              "object": "user",
              "id": "d40e767c-d7af-4b18-a86d-55c61f1e39a4",
              "type": "person",
              "person": {
                "email": "user@example.org"
              },
              "name": "Jane Doe"
            }
          ]
        }
        ```
      </Accordion>
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3">Explore by Topic</h2>
  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">Learn about the key features and capabilities of the SDK</p>

  <CardGroup cols={3}>
    <Card title="Authentication" icon="key" href="/authentication">
      Set up OAuth flows and manage API tokens for your integration
    </Card>

    <Card title="Error Handling" icon="shield-halved" href="/concepts/error-handling">
      Handle errors gracefully with type-safe error codes and utilities
    </Card>

    <Card title="TypeScript Support" icon="code" href="/concepts/typescript">
      Leverage full TypeScript type definitions for all API operations
    </Card>

    <Card title="Pagination" icon="list" href="/guides/pagination">
      Efficiently iterate through large result sets with built-in utilities
    </Card>

    <Card title="Automatic Retries" icon="rotate" href="/concepts/retries">
      Automatic retry logic for rate limits and transient server errors
    </Card>

    <Card title="Type Guards" icon="filter" href="/guides/type-guards">
      Distinguish between full and partial API responses with type guards
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3">API Resources</h2>
  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">Explore the complete API reference for all available endpoints</p>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    <a href="/api/pages/create" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#040404] dark:hover:border-[#7c7c7c] overflow-hidden transition-colors no-underline">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
          <svg className="w-5 h-5 text-[#7c7c7c]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
          </svg>

          Pages
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Create, retrieve, update, and move pages within your Notion workspace
        </p>

        <div className="flex items-center text-sm text-gray-500 dark:text-gray-500 group-hover:text-[#040404] dark:group-hover:text-[#7c7c7c] transition-colors">
          Explore pages API

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/api/blocks/retrieve" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#040404] dark:hover:border-[#7c7c7c] overflow-hidden transition-colors no-underline">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
          <svg className="w-5 h-5 text-[#7c7c7c]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 16a1 1 0 011-1h4a1 1 0 011 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-3zM14 16a1 1 0 011-1h4a1 1 0 011 1v3a1 1 0 01-1 1h-4a1 1 0 01-1-1v-3z" />
          </svg>

          Blocks
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Manage block content including CRUD operations and children management
        </p>

        <div className="flex items-center text-sm text-gray-500 dark:text-gray-500 group-hover:text-[#040404] dark:group-hover:text-[#7c7c7c] transition-colors">
          Explore blocks API

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/api/databases/query" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#040404] dark:hover:border-[#7c7c7c] overflow-hidden transition-colors no-underline">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
          <svg className="w-5 h-5 text-[#7c7c7c]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
          </svg>

          Databases
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Query, create, and update databases with powerful filtering and sorting
        </p>

        <div className="flex items-center text-sm text-gray-500 dark:text-gray-500 group-hover:text-[#040404] dark:group-hover:text-[#7c7c7c] transition-colors">
          Explore databases API

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/api/search" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#040404] dark:hover:border-[#7c7c7c] overflow-hidden transition-colors no-underline">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
          <svg className="w-5 h-5 text-[#7c7c7c]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>

          Search
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Search across pages and databases in your Notion workspace
        </p>

        <div className="flex items-center text-sm text-gray-500 dark:text-gray-500 group-hover:text-[#040404] dark:group-hover:text-[#7c7c7c] transition-colors">
          Explore search API

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="bg-gradient-to-r from-[#040404] to-[#1a1a1a] dark:from-[#1a1d27] dark:to-[#242838] rounded-2xl p-8 sm:p-12 border border-[#27272a]">
    <h2 className="text-2xl sm:text-3xl font-bold text-white mb-4">Ready to build with Notion?</h2>

    <p className="text-lg text-gray-300 dark:text-gray-400 mb-6 max-w-2xl">
      Join thousands of developers building powerful integrations with the Notion API. From simple automation to complex applications, the Notion SDK makes it easy.
    </p>

    <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-white text-[#040404] font-semibold hover:bg-gray-100 transition-colors no-underline">
      Start Building

      <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
      </svg>
    </a>
  </div>
</div>
