The complete Canvas Studio feature inventory.
Every panel, block, form and behavior in the live editor, compiled by reading the source, not the summary. A three-panel WYSIWYG builder where the canvas is the page. Browse all fifteen sections from the rail, or search to jump.
studio.clicker.app / acme / home
Hero · Properties
Subtitle
01
Editor Shell & Layout
A three-panel WYSIWYG layout on desktop that collapses to a bottom-sheet layout on mobile.
Three regions
Left rail
Icon strip (
w-12) plus a switchable panel (w-56) for page editing.Center canvas
A live, full-template preview of the page - true WYSIWYG.
Right sidebar
Properties at
w-80 / 320px, collapsible to a thin strip.Left icon rail
Page-editing group
Toggles the panel: Pages
P, Add Block A, Layers Z.Feature-management group
Opens slide-overs: Links, Forms, Products, Site Info, Branding, Site Styles, Media.
Hover tooltips
Every icon reveals a label plus its keyboard shortcut on hover.
Toggle behavior
Active panel is highlighted blue; clicking an active icon toggles it closed.
Keyboard shortcuts (desktop)
PPagesAAdd BlockZLayersLLinksFFormsBProductsISite InfoGBrandingTSite StylesMMedia
Right sidebar behavior
Header buttons
Title & Slug, SEO & Analytics, Page Background, Close.
Selection-aware
Shows the block / chrome form when selected; page-level tabs otherwise.
Auto-collapse
Shrinks to a 12px strip when nothing is selected and not manually opened.
Empty state
"Select a block on the canvas to edit its properties."
02
The Canvas
The center WYSIWYG preview - a real, full template you click straight into.
Renders a real template
Template header / NavBar
chrome:header - clickable for page switching.Profile header
Avatar, name and tagline when the template provides one.
All blocks
Rendered through
BlockRenderer in previewMode.Footer & bottom nav
chrome:footer and chrome:bottomnav - both clickable.Device-view frames
Desktop · min 1024px
Tablet · 768px
Mobile · 375–390px
Interaction model
Selection ring — Blue ring on the selected block; toggleable hover guides.
Click to select — Select any block; click empty canvas to deselect.
Auto-scroll — Canvas scrolls to the selection; sidebar scrolls to the focused field with a brief blue flash.
Guarded previews —
pointer-events: none on most children so links and buttons don't fire.Live page-switching — Internal nav switches the canvas; external links open a new tab.
States — "Loading page..." overlay during switches; empty-page prompt to start adding blocks.
03
Top Bar
StudioTopBar - global controls that sit above the canvas.
Controls
Device toggle
Switch Desktop / Tablet / Mobile preview frames.
Save
Commits the page; turns orange when there are unsaved changes.
Homepage controls
Set or unset the current page as the site homepage.
Dirty indicatoralert
An orange dot signals unsaved edits.
On mobile
Replaced by the bottom tab bar
On small screens the top bar gives way to the mobile tab bar (see §15).
04
Pages Panel
Manage every page in the site, with a full soft-delete trash workflow.
Page list
Homepage first
Title and
/slug, with a Home icon marking the homepage.New page
The
+ action opens create mode.Switch page
Click to switch, guarded by an unsaved-changes check.
Per-page trash
Hover a row's trash button for inline Confirm / Cancel.
Trash drawer
Bulk actions
Restore All, Empty Trash, with a live count badge.
Per-item
Restore or Delete permanently, each behind a confirmation dialog.
Restored-slug notice
Flags a renamed slug when a restore would collide.
Confirmationsalert
"Delete Permanently?" and "Empty Trash?" dialogs.
05
Add Blocks Panel
The block library. Adding inserts after the selection, auto-selects, and jumps to Layers.
Core blocks
Hero
Text
Content Showcase
Image
Button
Product List
FAQ
Link Card
Map
Image Gallery
Social Embeds
Heading
Feature Cards
Columns
Grid
Marquee
Testimonials
Inline Form
System blocks · auto-hydrate from settings
Quick Actions
System
Operating Hours
System
Featured Product
System
Branches
System
Behavior
View toggle — Switch the library between List and Grid (persisted).
Smart insertion — New blocks land after the selected block, or append when nothing is selected.
Module-contributed blocks — Appear only when their module is enabled - e.g. Reservation, Digital Product Grid, POS Menu.
06
Layers / Navigator
The page's structural tree - reorder, rename, hide and nest every block.
Pinned chrome rows
Header Navigation
Locked, not deletable.
Site Footer
Locked, not deletable.
Bottom Navigation
Locked, not deletable.
Block tree
Drag to reorder
DnD-kit: mouse, 200ms touch hold, and keyboard.
Rename
Double-click a label - Enter commits, Esc cancels, clearing restores the default.
Show / Hide
Hidden blocks dim to 40% in the tree and are omitted from the public page.
Delete
Inline soft-red Confirm / Cancel button.
Expand / collapse
Open nested containers - Columns, Grid, Feature Cards.
Collapse-all toggle
Expand or collapse the whole tree from the title bar.
07
Block Property Forms
The right sidebar - a tailored, field-level form for every block, with layout variants on top.
Layout variant pickers
Herosoon
Centered - Split and Fullbleed marked "Soon".
Text
Prose · 2-Col · Boxed.
Image
Standard · Full.
FAQ
Accordion · Grid · List.
Map
Embed · Card.
Per-block forms
Hero
Background mode, desktop + mobile image with drag focal-point picker, text-color mode, Tagline / Title / Subtitle, and two CTAs (URL / Page / Form targets).
Heading
Heading, size, align; optional subheading; vertical spacing; horizontal padding.
Text
Rich-text editor; vertical spacing; horizontal padding.
Content Showcase
Block settings plus repeatable rows - heading, media, rich-text, per-row layout, optional CTA.
Image
Media field (image / video / lottie) and caption.
Button
Text, open-in-new-tab, tier, size, alignment, optional secondary button.
Product List
Section title and a multi-select that opens the Products slide-over.
Link Card
Pick a saved link; override background and border color.
Social Embeds
Section title, max embeds (1-12), repeatable URL + caption.
Marquee
Repeatable label + icon items; speed, direction, icon size, gap.
Columns / Grid
Nested-block containers with gaps, padding, stack-on-mobile, and drill-down editing.
System & module blocks
Minimal title overrides plus a deep-link to the module's settings.
08
Inline Edit Toolbar
A floating toolbar that portals above the focused Hero or Heading field, on the canvas itself.
The toolbar
Controls
Title / Heading
Size: S · M · L · XL.
Subheading
Size S-XL plus Bold and Underline.
Field label
Indicates which field is being edited.
Alignment & clear
Left / Center / Right, plus a trash action to clear the field.
09
Chrome Property Panels
Site-wide chrome - the header, footer and bottom navigation that wrap every page.
Panels
Header Navigation
Style preset, variant, width, border, full typography overrides, scroll behavior, link type and button label.
Site Footer
Footer text, saved on blur - a global setting.
Bottom Navigation
Appearance, background, border-top, nav links (Page / Form / URL) and a center FAB button.
10
Slide-Over Feature Panels
Seven full-height managers for everything that lives beyond a single page.
The managers
LinksL
Link-in-bio manager - add / edit (URL / Form / Page), icon selector, hide-on-home, drag-reorder, trash, RBAC-gated.
FormsF
Form builder - title, button text, published toggle; fields with label, type, placeholder, required, options.
ProductsB
Product manager - price, gallery, category, badge, URL / WhatsApp CTAs, hidden toggle.
Site InfoI
Identity with live Google preview, images with live social-share preview, tracking pixels, social media.
BrandingG
Display name, tagline, description, avatar / logo upload and the global background editor.
Site StylesT
Fonts (heading + body pack) and Buttons (style pack + colors). Colors & Forms - coming soon.
MediaM
Browse the library grid; click to copy a URL (toast); "Manage" opens the media app.
11
Page-Level Settings
Right-sidebar tabs shown when no block is selected - settings scoped to the page.
Tabs
Title & Slug
Title with auto-slug for new pages; live URL preview
host/tenant/slug.SEO & Analytics
Tracking pixels and SEO meta, each with a Use-Global / Overriding toggle and a noindex switch.
Page Background
BackgroundMediaEditor with an inherit-from-global option.
12
Media Field & Picker
The shared media stack used by every block that holds an image, video or animation.
MediaField
Type tabs
Image · Video · Lottie.
Display options
Aspect ratio, object-fit and a poster image.
Size warningalert
Warns when the upload is below the recommended resolution.
Used everywhere
Image block, Content Showcase rows, rich-text inserts, background editors.
MediaPicker
Library
Pick from the existing media library.
Upload
Drop in a new file.
URL
Paste a remote URL.
13
Rich Text Editor
A Tiptap-powered editor with a full, active-state toolbar.
Toolbar groups
History
Undo and Redo.
Structure
Heading popover, bullet list, numbered list, blockquote.
Inline
Bold, Italic, Underline, Strikethrough.
Color
Text-color popover and highlight popover.
Typography
Font-size and line-height popovers.
Alignment
Left, Center, Right.
Embeds
Link selector, image (via MediaPicker) and video embed.
14
State, Save & Data Integrity
The engine underneath - two contexts, a single-owner selection model and resilient saving.
Architecture
Two contexts
EditorContext for canvas state, PageStudioContext for pages, save and settings.Single-owner selection
A discriminated union (none / blocks / slots / chrome) prevents render loops.
Dirty tracking
JSON-snapshot diff drives the orange-dot indicator.
Page cache
An LRU of 10 pages for instant switches, with silent background refresh.
Safety & save
Unsaved-changes guards
beforeunload warning plus a Save & Switch / Discard / Cancel dialog.Block hydration
System and data blocks hydrate from settings via
hydratePageBlocks.Save validation
Slug validation and uniqueness, auto-naming empties to "Untitled", tenant-cache purge.
Legacy migration
Auto-converts old HTML content pages and legacy homepage block order.
15
Mobile Experience
The whole studio, reflowed into bottom sheets and a persistent tab bar.
Mobile shell
Bottom tab bar
Pages, Layers, Add, Properties (badge when a block is selected), More, and Save (orange when dirty).
Bottom sheets
Replace the sidebars; the Properties sheet has Page / SEO / Background sub-tabs.
"More" sheet
Groups the feature panels - Links, Forms, Products, Site Info, Branding, Site Styles.
Full-width canvas
The preview takes the full screen between the chrome.