Page Studio
Visually edit any existing page on your domain — click elements, modify styles and SEO tags, use AI for changes, then deploy edits as proxy rules.
Page Studio is a visual editor for existing pages on your domain. Click any element in a live preview, modify its styles or SEO tags, use AI to describe changes in plain language, then deploy everything as a proxy rule — no origin code changes needed.
Unlike Page Builder which creates new standalone pages, Page Studio modifies pages that already exist on your origin server. Your edits are applied at the proxy layer, so visitors see the changes but your origin remains untouched.
Page Studio requires a paid plan. AI-assisted edits consume credits. Manual edits, preview, and deployment are free.
How It Works
You → Enter page path → Studio fetches live page → Edit visually → Deploy as proxy rulePage Studio uses a session-based workflow:
- The studio fetches your page HTML through the gateway and renders it in a live preview
- A bridge script inside the preview enables element selection and highlighting
- Every change you make — CSS tweaks, element removals, SEO tag updates — is tracked as an edit in the session
- When you deploy, all edits compile into proxy rule actions (
inject_css,remove_element,set_meta_title, etc.) - The deployed rule targets the exact page path with a
url.path equalscondition and applies your changes for all visitors
Getting Started
Navigate to Domains → select your domain → Page Studio tab
Enter a page path (e.g., / or /blog/my-post) and click Open in Studio
The live preview loads in the left panel — click any element to select it
Edit properties in the right panel, use the AI chat, or modify SEO tags
Click Save to persist your session, then Deploy to push changes live as a proxy rule
The Editor
The editor is a resizable split-pane layout: live preview on the left (65% default) and a tabbed panel on the right with five tabs — Properties, AI, SEO, Rules, and Analytics.
Toolbar
| Control | Description |
|---|---|
| Page path + status | Shows the current page path and session status (active, deployed, draft) |
| Edit counter | Badge showing the number of edits in the session |
| Undo | Revert the last edit and re-apply remaining edits to the preview (Ctrl+Z / Cmd+Z) |
| Selection mode | Toggle click-to-select on/off in the preview |
| Device preview | Switch between Desktop (100%), Tablet (768px), and Mobile (375px) viewports |
| Save | Persist current edits to the session |
| Deploy | Open the deploy dialog to compile edits into a proxy rule |
Live Preview
The page renders in a sandboxed iframe. Hover over elements to highlight them with an overlay, then click to select. Selecting an element automatically switches the right panel to the Properties tab.
Toggle between Desktop, Tablet (768px), and Mobile (375px) viewports to preview how your changes look across devices.
Properties Panel
When you select an element, the Properties panel shows its identity (tag name, ID, CSS classes) and provides visual controls for editing its styles.
Hide Element — Remove the selected element from the page entirely. This compiles to a remove_element rule action targeting the element's CSS selector.
Six collapsible property groups are available:
Typography
| Property | Input | Range |
|---|---|---|
font-family | Text | e.g. Arial, sans-serif |
font-size | Pixel slider | 0–200px |
font-weight | Select | 100–900 |
line-height | Text | e.g. 1.5 or 24px |
letter-spacing | Pixel slider | -10 to 50px |
text-align | Select | left, center, right, justify |
text-transform | Select | none, uppercase, lowercase, capitalize |
text-decoration | Select | none, underline, line-through, overline |
color | Color picker | Hex / RGB |
Spacing
| Property | Input | Range |
|---|---|---|
margin-top/right/bottom/left | Pixel slider | -200 to 200px |
padding-top/right/bottom/left | Pixel slider | 0–200px |
Background
| Property | Input | Range |
|---|---|---|
background-color | Color picker | Hex / RGB |
opacity | Number | 0–1 (step 0.05) |
Border
| Property | Input | Range |
|---|---|---|
border-width | Pixel slider | 0–20px |
border-style | Select | none, solid, dashed, dotted, double, groove, ridge |
border-color | Color picker | Hex / RGB |
border-radius | Pixel slider | 0–100px |
Layout
| Property | Input |
|---|---|
display | Select: block, inline, inline-block, flex, grid, none |
width | Text (e.g. 100%, 300px, auto) |
height | Text (e.g. auto, 200px) |
max-width | Text (e.g. 100%, 1200px) |
min-height | Text (e.g. 0, 200px) |
overflow | Select: visible, hidden, scroll, auto |
Effects
| Property | Input |
|---|---|
box-shadow | Text (e.g. 0 2px 4px rgba(0,0,0,0.1)) |
text-shadow | Text (e.g. 1px 1px 2px #000) |
transform | Text (e.g. rotate(5deg), scale(1.1)) |
All CSS changes are applied instantly to the live preview and tracked as inject_css rule actions.
AI Chat
The AI tab provides a natural language interface for describing visual changes. Instead of manually adjusting CSS properties, describe what you want and the AI generates the edits.
The AI is context-aware — it knows which element is selected, has a DOM map of the entire page, and sees your existing edits. Chat history is persisted per session.
Example prompts:
- "Make the heading larger and bolder"
- "Change the background to a light blue gradient"
- "Center all the text in this section"
- "Reduce the padding on the hero banner"
- "Hide the sidebar navigation"
AI-generated edits are applied to the live preview immediately and appear alongside manual edits in the session. They compile to the same rule actions on deploy.
Each AI message consumes credits. Manual edits are always free.
SEO Panel
The SEO tab lets you modify the page's metadata without touching your origin. Changes compile to rule actions alongside your visual edits.
Google SERP Preview
A live-updating preview shows how the page would appear in Google search results — title, URL, and description update as you type.
Editable Fields
| Field | Limit | Rule Action |
|---|---|---|
| Meta Title | 60 characters | set_meta_title |
| Meta Description | 160 characters | set_meta_description |
| Canonical URL | — | set_canonical |
| Robots | Dropdown (index/follow, noindex/follow, index/nofollow, noindex/nofollow) | set_meta_robots |
| og:title | — | set_meta_tag |
| og:description | — | set_meta_tag |
| og:image | — | set_meta_tag |
Character counters highlight in red when you exceed the recommended length.
Rules & Analytics Panels
- Rules — Shows existing proxy rules that already target the current page path. Useful for understanding what modifications are already in place before making additional changes. See Rules Engine for details.
- Analytics — Shows traffic and performance data for the page, helping you prioritize which pages to optimize. See Analytics for details.
Deploying Changes
Click Deploy in the toolbar (requires at least one edit; disabled if the session is already deployed)
Review the edit summary — shows total edits, broken down by manual vs. AI-generated
Set a rule name (defaults to Page Studio: {path}), optional description, and priority (0–1000, higher executes first)
Click Deploy Rule — edits compile into proxy rule actions and a new rule is created
During compilation:
- CSS property changes targeting the same selector are merged into a single
inject_cssaction - Hidden elements become
remove_elementactions with their CSS selector - SEO changes become
set_meta_title,set_meta_description,set_canonical,set_meta_robots, orset_meta_tagactions - The rule targets the page path with a
url.path equalscondition
The deployed rule behaves like any other rule in the Rules Engine — it can be enabled/disabled, reordered by priority, and edited manually.
Session Management
Sessions are listed on the Page Studio tab with the page path, page title, creation date, and status.
| Status | Meaning |
|---|---|
active | Session is in progress with unsaved or undeployed edits |
deployed | Edits have been deployed as a proxy rule |
draft | Session created but no edits yet |
- Resume any session by clicking on it in the list
- Delete sessions you no longer need — this does not affect already-deployed rules
- Sessions store the full edit history and AI chat history
Page Studio vs. Page Builder
| Page Studio | Page Builder | |
|---|---|---|
| Purpose | Edit existing pages visually | Create new pages from scratch |
| Input | A page that already exists on your origin | HTML + CSS (manual or AI-generated) |
| Output | Proxy rule that modifies the page | Standalone page served by the gateway |
| Origin involved | Yes — the page is proxied from your origin | No — the gateway serves the page directly |
| Editing model | Click elements, modify styles and SEO | Write HTML/CSS in a code editor |
| AI assistance | Chat-based CSS generation | Full page content generation |
| Best for | Quick visual tweaks, SEO fixes, style changes | Landing pages, campaign pages, content hubs |
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl/Cmd + Z | Undo last edit |
| Delete / Backspace | Hide selected element (when not in a text input) |
| Enter | Open page in studio (from path input) or send message (in AI chat) |
| Shift + Enter | New line in AI chat |
Related Features
Page Builder
Create new standalone pages from scratch instead of editing existing ones.
Rules Engine
Deployed Page Studio edits become rules — learn how conditions and actions work.
Actions
All available rule actions, including the ones Page Studio generates.
Credits & AI Pricing
How credits work and what AI-assisted edits cost.
Page Builder
Create custom SEO-optimized landing pages with AI assistance, serve them through the gateway at any URL path on your domain — no origin changes needed.
AI Markdown Serving
Serve clean Markdown to AI crawlers instead of HTML — improving how ChatGPT, Claude, Perplexity, and other AI systems understand and cite your content.