Technical Documentation: GitbookIO/gitbook

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

GitBook

Table of Contents Copy Chapter

• Getting Started
• Contributing
  • Types of contributions
• Licensing
• Acknowledgements
• Legacy GitBook

Getting Started Copy Chapter

To run a local version of this project, please follow these simple steps.

Prerequisites Copy Section

• Node.js (Version: >= 22.3)
  • Use nvm for easy Node management
• Bun (Version: >=1.2.15)
  • We use a text-based lockfile which isn't supported below 1.2.15

Set up Copy Section

1. Clone the repo into a public GitHub repository. If you plan to distribute the code, keep the source code public to comply with GNU GPLv3. To clone in a private repository, acquire a commercial license.

git clone https://github.com/gitbookIO/gitbook.git

2. Ensure you are using the project's version of node. Running nvm use will change your local version to the correct one.

3. Install the project's dependencies through Bun.

bun install

4. Start your local development server.

bun dev

6. Open a published GitBook space in your web browser, prefixing it with http://localhost:3000/url.

examples:

• http://localhost:3000/url/gitbook.com/docs
• http://localhost:3000/url/open-source.gitbook.io/midjourney

Any published GitBook site can be accessed through your local development instance, and any updates you make to the codebase will be reflected in your browser.

CI and testing Copy Section

All pull-requests will be tested against both visual and performances testing to prevent regressions.

Fonts and Icons Copy Chapter

GitBook Open uses fontawesome. For self-hosting and local development, for licensing reasons, only the icons from the free version should be used.

Contributing Copy Chapter

GitBook's rendering engine is fully open source and built on top of Next.js. Head to our contributing guide to learn how to report bugs and suggest changes.

Types of contributions Copy Section

We encourage you to contribute to GitBook to help us build the best tool for documenting technical knowledge. If you're looking for some quick ways to contribute, continue reading to learn more about popular contributions.

Translations

The GitBook UI is rendered using a set of translation files found in packages/gitbook/src/intl/translations. Spotted a wrong or missing translation? Open an issue and let us know.

Bugs

Encounter a bug? Open an issue with as much detail as you can. Clear reports help us fix things faster for everyone.

Deployment Copy Chapter

[!WARNING]
While it is possible to self-host this project, we do not recommend this unless you are certain this option fits your need.

Looking for a specific feature in GitBook? Head to our contributing guide to suggest it.

Self-hosting this project puts the responsibility of maintaining and merging future updates on you. We cannot guarantee support, maintenance, or updates to forked and self-hosted instances of this project.

We want to make it as easy as possible for our community to collaborate and push the future of GitBook, which is why we encourage you to share your ideas with us instead of creating your own version.

This project allows you to self-host the rendering portion of your GitBook published content. Self-hosting has pros and cons.

On the pro side, you can customize the look and feel of your content, and better embed your documentation in your application.

On the con side, you become responsible for the reliability of your published site, and keeping the renderer up-to-date with the changes made to the GitBook platform.

License Copy Chapter

Distributed under the GNU GPLv3 License.

If you plan to distribute the code, you must make the source code public to comply with the GNU GPLv3. To clone in a private repository, acquire a commercial license.

See LICENSE for more information.

Badges Copy Chapter

[](https://www.gitbook.com/preview?utm_source=gitbook_readme_badge&utm_medium=organic&utm_campaign=preview_documentation&utm_content=link)

<a href="https://www.gitbook.com/preview?utm_source=gitbook_readme_badge&utm_medium=organic&utm_campaign=preview_documentation&utm_content=link">
    <img
        src="https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1"
    />
</a>

Acknowledgements Copy Chapter

GitBook wouldn't be possible without these projects:

• Next.js
• Bun
• Tailwind CSS
• Framer Motion

Contributors Copy Chapter

Legacy GitBook (Deprecated) Copy Chapter

Our previous version of GitBook and it's CLI tool are now deprecated. You can still view the old repository and it's commits on this branch.

Overview (`.changeset/README.md`) Copy Section

Changesets

Hello and welcome! This folder has been automatically generated by @changesets/cli, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it in our repository

We have a quick list of common questions to get you started engaging with this project in
our documentation

Overview (`packages/browser-types/README.md`) Copy Section

`@gitbook/browser-types`

Typescript types for the global variables available in a GitBook website. These types can be used by integrations embedding scripts.

Overview (`packages/cache-tags/README.md`) Copy Section

`@gitbook/cache-tags`

Utility to generate cache tags for GitBook Open.

Overview (`packages/colors/README.md`) Copy Section

`@gitbook/colors`

A set of default colors and transformation functions used throughout the GitBook Open and app.

Overview (`packages/embed/README.md`) Copy Section

GitBook Docs Embed (`@gitbook/embed`)

Embed your GitBook docs in your product or website.

The Docs Embed can contain three tabs:

• Assistant: The GitBook Assistant - an AI-powered chat interface to help users find answers
• Search: A search-focused surface for quickly finding pages and asking scoped questions
• Docs: A browser for navigating your documentation site

The embed is set up automatically based on your site's configuration. You can optionally customize and override the configuration with custom actions, tools, suggested questions, Authenticated Access, and more. See the Configuration section for all available options.

Usage

As a standalone script from your docs site Copy Chapter

All GitBook docs sites include a script to easily add the Docs Embed as a widget on your website.

The script is served at https://docs.company.com/~gitbook/embed/script.js.

You can find the embed script from your docs site settings, or you can copy the following and replace docs.company.com with your docs site hostname.

<script src="https://docs.company.com/~gitbook/embed/script.js"></script>

The script initializes the widget itself, so there is nothing to call. To pin the embed to one color
scheme, put it on the script URL — it has to be known before the widget renders:

<script src="https://docs.company.com/~gitbook/embed/script.js?theme=light"></script>

To authenticate the visitor, call init with their token. Keep tokens out of the script URL: it is
publicly cacheable and ends up in server logs.

<script src="https://docs.company.com/~gitbook/embed/script.js"></script>
<script>
window.GitBook('init',
    { siteURL: 'https://docs.company.com' },
    { visitor: { token: 'your-jwt-token' } }
);
</script>

The standalone script provides a global GitBook function. See the API Reference section for all available methods.

Example: Configuring the widget Copy Section

GitBook('configure', {
    button: {
        label: 'Ask',
        icon: 'assistant' // 'assistant' | 'sparkle' | 'help' | 'book'
    },
    tabs: ['assistant', 'search', 'docs'],
    defaultPage: '/getting-started',
    actions: [
        {
            icon: 'circle-question',
            label: 'Contact Support',
            onClick: () => window.open('https://support.example.com', '_blank')
        }
    ],
    greeting: { title: 'Welcome!', subtitle: 'How can I help?' },
    assistantName: 'Support Assistant',
    suggestions: ['What is GitBook?', 'How do I get started?'],
    tools: [/* ... */],
    closeButton: true,
});

See the Configuration section for all available options.

As a package from NPM Copy Chapter

Install the package: npm install @gitbook/embed and import it in your web application:

/* Detailed source-code truncated for AI context efficiency. */

As React components Copy Chapter

After installing the NPM package, you can import prebuilt React components:

import { GitBookProvider, GitBookFrame } from '@gitbook/embed/react';

<GitBookProvider siteURL="https://docs.company.com">
    <GitBookFrame
        colorScheme="dark"
        visitor={{
            token: 'your-jwt-token', // Optional: for Adaptive Content or Authenticated Access
            unsignedClaims: { userId: '123' } // Optional: custom claims for dynamic expressions
        }}
        tabs={['assistant', 'search', 'docs']}
        defaultPage="/getting-started"
        greeting={{ title: 'Welcome!', subtitle: 'How can I help?' }}
        assistantName="Support Assistant"
        suggestions={['What is GitBook?', 'How do I get started?']}
        actions={[
            {
                icon: 'circle-question',
                label: 'Contact Support',
                onClick: () => window.open('https://support.example.com', '_blank')
            }
        ]}
        tools={[/* ... */]}
        closeButton
    />
</GitBookProvider>

You can also use the useGitBook hook to access the client:

import { useGitBook } from '@gitbook/embed/react';

function MyComponent() {
    const gitbook = useGitBook();
    const frameURL = gitbook.getFrameURL({ colorScheme: 'dark', visitor: { token: '...' } });
    // ...
}

API Reference

Method Comparison Copy Chapter

Method Signatures Copy Chapter

Standalone Script Copy Section

• GitBook('init', options: { siteURL: string }, frameOptions?: { colorScheme?: 'light' | 'dark', visitor?: {...} }) - Initialize widget
• GitBook('show') - Show widget button
• GitBook('hide') - Hide widget button
• GitBook('open') - Open widget window
• GitBook('close') - Close widget window
• GitBook('toggle') - Toggle widget window
• GitBook('navigateToPage', path: string) - Navigate to page (accepts the page path within the site, an absolute path, or the full published URL; resolves pages in any space/section)
• GitBook('navigateToAssistant') - Navigate to assistant tab
• GitBook('postUserMessage', message: string) - Post message to chat
• GitBook('clearChat') - Clear chat history
• GitBook('configure', settings: {...}) - Configure widget
• GitBook('unload') - Unload widget

NPM Package Copy Section

Client Factory:

• createGitBook(options: { siteURL: string }) → GitBookClient
• client.getFrameURL(options?: { colorScheme?: 'light' | 'dark', visitor?: {...} }) → string
• client.createFrame(iframe: HTMLIFrameElement) → GitBookFrameClient

Frame Client:

• frame.navigateToPage(path: string) → void (accepts the page path within the site, an absolute path, or the full published URL; resolves pages in any space/section)
• frame.navigateToAssistant() → void
• frame.postUserMessage(message: string) → void
• frame.clearChat() → void
• frame.configure(settings: Partial<GitBookEmbeddableConfiguration>) → void
• frame.on(event: string, listener: Function) → () => void (unsubscribe)

React Components Copy Section

Components:

• <GitBookProvider siteURL: string> - Provider component
• <GitBookFrame {...props}> - Frame component (accepts all config options as props)

Hooks:

• useGitBook() → GitBookClient (must be used within <GitBookProvider>)

Configuration

Configuration options are available across usage methods as follows:

• Standalone script: via GitBook('configure', {...})
• NPM package: via frame.configure({...})
• React components: via props on <GitBookFrame>

`tabs` Copy Section

Available in: Standalone script, NPM package, React components

Override which tabs are displayed. Defaults to your site's configuration.

• Type: ('assistant' | 'search' | 'docs')[]

tabs: ['assistant', 'search', 'docs']

`defaultTab` Copy Section

Available in: Standalone script, NPM package, React components

The tab the embed opens on. Without it, the embed opens on defaultPage if set, otherwise on the assistant (or the docs when the assistant isn't available). The tab must be one of the enabled tabs.

• Type: 'assistant' | 'search' | 'docs'

tabs: ['assistant', 'search', 'docs'],
defaultTab: 'search'

defaultTab and defaultPage apply when the embed first loads: the standalone widget keeps its place when it is closed and reopened. To move it later, use navigateToPage or navigateToAssistant.

`defaultPage` Copy Section

Available in: Standalone script, NPM package, React components

The page the docs tab opens on, in place of your site's home page. Accepts the same references as navigateToPage: the page's path within the site, an absolute path, or its full published URL. Unless defaultTab says otherwise, the embed opens on this page.

• Type: string

defaultPage: '/getting-started/quickstart'

`closeButton` Copy Section

Available in: Standalone script, NPM package, React components

Display a close (x) button in the embed sidebar.

• Type: boolean
• Default: false

closeButton: true

Behavior:

• When clicked, the embed sends a close event to the parent page.
• In the standalone script, this event is handled automatically and the widget closes.
• In custom iframe integrations (NPM package), you must listen for the close event and decide how to hide/collapse your UI.
• In React, this works automatically when using the standard widget flow. If you build custom frame wiring, handle close the same way as the NPM package.

NPM package example:

const frame = gitbook.createFrame(iframe);

frame.configure({
    closeButton: true
});

const unsubscribe = frame.on('close', () => {
    // Hide your modal/drawer/container
    container.classList.add('hidden');
});

Notes:

• The close button is rendered in the same sidebar area as tabs/actions.
• If your UI hides that sidebar or doesn't render it, the button will not be visible.

`trademark` Copy Section

Available in: Standalone script, NPM package, React components

Display GitBook branding in the embed. Defaults to true.

• Type: boolean
• Default: true

trademark: true

`actions` Copy Section

Available in: Standalone script, NPM package, React components

Custom action buttons rendered in the sidebar alongside tabs. Each action button triggers a callback when clicked.

Note: This prop was previously named buttons. Use actions instead, it has the same functionality.

• Type: GitBookEmbeddableActionDefinition[]
• Properties:
  • icon: string - Icon name. Any FontAwesome icon is supported. (e.g., 'rocket', 'comments', 'user-circle', ...)
  • label: string - Button label text
  • onClick: () => void | Promise<void> - Callback function when clicked

actions: [
    {
        icon: 'comments',
        label: 'Contact Support',
        onClick: () => window.open('https://support.example.com', '_blank')
    },
    {
        icon: 'rocket',
        label: 'Get started',
        onClick: () => {
            GitBook('navigateToPage', '/getting-started');
        }
    }
]

`greeting` Copy Section

Available in: Standalone script, NPM package, React components

Welcome message displayed in the Assistant tab.

• Type: { title: string, subtitle: string }

greeting: {
    title: 'Welcome!',
    subtitle: 'How can I help you today?'
}

`assistantName` Copy Section

Available in: Standalone script, NPM package, React components

Override the assistant name displayed in the chat header and assistant entry points (for example, sidebar tabs and action labels). This name will be limited to 32 characters to prevent text overflow.

• Type: string

assistantName: 'Support Assistant'

`suggestions` Copy Section

Available in: Standalone script, NPM package, React components

Suggested questions displayed in the Assistant welcome screen.

• Type: string[]

suggestions: [
    'What is GitBook?',
    'How do I get started?',
    'What can you do?'
]

`tools` Copy Section

Available in: Standalone script, NPM package, React components

Custom AI tools to extend the Assistant. Tools allow the assistant to execute functions and integrate with your own systems.

Note: In addition to custom tools, the Assistant will always have access to any MCP servers you define in your site's AI settings.

• Type: GitBookToolDefinition[]
• Properties:
  • name: string - Unique tool identifier
  • description: string - Description of what the tool does (used by the AI to decide when and how to use it).
  • inputSchema: object - JSON schema defining the tool's input parameters
  • execute: (input: object) => Promise<{ output: any, summary: string }> - Async function that executes the tool.
    • output: The result of the tool execution, provided to the AI to continue working with. Not shown to the user.
    • summary: The visual summary of the tool execution, shown in the user's chat window.
  • confirmation: { icon?: string, label: string } (optional) - Confirmation button shown before execution, useful for actions that require the user's express approval.

/* Detailed source-code truncated for AI context efficiency. */

`visitor` (Authenticated Access) Copy Section

Available in: Standalone script (via init), NPM package (via getFrameURL()), React components (as prop)

Authenticated Access options passed when creating the frame URL. Used for Adaptive Content and Authenticated Access.

Note: This is not a configuration option but rather a parameter when initializing the frame or creating the frame URL.

Standalone script: Pass as the second argument to GitBook('init', options, frameOptions)
NPM package: Pass to getFrameURL({ visitor: {...} })
React components: Pass as the visitor prop on <GitBookFrame>

• Type: { token?: string, unsignedClaims?: Record<string, unknown> }
• Properties:
  • token: string (optional) - Signed JWT token for Adaptive Content or Authenticated Access
  • unsignedClaims: Record<string, unknown> (optional) - Unsigned claims that can be used in dynamic expressions via visitor.claims.unsigned.<claim-name>

visitor: {
    token: 'your-jwt-token',
    unsignedClaims: {
        userId: '123',
        plan: 'premium',
        role: 'admin'
    }
}

`colorScheme` Copy Section

Available in: Standalone script (via init), NPM package (via getFrameURL()), React components (as prop)

Override the embed's color scheme.

When omitted, the standalone widget follows the page it is embedded in — its color-scheme, falling back to the visitor's OS preference only when that page declares support for both. With the NPM package or the React components you own the iframe, so the embed follows the visitor's OS preference unless you pass this.

Note: This is not a configuration option but rather a parameter when initializing the frame or creating the frame URL.

Standalone script: ?theme=light on the script URL
NPM package: Pass to getFrameURL({ colorScheme: 'dark' })
React components: Pass as the colorScheme prop on <GitBookFrame>

• Type: 'light' | 'dark'

<script src="https://docs.company.com/~gitbook/embed/script.js?theme=light"></script>

Sites published with a single theme always render in that theme, so colorScheme has no effect on
them — the widget follows the site instead, to keep its chrome and the docs inside it consistent.

`button` Copy Section

Available in: Standalone script only

Configure the widget button for the standalone script. This option is not available when using the NPM package or React components, since they can be customized completely.

• Type: { label: string, icon: 'assistant' | 'sparkle' | 'help' | 'book' }
• Properties:
  • label: string - Button label text
  • icon: 'assistant' | 'sparkle' | 'help' | 'book' - Icon displayed on the button. Choose from one of 4 presets.

button: {
    label: 'Ask',
    icon: 'assistant'
}

Overview (`packages/expr/README.md`) Copy Section

`@gitbook/expr`

Safely evaluate & parse user-defined GitBook expressions.

Overview (`packages/fonts/README.md`) Copy Section

`@gitbook/fonts`

Utilities to lookup default fonts supported by GitBook.

Overview (`packages/icons/README.md`) Copy Section

`@gitbook/icons`

Icon sets useed in GitBook content.

Usage Copy Chapter

import { Icon } from '@gitbook/icons';

<Icon name="x" className={'size-5'} />;

Overview (`packages/openapi-parser/README.md`) Copy Section

`@gitbook/openapi-parser`

Modern OpenAPI parser written in TypeScript with support for OpenAPI 3.1, OpenAPI 3.0 and Swagger 2.0.

Overview (`packages/react-math/README.md`) Copy Section

`@gitbook/react-math`

React component to render a Math formula. It uses KaTeX when possible and fallbacks to MathJaX if needed.

Overview (`packages/react-openapi/README.md`) Copy Section

`@gitbook/react-openapi`

Style-less React components to render OpenAPI operation blocks.

--- METRICS ---

• Files Extracted: 12
• Estimated Token Budget: ~6704 tokens
• Canonical Reference: https://codewiki.google/github.com/GitbookIO/gitbook