# Page Editor

Our editor is a the easiest way to update your content in your project. It lets you edit pages directly in a visual, block based interface while keeping the underlying content structured and predictable.

Content is edited section by section. Each section has a slug, which is used for linking and navigation, and a content type such as text, media, or a group. You can rename sections, reorder them, or nest them to reflect the structure of your page.

Because the editor works directly on sections, pages remain easy to query, version, and extend programmatically, without locking you into a single presentation or layout.

Pages are edited as a collection of sections, which can be reordered, nested, and composed to match the structure of your content.


### Demo

<Editor />


## Sections

All content in a page lives inside sections. Sections act as building blocks and give your content clear structure.

You can use sections to:

* Organise content into logical blocks

- Reorder content without rewriting it

* Group related content together using nested sections

- Reference specific parts of a page by slug


### Text sections and Markdown

Text sections are the most common section type. They store content as Markdown, giving you a balance of rich formatting and portability.

**Text sections support:**

* Headings, paragraphs, and lists

- Links and inline code

* Code blocks and quotes

- Clean, readable Markdown stored in the API

While you edit visually, the underlying content is saved as Markdown, making it easy to render anywhere or transform programmatically.


## Toolbar and formatting

The editor toolbar exposes common formatting and structure tools, including:

* Text formatting like bold and italics

- Ordered and unordered lists

* Links and inline code

- Section grouping and insertion

* Section reordering and deletion

These tools operate on sections rather than raw HTML, keeping your content consistent and predictable.


### Section Toolbar

The Section Toolbar allows you to alter the sections details from within the editor.

<SectionToolbar />

On the very left is an input to update the sections `slug`, on the right are some common section actions.

On the right is the section settings, from left to right:

* **Add a new section:** opens a modal where you can select which section to add beneath the currently selected section. If you're currently in a nested section it will add the new section beside your selection, underneath the parent Group Section.

* **Group:** groups the current selected sections in a new Group Section, encompassing it entirely.

* **Delete:** deletes the currently selected section.


### Text Formatting

When a Text Section is selected, common text formatting actions appear.

<TextToolbar />

From left to right:

* **Text block dropdown:&#x20;**&#x63;hange the current paragraph to a heading.

* **Bold button:** change the highlighted text to be **bold**.

* **Italic button:&#x20;**&#x63;hange the highlighted text to be *italic*.

* **Link:** add a link to another page.

### Lists:

<ListToolbar />

* **Bullet points:** change the current paragraph into a bullet point list.

* **Numbered lists:&#x20;**&#x63;hange the current paragraph into a numbered list.


### Keyboard shortcuts

The editor includes keyboard shortcuts for many common actions to help you work quickly without leaving the keyboard.

**Text and Formatting:**

* **Toggle Bold:** Cmd + B

* **Toggle Italic:** Cmd + I

* **Insert Link:** Cmd + Shift + L

**Sections:**

* **Insert text section below:** Cmd + Enter

You can combine the visual tools and shortcuts to edit efficiently, whether you prefer clicking or staying entirely on the keyboard.

