# GitBook UI

GitBook is split into different sections to make it easier to organize and manage the content you create.

### Sidebar

<div data-with-frame="true"><figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FMINl0qBtvGV3pt8G3bnZ%2FCleanShot%202025-12-10%20at%2010.02.40.png?alt=media&#x26;token=57f3871d-67b0-432e-b646-8b5e5a073aaa" alt=""><figcaption><p>The GitBook sidebar holds all of your documentation, as well as notifications, the search bar, snippets and more.</p></figcaption></figure></div>

The sidebar allows you to see and overview of your GitBook organization at a glance. The sidebar contains:

* **Organization switcher**\
  If you’re a part of multiple organizations, you can see and switch between them here. You can also create a new organization from this menu.
* **Notifications**\
  When you’re tagged in a comment or conversation, or when there is important activity in a space you’re working in, you’ll get a [notification](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/notifications) to show you what’s new.
* **Ask or search**\
  Powered by [GitBook AI](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/searching-your-content/gitbook-ai), you can ask questions in natural language, or search through the different spaces and content in your organization.
* **Home**\
  The Home page allows you to see everything your team is working on at a glance. View open change requests, discussions and comments, recent page edits and more.
* **Docs sites home**\
  Click this to visit the overview page for all the docs sites you have created in your organization.
* **Integrations**\
  GitBook [integrations](https://github.com/GitbookIO/public-docs/blob/main/content-editor/editor/broken-reference/README.md) supercharge your content, allowing you to embed more into your pages, or add information to your knowledge base from other apps.
* **Docs sites**\
  Toggle this section to view all the [docs sites](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/publishing-documentation/publish-a-docs-site) in your organization right in the sidebar and jump to one with a click.
* **Spaces**\
  The spaces section is where you’ll find the [collections](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/content-structure/collection) and [spaces](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/content-structure/space) you create when adding more content. Head to our [content structure](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/content-structure) section to find out more.
* **Settings**\
  You’ll find [personal settings](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/account-management/account-settings) and [organization settings](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/account-management/organization-settings) at the bottom of the sidebar. Here, you can also toggle light/dark mode, or get help from our support team if needed.
* **Trash**\
  Deleted spaces appear in the trash. You can restore them for up to seven days — after that, they’re permanently deleted.

### Table of contents <a href="#the-table-of-contents" id="the-table-of-contents"></a>

<div data-with-frame="true"><figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FZYKSwnzcZOkqVA2xgRlX%2FCleanShot%202025-12-10%20at%2010.07.01.png?alt=media&#x26;token=47cb70e3-4cee-4fdd-8247-28a04e75f92e" alt=""><figcaption><p>The table of contents lists all the pages and links in your selected space.</p></figcaption></figure></div>

By default, the table of contents shows a list of [pages, links, and groups](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/content-structure/page#organizing-your-content) that make up a space. You’ll find it to the right of the sidebar. It’s specific to the space you’re currently viewing.

The table of contents is also where you can view and manage [resuable content](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/reusable-content) and [files](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/blocks/insert-files) for your space.

From the **Pages** tab in the table of contents you can:

* Create new [pages](#pages) and subpages
* Create [page groups](#groups)
* Add [external links](#external-links)
* Access [the Actions menu](#the-actions-menu) <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQ4IsWwmEEi5QM7PSXNsN%2Factions%20-%20dark.svg?alt=media&#x26;token=ebff54f4-9825-4ab0-99bc-633e1c449371" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F89MTSo5XRpPMVr1T0rxS%2Factions.svg?alt=media&#x26;token=2b5d001e-560a-4f29-8d22-de8163725ca1" alt=""></picture> for individual pages.

In the **Library** tab, you can:

* View and search for reusable content, variables, images and files in the space
* View and insert reusable content from other spaces
* Create or import new items in the Library
* Drag and drop Library items onto the page
* Double-click to rename any Library item
* Preview images
* Manage and download images and files

Here’s a short video showing what you can do with the table of contents, particularly the Library tab:

{% embed url="<https://youtu.be/gg-VZP2wl-I>" %}

If you want to give more focus to the content of your page, you can temporarily hide the table of contents by hovering your cursor next to it and clicking the **Hide** button <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FgXIVpUPXn7bJ2SWzgFzd%2Fpanel%20left%20-%20dark.svg?alt=media&#x26;token=424e246d-05bd-4d49-a287-bfc6fb38174b" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F0goJ97jfVBvH656kUK0d%2Fpanel%20left.svg?alt=media&#x26;token=cb31d43b-804c-4c4f-b5bb-e71db0d03860" alt="The Hide button icon in GitBook"></picture> that appears. To make it appear again, hover your cursor near the edge of the page and click the **Show** button <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FNWbU09fwPj4NJK1clKmm%2Fpanel%20right%20-%20dark.svg?alt=media&#x26;token=35d1e4d0-bc5d-406f-a1e8-c3808acc4d30" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FwOFmEqy96fMvDPjqjAED%2Fpanel%20right.svg?alt=media&#x26;token=2f39279a-cd05-48a3-8985-d07ec08663ba" alt="The Show button icon in GitBook"></picture>.

### Space header

<div data-with-frame="true"><figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F2Z5NSb3mmbMRoWqONncm%2FCleanShot%202025-12-10%20at%2010.08.48.png?alt=media&#x26;token=da8f53b3-d134-46e1-84d1-db3c1e1eb3cd" alt=""><figcaption><p>The space header sits at the top of the editor, and offers options that apply to the whole space.</p></figcaption></figure></div>

The space header contains information about the space you’re currently viewing. It lets you do things like publish and share your space, view the comments and history for the space, configure [GitHub or GitLab sync](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/getting-started/git-sync), and more.

{% hint style="info" %}
**The space header is adaptable**, and changes depending on the space and mode you’re currently in.

For example, if you’re editing a [change request](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/change-requests), you will see an overview of the change request, alongside options to open the editor, view changes and merge your change request.

If you’re viewing a read-only space, you will need to open a new change request to edit the content of the page as live edits are locked.
{% endhint %}

<div data-with-frame="true"><figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FrTr3IxB9SPupw4YedgqL%2FCleanShot%202025-12-10%20at%2010.11.01.png?alt=media&#x26;token=772809ef-1b4b-453f-9ce4-64883cfc292c" alt=""><figcaption><p>The space header inside a change request.</p></figcaption></figure></div>

The space header includes:

* **The space emoji or icon**\
  You can choose an emoji or icon for your space, to help you easily identify it in the sidebar.
* **The space name**\
  The name of the space that will appear in the sidebar, and your documentation if and when you choose to publish it.
* **The space’s breadcrumbs**\
  A full, linear list of the collections or docs sites the space lives in.
* **Actions menu** <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2Fpn5vEw7bYFrMPpdyvpSu%2Factions-horizontal%20-%20dark.svg?alt=media&#x26;token=ec39eefe-a391-4fe2-828a-082b79f2847d" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FPnnI41SqLSaKBNwT98fW%2Factions-horizontal.svg?alt=media&#x26;token=99754200-a354-4ffe-931e-aa6322ea7395" alt="The Actions menu icon in GitBook"></picture>

  Offers a list of actions for your space. Similar to [page actions](#the-actions-menu), the available actions for a space will differ depending on the mode you’re currently in.
* **Overview**\
  When viewing a change request, this tab shows the title and description of the change request, along with the participants and reviewers. It also shows all the changes and comments.
* **Editor view**\
  This view is where you can make edits to your content using GitBook’s block-based editor.
* **Changes view**\
  This view [highlights the changes](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/change-requests#diff-mode) made within a change request using the diff view. This is ideal for reviewing new content before merging your change request to push the changes live.
* **Preview**\
  This view allows you to quickly see a preview of your content before you merge a change request.
* **Collaborators**\
  The avatar of anyone else who’s currently viewing a page in your space, with colored circles to show their cursor color. Click an avatar to jump to the page they’re currently viewing.
* **Git Sync configuration**\
  The [GitHub and GitLab Sync](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/getting-started/git-sync) configuration for your space.
* **The Share menu**\
  Allows you to publish and share your space. You can also invite others to [collaborate](https://github.com/GitbookIO/public-docs/blob/main/content-editor/editor/broken-reference/README.md) through this menu.
* **Variables**\
  [Create and add reusable variables](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/variables-and-expressions) to use in a space.
* **GitBook Agent**\
  Collaborate on changes in a space with [GitBook Agent](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/gitbook-agent).
* **Comments**\
  See the [comments and discussions](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/comments) you and your team have had about the space content.
* **Change requests**\
  Create, update, and delete [change requests](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/change-requests) in your space.
* **Space history**\
  View [a version history](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/version-control) that includes all the changes made in the space — or in your current change request — over time.
* **The Edit button**\
  If your space is published, or someone has locked[ live edits](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/live-edits), the **Edit** button will appear in the space header. It will create a new [change request](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/change-requests) to edit content.

### Site header <a href="#site-headers" id="site-headers"></a>

The site header contains information about the site you’re currently viewing. It lets you do things like view site insights, customize your site, change its settings and preview the site in different modes and screen sizes. You can also configure integrations and manage members’ access.

The site header includes:

* **The site name**\
  The name of the space that will appear in the sidebar, and your documentation if and when you choose to publish it.
* **The site’s breadcrumbs**\
  A link back to the main Docs sites screen.
* **Overview**\
  The site overview shows you essential information about your site including it’s URL, publish status, audience and content, as well as top-level insights.
* **Insights**\
  The [insights panel](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/publishing-documentation/insights) gives you detailed analytics about your site and how it’s performing.
* **Customization**\
  Here you can [customize your site](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/publishing-documentation/customization) with your own logo, colors, header links, and much more.
* **Settings**\
  Access your [site’s settings](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/publishing-documentation/site-settings) and control the name, audience, content structure and other options.
* **Preview**\
  The preview tab lets you quickly see how your published site will look in light and dark mode across desktop and mobile displays.
* **Integrations**\
  The button opens a modal that lets you install and configure [integrations](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/integrations/install-an-integration) for your site.
* **Member access**\
  View and manage who can access your site in the GitBook app, and what permissions they have.
* **Visit site**\
  Click this to instantly open your published docs site in a new tab. This button only appears when your site is live.

### Content editor

<div data-with-frame="true"><figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FxpmoPcLU6kfep6QsXlxi%2FCleanShot%202025-12-10%20at%2010.18.49.png?alt=media&#x26;token=af2b3315-f6e0-4a12-b853-1cbbd5e0e0e9" alt=""><figcaption><p>Write content and add blocks in the GitBook editor.</p></figcaption></figure></div>

The editor is the main part of your space, where you can write or insert content in GitBook. It supports multiplayer, meaning you and your team can collaborate on changes in real-time.

You can insert [content blocks](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/blocks), type [Markdown](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/formatting/markdown), [embed content](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/blocks/embed-a-url), and collaborate on changes with [GitBook Agent](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/gitbook-agent).

In addition to working on changes, you can also comment on blocks, tag teammates, and more.

### Page title and description <a href="#page-title" id="page-title"></a>

At the top of each page you can set a **title**, add an optional **emoji**, and write a **description**. The title you use will appear in the table of contents, and forms your page’s URL slug when published.

Your page description can be a maximum of 200 characters long, and will act as the preview text for your page in search engines.

{% hint style="info" %}
You can change the URL slug for a page by choosing **Page Actions** <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQ4IsWwmEEi5QM7PSXNsN%2Factions%20-%20dark.svg?alt=media&#x26;token=ebff54f4-9825-4ab0-99bc-633e1c449371" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F89MTSo5XRpPMVr1T0rxS%2Factions.svg?alt=media&#x26;token=2b5d001e-560a-4f29-8d22-de8163725ca1" alt="The Actions menu icon in GitBook"></picture> > **Rename**. Find out more about [Page Actions](#page-options) below.
{% endhint %}

### Page actions menu

The page’s **Actions menu** <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQ4IsWwmEEi5QM7PSXNsN%2Factions%20-%20dark.svg?alt=media&#x26;token=ebff54f4-9825-4ab0-99bc-633e1c449371" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F89MTSo5XRpPMVr1T0rxS%2Factions.svg?alt=media&#x26;token=2b5d001e-560a-4f29-8d22-de8163725ca1" alt="The Actions menu icon in GitBook"></picture> allows you to do things like duplicate, rename or delete your page.

You can open the **Actions menu** using the <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQ4IsWwmEEi5QM7PSXNsN%2Factions%20-%20dark.svg?alt=media&#x26;token=ebff54f4-9825-4ab0-99bc-633e1c449371" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F89MTSo5XRpPMVr1T0rxS%2Factions.svg?alt=media&#x26;token=2b5d001e-560a-4f29-8d22-de8163725ca1" alt="The Actions menu icon in GitBook"></picture> icon that appears when hovering over your page in the sidebar, or from the icon next to the page title.

{% hint style="info" %}
The type of actions available will depend on whether you’re in [live editing](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/live-edits) mode or a [change request](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/collaboration/change-requests).
{% endhint %}

### Page options

<div data-with-frame="true"><figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FquMiRmEYl2L5vg76GJWT%2FCleanShot%202025-12-10%20at%2010.24.19.png?alt=media&#x26;token=b29ba1c2-0f5f-4d35-9e40-dcc6a27165d3" alt=""><figcaption><p>The <strong>Page options</strong> side panel offers customization options for your documentation and navigation.</p></figcaption></figure></div>

With page options, you cam customize your documentation layout and navigation. You can only access page options if you’re in an editing mode.

You can open the **Page options** side panel by opening the page’s **Action menu** <picture><source srcset="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FQ4IsWwmEEi5QM7PSXNsN%2Factions%20-%20dark.svg?alt=media&#x26;token=ebff54f4-9825-4ab0-99bc-633e1c449371" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F89MTSo5XRpPMVr1T0rxS%2Factions.svg?alt=media&#x26;token=2b5d001e-560a-4f29-8d22-de8163725ca1" alt="The Actions menu icon in GitBook"></picture> and choosing **Options**, or by hovering over the main title of the page and clicking **Page options** when it appears.

{% hint style="info" %}
Certain changes, such as disabling the table of content, only apply to published documentation and may not be visible in the editor.
{% endhint %}

### Page outline

<div data-with-frame="true"><figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F29FlwGeQG1m2s6nQ8yBv%2FCleanShot%202025-12-10%20at%2010.26.57.png?alt=media&#x26;token=6b4e1658-1526-4089-bea4-5bfe5f5656e7" alt=""><figcaption><p>The page outline shows H1 and H2 headings, allowing you to quickly jump to a specific section on an individual page.</p></figcaption></figure></div>

The **page outline** sits on the right-hand side of the editor, and makes it easy to jump directly to the section of the page you’re looking for.

Any [headings](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/creating-content/blocks/heading) you add to the page will appear in the page outline listed here.

The page outline will appear in your published site, too. You can toggle it on or off in the [**Page options**](#page-options) side panel.

{% hint style="info" %}
If you can’t see the right-hand column of the app, it may be because your browser window is less than 1430 pixels wide. Your browser window needs to be at least 1430 pixels wide to see and use the page outline.
{% endhint %}
