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.
Page Builder lets you create and publish custom landing pages served directly by the SerpWise gateway. Pages are injected at any URL path on your domain — visitors see them as native pages, but your origin server is never involved. Build pages with AI-generated content or from scratch, customize styling with theme variables, and publish instantly.
Page Builder requires a paid plan. AI page generation costs 3 credits per generation. See Credits & AI Pricing for details.
Overview
Page Builder pages live entirely within SerpWise. When a request hits the gateway for a path that matches a published page, the gateway returns the page directly — the request never reaches your origin server.
Visitor → CDN → Gateway → Is there a published page at this path?
├─ YES → Serve custom page (HTML + CSS + Tailwind + SEO tags)
└─ NO → Forward to origin server (normal proxy flow)This makes Page Builder ideal for:
- SEO landing pages targeting specific keywords
- Campaign pages that need fast iteration
- Content hubs and resource pages
- Microsites served from your main domain
Creating a Page
Navigate to Domains → select your domain → Pages tab
Click Create Page and set the URL path (e.g., /landing/summer-sale)
Enter a title and optional description
Start building — use the AI Prompt tab to generate content, or write HTML directly
URL paths must start with / and contain only lowercase letters, numbers, hyphens, and slashes. Each path must be unique per domain.
AI Generation
Describe the page you want in plain language and the AI generates production-ready HTML and CSS.
Open the AI Prompt tab in the editor
Describe your page (10–2,000 characters) — include the purpose, target audience, key content, and desired tone
Click Generate Page — the AI produces HTML with Tailwind CSS classes and custom styles
Review the live preview, then refine by editing the prompt or switching to the HTML/CSS tabs
The AI generates:
- Semantic HTML5 markup (header, main, section, footer, nav, article)
- Tailwind CSS utility classes with your theme variables
- Mobile-first responsive layout
- WCAG 2.1 AA accessible markup (alt text, ARIA labels, heading hierarchy)
- Placeholder images via
placehold.co(replace with your own)
Each generation costs 3 credits (pre-deducted). If you already have content, the AI can refine it — pass existing HTML and describe the changes you want.
Editing Content
The page editor is a split-pane layout with five tabs on the left and a live preview on the right.
AI Prompt
Describe what you want in natural language. Works for both initial generation and iterating on existing content. The AI sees your current HTML when refining, so you can say things like "add a testimonials section below the hero" or "make the CTA more prominent."
HTML
Raw HTML editor for the page body content. Write standard HTML — no <html>, <head>, or <body> wrappers needed. The gateway wraps your content in a full HTML document with proper SEO tags automatically.
CSS
Custom styles beyond what Tailwind provides. Your CSS is injected in a <style> tag within the page. Prefix custom class names with pb- to avoid conflicts with Tailwind utilities.
Styling
Visual controls for 9 theme variables that affect the entire page:
| Variable | Default | Description |
|---|---|---|
--primary-color | #3b82f6 (Blue) | Primary brand color |
--secondary-color | #64748b (Slate) | Secondary/muted color |
--accent-color | #f59e0b (Amber) | Accent/highlight color |
--background-color | #ffffff (White) | Page background |
--text-color | #0f172a (Dark slate) | Body text color |
--font-family | system-ui, sans-serif | Body font stack |
--heading-font-family | system-ui, sans-serif | Heading font stack |
--border-radius | 0.5rem (Medium) | Default border radius |
--max-width | 1200px | Content container max width |
Font stacks: System UI, Inter, Georgia, Merriweather, Monospace
Border radius presets: None, Small (0.25rem), Medium (0.5rem), Large (1rem)
Max-width presets: 960px, 1080px, 1200px, 1440px, Full (100%)
Settings
Page metadata for SEO:
- Title — the page title (used in
<title>and breadcrumbs) - Description — internal description for your team
- Meta Title — override the
<title>tag (falls back to title) - Meta Description — the
<meta name="description">content - URL Path — the path where this page is served
Reusable Components
Build a library of reusable components that can be inserted into any page.
Navigate to the Components section within Page Builder
Create a new component — either write HTML manually or generate with AI (3 credits)
Publish the component to make it available across your organization
When editing a page, open the Component Picker to browse and insert published components
Components are self-contained HTML + CSS blocks. They use the same Tailwind classes and CSS variables as pages, so they adapt to each page's theme automatically.
Preview & Publish
Live Preview
The editor includes a real-time preview pane that renders your page as visitors will see it. Toggle between viewport sizes:
- Desktop — full width
- Tablet — 768px
- Mobile — 375px
The preview renders in a sandboxed iframe with the same Tailwind CDN and theme variables the gateway uses.
Preview Tokens
Share a preview of unpublished pages with stakeholders using preview tokens:
- Tokens are valid for 30 minutes
- The preview URL includes a secure token parameter
- Preview pages are served with
noindex, nofollowandCache-Control: private, no-cache
Publishing
Click Publish to make a page live. The gateway cache is invalidated automatically — the page is available at its URL path on the next request. Click Unpublish to take a page down without deleting it.
Version History
Page Builder automatically creates a version snapshot before every update.
- Browse all previous versions from the Versions panel
- Compare any version's content against the current page
- One-click restore — restore a previous version instantly (a new snapshot of the current state is created first, so nothing is lost)
How Pages Are Served
When the gateway receives a request matching a published page's URL path:
- The page's HTML and CSS are loaded from the database
- Style variables are merged with defaults
- The gateway constructs a full HTML document:
- Tailwind CDN — the Tailwind CSS CDN script is injected with a custom config mapping theme variables to Tailwind's
primary,secondary, andaccentcolors - CSS variables — theme variables are set as CSS custom properties on
:root - Custom CSS — your page-specific styles in a
<style>tag - SEO headers — canonical URL, Open Graph tags (
og:title,og:description,og:url,og:site_name), Twitter Card meta tags - JSON-LD —
WebPagestructured data with the canonical URL
- Tailwind CDN — the Tailwind CSS CDN script is injected with a custom config mapping theme variables to Tailwind's
- Response headers are set:
Content-Type: text/html; charset=utf-8X-SerpWise-Page: custom- Published pages:
Cache-Control: public, max-age=300(5 minutes) - Preview pages:
Cache-Control: private, no-cache - Published pages:
<meta name="robots" content="index,follow"> - Preview pages:
<meta name="robots" content="noindex,nofollow">
- Security headers and proxy headers are applied
Theming
Pages use CSS custom properties for consistent theming. These variables are available in both your HTML (via Tailwind classes) and CSS:
| CSS Variable | Tailwind Class | Default |
|---|---|---|
var(--primary-color) | bg-primary, text-primary | #3b82f6 |
var(--secondary-color) | bg-secondary, text-secondary | #64748b |
var(--accent-color) | bg-accent, text-accent | #f59e0b |
var(--background-color) | — | #ffffff |
var(--text-color) | — | #0f172a |
var(--font-family) | font-sans | system-ui, sans-serif |
var(--heading-font-family) | font-heading | system-ui, sans-serif |
var(--border-radius) | rounded | 0.5rem |
var(--max-width) | max-w-page | 1200px |
Use Tailwind utility classes for most styling. Use the CSS variables directly in custom CSS when you need values not covered by Tailwind utilities.
Credits
| Action | Cost |
|---|---|
| AI page generation | 3 credits per generation |
| AI component generation | 3 credits per generation |
| Manual editing, preview, publish | Free |
| Version history and restore | Free |
Credits are pre-deducted when you confirm generation. See Credits & AI Pricing for package details.
Limitations
- No JavaScript — pages cannot include
<script>tags or inline JavaScript for security; use Code Injection for domain-wide scripts - Placeholder images — AI-generated pages use
placehold.coimages; replace them with your own assets - One page per path — each URL path can only have one page per domain
- Paid plan required — Page Builder is not available on the free tier
- HTML size limit — page HTML content is capped at 1 MB, CSS at 200 KB
- URL path format — must start with
/and contain only lowercase letters, numbers, hyphens, and slashes
AI Optimizer Integration
Published Page Builder components can be automatically deployed by the AI Optimizer as inject_component actions. When the optimizer identifies a page that would benefit from one of your components (e.g., a trust badge strip on a high-traffic product page), it creates a rule that injects the component at the right position — bridging visual design with autonomous deployment.
Related Features
Domains
Manage the domains where your pages are published.
Code Injection
Add global CSS and JavaScript to all pages on a domain, including Page Builder pages.
Credits & AI Pricing
How credits work and what AI generation costs.
AI Optimizer
Autonomous optimization engine that can deploy your Page Builder components via inject_component rules.
AI Optimizer
Autonomous website optimization — the AI analyzes your traffic, SEO audits, Core Web Vitals, conversion data, geo signals, and bot patterns, then generates and deploys proxy rules that improve your site in real time.
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.