Documentation — Surgepulse Studio

Browse by topic

Quick start

Create your account

Free — no credit card required

Pick a template or use AI

14 templates or describe your site in plain English

Customize

Drag components, edit text, adjust styles — no code

Publish

One click — live at yourname.surgepulse.org

Visual Editor

70+ components — drag from the Blocks panel (left sidebar) onto the canvas. Categories include Sections, Layout, Forms, Sliders, Scrolling, Navigation, Interactive, and Basic elements.

Style Manager — click any element to open the right panel. Edit typography, colors, spacing, borders, backgrounds, flexbox, and outline properties visually.

Layers panel — view the element hierarchy like a design tool. Click to select, drag to reorder.

Section Navigator — use the Sections dropdown above the canvas to jump between page sections instantly.

Position Toolbar — when you select an element inside a flex container, push-left/center/right buttons appear in the toolbar.

Split Preview — click the columns icon in the toolbar to see a live preview alongside your editing canvas.

History — click the clock icon in the left sidebar to view undo/redo history. Click any step to restore.

Link Picker — click any link element and the toolbar shows all pages and page sections for quick linking.

Keyboard Shortcuts

Key	Action
`G`	Toggle gridlines
`F`	Freefall mode (absolute positioning)
`Ctrl+D`	Duplicate selected component
`Ctrl+Z`	Undo
`Ctrl+S`	Save
`Delete`	Remove selected component
`Esc`	Deselect / close panel
`Ctrl+/-`	Zoom in / out

AI Site Builder

The AI Builder generates complete websites from a text description. Available on paid plans (Starter, Pro, Enterprise).

How to use:

1. Go to AI Builder from the dashboard or templates page

2. Enter your site name and a description of what you want

3. Click Generate with AI — the AI creates a full website in 30-60 seconds

4. Edit everything in the visual editor — the AI output is your starting point

Tips for better results

✓ Be specific: "fitness studio with class schedule, pricing, dark theme"

✓ Mention colors: "navy and gold" or "warm earth tones with teal accents"

✓ List sections: "hero, features, pricing, testimonials, team, contact, footer"

✓ Specify audience: "for a B2B SaaS startup targeting enterprise clients"

! AI output is fully editable — treat it as a starting point, then customize

Components

The editor includes 70+ drag-and-drop components organized by category:

Sections: Hero Bold, Hero Split, Features Grid, Pricing, Testimonials, CTA, Stats, Team, Logo Cloud, Timeline, Comparison Table, Blog Cards, Icon Boxes, Map, Number Counter

Interactive: Tabs, Accordion, FAQ, Chat Bot, Progress Bars, Countdown, Before/After, Cookie Banner, Back to Top, Alert Banner

Layout: Navbar, Footer, 2/3/4 Columns, Sidebar, Grid, Container, Full-Width Section

Scrolling: Scrolling Text (dark/light), Scrolling Images, Text + Image Scroll, Marquee Ticker

Forms: Contact Form, Sign In, Register, Newsletter

Basic: Text, Image, Video, Map, Divider, Spacer, Social Icons, Wave/Angle Dividers

Publishing & Domains

One-click publish: Click "Publish" in the editor toolbar. Your site goes live instantly at yoursite.surgepulse.org with automatic SSL.

Custom domains: On Pro/Enterprise plans, connect your own domain. Go to Site Settings, enter your domain, and add a CNAME record pointing to studio.surgepulse.org. DNS verification is automatic.

SEO: Edit meta title, description, and keywords in Site Settings (site-level) and in the editor's Pages panel (page-level). Google Analytics ID can be added in Site Settings.

Multi-page sites: Add pages in the editor's Pages panel. Published sites automatically show page navigation at the bottom.

Code export: Export your site as a single HTML bundle, separate HTML + CSS files, or a ZIP archive (paid plans only).

Can't find what you need?

Contact support

Learn to build with Surgepulse