Editing Your Site
Chat patches, inline text editing, design presets, color changes, and version history.
Three Ways to Edit
Draftly gives you three distinct editing modes:
For design changes, use chat edits. For copy tweaks, use inline editing. For structural changes beyond what chat can handle, use the code editor.
Chat Edits (Surgical Patches)
Chat edits are the primary iteration tool. When you type in chat after generation, the AI: 1. Analyzes your request 2. Generates a minimal set of HTML/CSS patches (0–8 operations) 3. Applies them live to the preview 4. Deducts 0.5 credits
What chat edits can do: - Change any CSS color, gradient, or variable - Rewrite any text — headlines, body copy, button labels - Restructure sections — grid columns, list vs. cards - Add or remove elements within sections - Change fonts, spacing, padding, border styles - Insert a new section at the end of the page
What triggers a full regen: - Complete structural redesign (changes the layout architecture) - Requests that require rerunning the image or video pipeline - Changes too diffuse to express as targeted patches
A clear warning appears before any full regen. You'll see the credit cost and can cancel.
Inline Text Editing
Click any visible text in the site preview to edit it. An editable overlay appears — type your new text and press Enter or click elsewhere to confirm.
What you can inline-edit: - Hero headline and subline - Navigation link labels - Section headings and body copy - Button labels - Footer tagline and contact info
Inline edits are saved to your project automatically. Re-publishing applies them to the live site.
Inline editing is completely free — zero credits.
Design Presets
Design Presets are one-click style transformations that change the entire visual character of your site without touching content.
Open the preset panel via the paintbrush icon in the builder left panel.
Preset categories: - Industry — Restaurant, SaaS, Portfolio, Agency, Healthcare, Fitness, Real Estate, Beauty - Color palettes — Dark, Light, Moody, Vibrant, Minimal, Luxury, Ember, Ocean, Forest - Typography sets — Modern Sans, Classic Serif, Geometric, Monospace, Editorial - Layout density — Airy (generous whitespace), Standard, Compact
Applying a preset: Click any preset — the preview updates live. Click another to compare. Apply to confirm.
Presets modify CSS variables and font choices — not HTML structure. They are completely free, no credits consumed.
Changing Colors
Colors in your site are stored as CSS variables in the <style> block:
--bg — page background--accent — primary accent / CTA color--text — body text--heading — heading color--border — border / divider colorThree ways to change colors:
- Chat: "Change the primary accent to #FF6B35" or "Make the background a deep navy"
- Design Presets: Pick a coordinated color palette — changes all variables at once
- Code editor: Edit :root CSS variables directly in the Code tab
Chat color changes cost 0.5 credits. Preset and code changes are free.
Version History
Every full regeneration and major edit creates a version checkpoint saved in your History tab.
To roll back: 1. Open the History tab in the builder 2. Click any previous version to preview it in the right pane 3. Click Restore to make it your current version
Rolling back is free — it restores the saved HTML without consuming any credits.
History checkpoints are stored in Firestore and survive browser refreshes, device switches, and session logouts.