---
title: "Page Studio - Serpwise Documentation"
description: "Visually edit page elements, styles, and SEO tags, then deploy the changes as proxy rules."
url: "https://serpwise.ai/docs/page-studio/"
source: "https://serpwise.ai/docs/page-studio/"
---
[Back to Serpwise](/)

Serpwise Documentation

Connect · Configure · Execute

Search documentation

`/`

No documentation found.

↑↓ Navigate Enter to open

Browse documentation

**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](/docs/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.

* * *

## How It Works

```
You → Enter page path → Studio fetches live page → Edit visually → Deploy as proxy rule
```

Page Studio uses a **session-based** workflow:

1. The studio fetches your page HTML through the gateway and renders it in a live preview
2. A bridge script inside the preview enables element selection and highlighting
3. Every change you make - CSS tweaks, element removals, SEO tag updates - is tracked as an **edit** in the session
4. When you deploy, all edits compile into proxy rule actions (`inject_css`, `remove_element`, `set_meta_title`, etc.)
5. The deployed rule targets the exact page path with a `url.path equals` condition and applies your changes for all visitors

* * *

## Getting Started

1. Navigate to **Domains** → select your domain → **Page Studio** tab
2. Enter a **page path** (e.g., `/` or `/blog/my-post`) and click **Open in Studio**
3. The live preview loads in the left panel - click any element to select it
4. Edit properties in the right panel, use the AI chat, or modify SEO tags
5. 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.

* * *

## 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](/docs/rules-overview) for details.
- **Analytics** - Shows traffic and performance data for the page, helping you prioritize which pages to optimize. See [Analytics](/docs/analytics) for details.

* * *

## Deploying Changes

1. Click **Deploy** in the toolbar (requires at least one edit; disabled if the session is already deployed)
2. Review the **edit summary** - shows total edits, broken down by manual vs. AI-generated
3. Set a **rule name** (defaults to `Page Studio: {path}`), optional **description**, and **priority** (0-1000, higher executes first)
4. 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_css` action
- Hidden elements become `remove_element` actions with their CSS selector
- SEO changes become `set_meta_title`, `set_meta_description`, `set_canonical`, `set_meta_robots`, or `set_meta_tag` actions
- The rule targets the page path with a `url.path equals` condition

The deployed rule behaves like any other rule in the [Rules Engine](/docs/rules-overview) - 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.](/docs/page-builder)

[**Rules Engine**  
→  
\
Deployed Page Studio edits become rules - learn how conditions and actions work.](/docs/rules-overview)

[**Actions**  
→  
\
All available rule actions, including the ones Page Studio generates.](/docs/actions)

[**Credits & AI Pricing**  
→  
\
How credits work and what AI-assisted edits cost.](/docs/credits)