Properties Panel

Edit page details with precision

Detailed Page Editing

The Properties Panel on the right side of the editor provides a dedicated space for editing the selected page's details. When you click on any node in the tree view or on the canvas, its properties appear in this panel. You can edit the page title and URL slug with full text input fields, giving you more control than inline editing allows.

The panel updates in real-time as you type. Change the title, and watch it update instantly on both the canvas card and in the tree view. Modify the slug, and see the path displayed on the node card change immediately. This instant feedback loop helps you make precise adjustments without having to constantly switch between editing and previewing modes.

💡 Pro tip: The URL slug field accepts any text, but for clean URLs, use lowercase letters, numbers, and hyphens. The slug should reflect the page's place in your site hierarchy.

Collapsible and Resizable

Like the tree view panel on the left, the Properties Panel can be collapsed when you need more canvas space. Click the panel header to toggle visibility. When collapsed, a floating "Properties" button appears so you can quickly restore the panel when needed. This flexibility lets you maximize your workspace for complex sitemaps.

The panel width is fixed at a comfortable size that accommodates typical page titles and URL paths. On smaller screens, the panel automatically adjusts to a more compact layout. On mobile devices, the panel slides in from the right edge, providing the same editing capabilities in a touch-friendly interface.

Selection Feedback

The Properties Panel clearly indicates which node is currently selected. When no node is selected, the panel shows a prompt to select a page. As soon as you click a node, its details populate the panel fields. The selected node is also highlighted in the tree view and on the canvas, providing consistent visual feedback across all views.

If you click on the canvas background instead of a node, the selection is cleared and the panel returns to its empty state. This behavior helps you understand the current selection state at a glance, reducing confusion when working with complex sitemaps that have many similarly-named pages.