> This page is for Product Documentation.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.navipartner.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.navipartner.com/_mcp/server.

# Design editor tools

## Editor tools

|                       |                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------- |
| **Tool**              | **Function**                                                                                |
| Text                  | Add static text or insert dynamic fields using the field picker.                            |
| Images                | Insert images such as logos, banners, and backgrounds.                                      |
| Shapes                | Add graphical elements such as rectangles and lines.                                        |
| QR codes and barcodes | Add scannable content and configure its value.                                              |
| Small grid            | Display small grid squares to help align elements.                                          |
| Quarter grid          | Divide the canvas into four sections with horizontal and vertical lines.                    |
| Element details       | Inspect and select elements using their positions and dimensions.                           |
| Conditions            | Setup conditions for one element that determines when it is displayed and when it is hidden |
| Save                  | Save the design changes.                                                                    |

![editor\_tools](https://files.buildwithfern.com/visual-editor-images/docs.navipartner.com/2026-11-04T14:54:01.871Z/product/np-designer/reference/design-editor-tools/Screenshot_2026-11-04_154918.png "editor_tools")