# Welcome to the Tiptap Pages Demo

Tiptap Pages adds a true page layout to your editing experience, making it easy to create documents that look and behave just like in Microsoft Word. Pages is built to work seamlessly with the Tiptap Conversion Service for importing and exporting DOCX files, so you can move your documents between Tiptap and Word without losing structure or formatting.

With Pages, you see visual page boundaries, as well as simple header and footer areas – just like in Word or Google Docs. When you export or import a DOCX file, all content, including headers, footers, tables, lists, and inline formatting, will be preserved and displayed correctly in Word.

This demo document is designed to show you exactly what you can expect when using Tiptap Pages together with DOCX import and export. All formatting, tables, and layout features you see here will be reflected in your exported Word file.

---

## Example Content

This is a sample paragraph. You can use **bold**, _italic_, and highlighted text to emphasize important information.

You can also add [links to external resources](/content/site-root.html) or reference internal sections of your document.

The header at the top of each page and the footer at the bottom are included in your exported DOCX file. You can use these areas for things like document titles, page numbers, or author information.

Below is a table. When you export this document as DOCX, the table layout and content will be preserved, and it will automatically wrap to the next line if the content is too wide for the page.

---

## **Real-World Usage**

When preparing a report or proposal, you can start with a clear title in the header, followed by your main content. Use headings to break your document into logical sections, and use tables to present data clearly.

All formatting, including lists, tables, and inline styles, will be preserved when you export to DOCX and open the file in Word.

For example, you might want to highlight a deadline or make a key point stand out. You can also include links to relevant documents or websites, such as the [project wiki](https://example.com/wiki), to provide additional context.

---

## **Final Notes**

Tiptap Pages is currently in **alpha**. Responsive behavior is not covered, and export appearance can be optimized via styling.

All features shown here are designed to work perfectly with DOCX import and export, so your documents look great in both Tiptap and Word.

## Content types

The `PagesHeaderFooter` type accepts either an HTML string or Tiptap `JSONContent` for rich formatting:

```
type PagesHeaderFooter = string | JSONContent
```

### HTML strings

You can use plain text or HTML markup for headers and footers:

```
Pages.configure({
  header: 'My Document Title',
  footer: '<strong>Confidential</strong> - Internal Use Only',
})
```

### Template placeholders

Use `{page}` and `{total}` placeholders for dynamic page numbering. These work in both HTML strings and JSONContent, and are substituted at render time:

```
Pages.configure({
  header: 'Company Report',
  footer: 'Page {page} of {total}',
})
```

### JSONContent

For rich formatting, use Tiptap's JSONContent structure:

```
Pages.configure({
  header: {
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        content: [{ type: 'text', text: 'Document Title', marks: [{ type: 'bold' }] }],
      },
    ],
  },
})
```

## Configuration vs commands

Use `Pages.configure()` when setting up the editor with initial default content. Use editor commands like `setHeader()` to update content dynamically at runtime.

Both approaches are valid for setting content:

**Initial setup with configure:**

```
Pages.configure({
  header: 'My Document Title',
  footer: 'Page {page} of {total}',
})
```

**Runtime updates with commands:**

```javascript
// Update header after editor is initialized
editor.commands.setHeader('Updated Header')
```

## Editable headers and footers

Users can edit headers and footers directly by double-clicking on them. This opens a fully featured Tiptap editor that allows rich text editing.

### Custom extensions

The header/footer editor uses the same extensions you configure on the main editor. To match the schema (so the same marks, nodes, and table behaviour work in headers and footers), pass `ConvertKit` and `TableKit` through `headerFooterExtensions`:

```javascript
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { TableKit } from '@tiptap-pro/extension-pages-tablekit'

Pages.configure({
  header: 'My header',
  headerFooterExtensions: [ConvertKit.configure({ table: false }), TableKit],
})
```

Any Tiptap extension can be added to the header/footer editors through the `headerFooterExtensions` option. Mirroring the main editor's stack keeps the schema, keyboard shortcuts, and rendering consistent across the document and its headers and footers.

### Active editor state

When a user double-clicks a header or footer to edit it, the extension exposes the active editor through storage. This allows you to build custom toolbars that work with the header/footer editor.

**Storage properties:**

- `activeEditor` – The Tiptap Editor instance for the currently open header or footer editor (or `null`)
- `activeEditorType` – `'header'`, `'footer'`, or `null`
- `activePageNumber` – The page number being edited (or `null`)