The editor toolbar sits at the top of the canvas and provides all the actions you need to manage the lifecycle of a page — from drafting changes through to previewing and saving.
| Element | Visibility | Description |
|---|
| Unsaved draft indicator | When changes exist | A small label that reads “Unsaved draft”, shown whenever the current layout differs from the last saved version. |
| Page status selector | Custom pages only | A dropdown to set the page visibility: Unpublished, Hidden (Private), Published, or Only Members. |
| Delete page | Custom pages (saved) | Permanently deletes the custom page. Requires confirmation. |
| Reset | Always | Discards all unsaved changes and reverts to the last saved version (or the default layout for built-in pages). Requires confirmation. |
| Delete outline | Built-in pages only | Removes all customisations from a built-in page and restores the factory-default layout. Requires confirmation. |
| Preview | Always | Opens a full preview of the current layout in a new browser tab. |
| Save | Always | Persists the current layout to the server. |
Unsaved drafts
The editor automatically tracks whether you have unsaved changes:
- Every edit you make is compared against the last saved version.
- If there is a difference, the “Unsaved draft” indicator appears in the toolbar.
- Drafts are stored in your browser’s localStorage so they survive page refreshes and accidental tab closes.
- The localStorage key follows the pattern
editor-draft-{pageName} for built-in pages and editor-draft-file-{fileId} for custom pages.
Drafts are stored locally in your browser. If you switch to a different browser or clear your browser data, unsaved drafts are lost. Always Save
important changes.
How draft detection works
- When you open a page, the editor loads any existing draft from localStorage first, falling back to the saved version from the API, and finally to the default layout.
- On every change in the editor, the current state is compared to the saved reference.
- If they differ,
hasDraft is set to true and the indicator appears.
- Saving or resetting clears the draft from localStorage and hides the indicator.
Page status (custom pages)
Custom pages have a visibility dropdown with four options:
| Status | Behaviour |
|---|
| Unpublished | The page is not accessible to anyone. Useful for work-in-progress pages. |
| Hidden (private) | The page exists but is not listed in the navigation. Only accessible via direct URL. |
| Published | The page is visible to everyone and appears in the navigation (if added). |
| Only Members | The page is only visible to authenticated members (i.e. customer with an active contract for one of your plans). |
Reset
Clicking Reset shows a confirmation dialog:
“This will discard all unsaved changes and revert to the last saved version. Are you sure?”
- For custom pages, the editor reloads the page content from the API.
- For built-in pages, the editor reloads the saved layout, or the default layout if no customisation has been saved.
- The draft is cleared from localStorage.
Delete outline (built-in pages)
Built-in pages can be customised but never truly deleted. The Delete outline button removes your customisations and restores the factory-default layout:
“This will restore the default layout for this page. All your customisations will be lost. Are you sure?”
After confirming:
- The saved customisation is deleted from the API.
- The editor loads the default layout from the built-in defaults.
- The draft is cleared from localStorage.
This action does not remove the page itself — the page continues to exist with its default layout.
Delete page (custom pages)
For custom pages that have been saved at least once (i.e. they have a page ID), the Delete button permanently removes the page:
“Are you sure you want to delete this page? This action cannot be undone.”
After confirming:
- The page is deleted from the API.
- The localStorage draft is cleared.
- You are redirected away from the editor.
Preview
Clicking Preview opens a new browser tab showing the page as a member would see it — including the current unsaved changes.
How preview works
- The editor encodes the current page layout as a Base64 string.
- A preview URL is constructed with
?previewOutline=<base64>&previewName=<identifier> parameters.
- For built-in pages, the URL points to the page’s standard route.
- For custom pages, the URL points to
/pages/{fileId}/{slug}.
- When the portal loads, it reads the URL parameters, stores the preview data in localStorage, and strips the parameters from the URL.
Preview banner
While preview outlines are active, the portal shows a yellow warning banner at the top of every page:
- Text: “Preview mode — You are browsing the site with unsaved page previews.”
- Button: “Clear preview” — removes all preview data from localStorage and reloads the portal.
- The banner does not appear inside the editor itself.
Preview data persists in the browser until you click “Clear preview” or close the tab. This lets you navigate around the portal and see how the
previewed page interacts with the rest of the site.
Save
Clicking Save persists the current layout:
- New custom pages (ID = 0): the editor sends a
POST request to create the page. On success, the URL updates to reflect the new page ID.
- Existing custom pages: the editor sends a
PUT request to update the page.
- Built-in pages: the editor sends a
PUT request to update the named outline.
- The draft is cleared from localStorage.
- The
hasDraft indicator disappears.
Viewports
The canvas supports three viewport sizes for responsive design:
| Viewport | Width | Icon |
|---|
| Desktop | 1400 px | Monitor |
| Tablet | 768 px | Tablet |
| Mobile | 375 px | Smartphone |
