# Page Designer

> Part of the NocoDB documentation (Product docs > Extensions). Index of all pages: https://nocodb.com/llms.txt. Any docs page is available as Markdown by adding `.md` to its URL.

URL: https://nocodb.com/docs/product/extensions/page-designer
Last updated: 2026-09-25

Create printable and shareable layouts from your database records

## Overview

<img alt="Page Designer" src={__img0} placeholder="blur" />

The **Page Designer** extension allows users to create printable and shareable (PDF) visual layouts from their database records. Common use cases include generating invoices, reports, certificates, and summaries—by combining text, images, and dynamic field data in a freeform design canvas.

This feature is ideal for teams who want to convert structured table data into branded, formatted documents directly within NocoDB.

## Key Features

* **Drag-and-drop Builder**: Add text, images, tables, and dividers to customize your page layout.
* **Record-specific Rendering**: Auto-populates fields dynamically from the selected record.
* **Supports Linked Records**: Render data from related tables in a tabular, list, or inline format.
* **Full Design Control**: Modify font, alignment, borders, colors, and more for each element.
* **Print & PDF Export**: Preview your design and export directly to PDF.

## How to Access

To get started:

1. Open **Page Designer** from the **Extensions** menu in your NocoDB instance.
2. Choose the target **table** and **view** from which records will be pulled.
3. Select a specific **record** to preview and design the layout interactively.

## Designing Your Page

The canvas on the left shows a preview of your document layout. Use the sidebar on the right to add and arrange elements.

### Add Elements

Add components to your layout by dragging them onto the canvas:

| Element   | Description                                          |
| --------- | ---------------------------------------------------- |
| 🅰️ Text  | Add static or dynamic text (linked to table fields). |
| 🖼️ Image | Add image blocks, such as logos or banners.          |
| ➖ Divider | Insert horizontal lines for visual separation.       |

### Bind Field Data

Under **Field Elements**, you can drag and drop database fields onto the canvas. Once dropped into the canvas, these fields will auto-populate with values from the selected record. You can also format these fields using the sidebar options (font size, color, alignment, etc.).

##### Field Configuration

For most field types, you can configure:

| Setting          | Description                                         |
| ---------------- | --------------------------------------------------- |
| Font settings    | Customize font family, size, line height, and color |
| Alignment        | Set horizontal and vertical alignment               |
| Border & Radius  | Add borders and set corner radius                   |
| Background color | Set background color for the field                  |

### Linked Records

The **Linked Records** section allows you to display related table data using three formats:

* **Inline**: Display as plain text.
* **List**: Show entries in a vertical list.
* **Table** : Render fields from the related table as a structured table with columns and rows.

For linked records displayed in tabluar format, you can choose which fields to display and customize their visibility.

##### Table Configuration

| Column                | Options                                             |
| --------------------- | --------------------------------------------------- |
| Enable/Disable fields | Toggle visibility per field                         |
| Font settings         | Customize font family, size, line height, and color |
| Table Header styling  | Set separate font size and line height for headers  |
| Background color      | Set background color for the table                  |

## Record Preview

Use the **Record selector** in the sidebar to toggle between different records and preview how the design looks with real data.

## Page Settings

* **Page Name**: Customize the name of your page for easy reference. This name will be used when exporting or printing.
* **Page Size**: Choose from the preset page sizes, or select the **Custom** page type to enter your own **Width** and **Height**. A unit selector lets you specify the dimensions in **inches** or **centimetres**.
* **Print / Export**: Use the print icon in the top-right corner to generate PDFs or physical printouts.

<img alt="Custom page size" src={__img1} placeholder="blur" />

## Managing Designs

You can keep several named designs within a single Page Designer instance and switch between them using the design switcher dropdown. From the dropdown you can:

* **Switch designs**: Select a different saved design to load it onto the canvas.
* **New design**: Start a fresh design alongside your existing ones.
* **Duplicate current**: Create a copy of the current design as a starting point.

<Callout type="info">
  Deleting the last remaining design is not allowed; at least one design must always exist within a Page Designer instance.
</Callout>

<img alt="Design switcher" src={__img2} placeholder="blur" />

## Key Use Cases

* 🧾 Invoices & Quotes
* 📄 Client Reports & Status Sheets
* 🎓 Certificates & Badges
* 📊 Internal Summaries for review meetings

## Limitations (Beta)

* The Page Designer is currently in **Beta**—minor rendering issues may occur in some browsers. Help us improve by reporting any bugs you encounter and any suggestions you have to improve the experience.

---

## Related pages

- [Data Exporter](https://nocodb.com/docs/product/extensions/data-exporter.md): Export data from NocoDB in various formats
- [Upload Data from CSV](https://nocodb.com/docs/product/extensions/upload-data-from-csv.md): Import data from CSV files into NocoDB
- [URL Preview](https://nocodb.com/docs/product/extensions/url-preview.md): Preview URLs in NocoDB
- [World Clock](https://nocodb.com/docs/product/extensions/world-clock.md): Display multiple time zone clocks with in NocoDB
- [Bulk Update](https://nocodb.com/docs/product/extensions/bulk-update.md): Update multiple records in a table at once
- [Dedupe](https://nocodb.com/docs/product/extensions/dedupe.md): Identify and merge duplicate records in a table
