# Interface Builder
> Part of the NocoDB documentation (Interfaces). 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/interfaces/interface-builder
Last updated: 2026-10-03
Use the NocoDB interface builder to edit page elements on the canvas, configure them in the properties panel and preview pages before you publish.
Use the interface builder to design and edit pages. When a base creator or owner opens an interface, it opens in the builder. The first page of the navigation is selected and ready to edit. All other users open the published interface.
## Builder anatomy
| Area | Description |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Topbar** | Has the preview switch and the **Previewing as** selector next to the interface name. The **Launch** and **Publish** buttons are on the right. |
| **Canvas** | A live preview of the page. Click an element to select it. |
| **Properties panel** | Opens on the right when you select an element. You do all configuration here: data source, filters, appearance and behavior. |
| **Page list** | The pages of the interface, shown in the navigation. Drag pages to change their order, rename them inline or manage them from their context menu. |
## Editing pages
| Task | How |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Select and configure** | Click an element on the canvas. Its settings open in the properties panel. |
| **Reorder by dragging** | Drag and drop pages, fields, groups, widgets and filters to change their order. |
| **Resize and arrange widgets** | On [dashboard pages](/docs/interfaces/layouts/dashboard), widgets are on a 12-column grid. While you edit, you can drag and resize them freely. |
## Reuse filter conditions
Filters that you configure in the properties panel open in a **Filter by** dialog. Use the gear icon at the bottom of that dialog to copy your conditions and paste them into a different element. You write a set of conditions once and use it again where you need it.
1. On the element that has the conditions, open **Filter by**.
2. Click the gear icon and select **Copy**.
3. On the element that must get the conditions, open **Filter by**.
4. Click the gear icon and select **Paste**. The pasted conditions replace the current conditions of that element.
**Paste** is available only when the copied conditions fit the target:
| Rule | What it means |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Same table** | You can paste conditions only into an element that reads from the same table in the same base. |
| **Same purpose** | You cannot paste conditions that select which records appear into a rule that shows or hides a field. The opposite is also not possible. |
| **Within your plan's limit** | You cannot paste a copied set that has more conditions than your plan allows for each view. |
| **Editable** | You cannot paste into read-only filters. |
When **Paste** is not available, put the pointer on it to see the reason.
Copied conditions are held for your current browser session only. They are not shared with other users, and reloading the builder clears them.
## Preview your work
To put the current page in preview mode, use the preview switch in the topbar. In preview mode, you use the page as your users will. The builder chrome stays in place, so you can go back to editing at any time.
To leave the builder and open the interface as the running app, use **Launch**.
To check behavior that depends on roles, use the **Previewing as** selector. It shows the interface as a different user. You can select:
* A generic role under **Roles** (Editor, Commenter or Viewer).
* A named person under **Collaborators with access**. You can search by name or email.
This is most useful when pages or fields have conditional visibility or restricted editing.
The builder is desktop-only. On a mobile device, interface links open the published version instead. Published interfaces themselves are fully mobile-responsive.
## Page settings
Each page also has settings in the properties panel. These settings control what end users can do:
| Setting | What it does |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **User filters** | Add tabs or dropdown filters. Users can use them to show fewer records on the page. See [Fields, buttons & filters](/docs/interfaces/elements#user-filters). |
| **Editability** | Allow or prevent inline editing, and adding or deleting records. |
| **Advanced actions** | Turn on **CSV export** and **Print** for the page. |
| **Record actions** | On record-centric pages, turn **Comments** and **Revision history** on or off for the records on the page. |
## Draft and published versions
The builder saves all edits to the draft of the page. Users of the interface continue to see the last published version until you publish your changes. Draft availability can change with your plan. See [Publish an interface](/docs/interfaces/publish-interface).
---
## Related pages
- [Interfaces](https://nocodb.com/docs/interfaces.md): NocoDB interfaces let you build custom, easy-to-use apps on top of your base data, even for complex workflows.
- [Create an Interface](https://nocodb.com/docs/interfaces/create-interface.md): Create a NocoDB interface with the guided setup: give it a name, select a layout and connect it to a table.
- [Fields, Buttons & Filters](https://nocodb.com/docs/interfaces/elements.md): Fields, field groups, action buttons and user filters are the elements of record-centric NocoDB interface pages.
- [Publish an Interface](https://nocodb.com/docs/interfaces/publish-interface.md): NocoDB interfaces have a draft and a published version: change the draft safely in the builder, then publish when your changes are ready.
- [Actions on an Interface](https://nocodb.com/docs/interfaces/actions-on-interface.md): Rename, restyle, duplicate, reorder, hide and delete NocoDB interfaces and their pages.