> For the complete documentation index, see [llms.txt](https://docs.acpt.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acpt.io/canvas-ui/canvas-ui.md).

# Introduction

A unified drag-and-drop interface for building meta fields, forms, table columns, and blocks.

The **Canvas UI** is a unified drag-and-drop builder used across ACPT wherever you need to define structured content: meta fields, forms, table columns, dynamic block controls, and more.

<figure><img src="https://3235524095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fiyf0tSKPgXiyoQ3zV3I6%2Fuploads%2Fgit-blob-171384d49bb68c9836d41b28f55b3562d08766ab%2Fcanvas-ui-meta.png?alt=media" alt="Canvas UI in the meta field editor"><figcaption><p>The Canvas UI in the meta field editor: sidebar on the left, canvas on the right.</p></figcaption></figure>

## Where Canvas UI is used

| Feature                      | Route                   |
| ---------------------------- | ----------------------- |
| **Meta fields**              | `#/edit_meta/:id`       |
| **Form builder**             | `#/form/:id`            |
| **Table columns** (CCT)      | `#/edit_table/:id/1`    |
| **Dynamic block controls**   | `#/block/:id`           |
| **Option page fields**       | `#/option-pages-manage` |
| **WooCommerce product data** | Product data fields     |

## Layout

The Canvas UI splits the screen into two resizable panels:

```
┌────────────────────┬────────────────────────────────┐
│                    │                                  │
│  Sidebar           │  Canvas                          │
│  (available types) │  (added items, drag to reorder)  │
│                    │                                  │
└────────────────────┴────────────────────────────────┘
```

* **Sidebar** — lists available field/column types. Click a type to append it to the end of the canvas, or drag it directly to a specific position — both work everywhere Canvas UI is used.
* **Canvas** — shows all items in order. Drag an item by its handle to reorder. Click an item to open its settings panel.

The divider between the two panels is draggable — resize to your preference. The layout is saved in `localStorage` and persists between sessions.

The sidebar docks on the left by default, but it can be switched to either side of the canvas from the toolbar — see **Sidebar position** below.

## Toolbar options

The Canvas UI toolbar (top-right) provides:

| Option                            | Description                                                                                                                                                                             |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **No-distraction mode**           | Hides the WordPress admin sidebar and top bar, giving you the full screen.                                                                                                              |
| **Sidebar position**              | Two icon buttons dock the sidebar panel on the left or right side of the canvas. Works the same everywhere Canvas UI is used (meta fields, forms, table columns, blocks, option pages). |
| **Simple mode** (where available) | Hides advanced settings panels, showing only the most common options.                                                                                                                   |

All toolbar preferences are saved per-entity in `localStorage`.

## In this section

* [Using the Canvas](/canvas-ui/using-the-canvas.md) — step-by-step guide for everyday use
* [Canvas UI reference](/canvas-ui/canvas-ui-reference.md) — technical reference for developers