Edit your website visually
Click any element to change its text, colors, fonts, and spacing. See changes instantly in the live preview — no code knowledge required.
Click to Edit
Select any element
Edit Text
Double-click to type
Style Panel
Colors, fonts, spacing
Device Preview
Desktop to mobile
How it works
Three steps to edit your website visually — no setup, no configuration, no code.
Open Visual Editor
Click the "Visual Edit" button on any hosted website project from your dashboard. Your site loads in a live preview with the style panel ready.
Select & Edit
Hover over any element to highlight it. Click to select — the style panel shows all editable properties. Double-click text to edit it inline.
Save & Publish
Click Save when you're done. Your changes go live instantly on your hosted site. No redeployment or build step needed.
Everything in the style panel
Full control over your element's appearance — all from a single sidebar.
Typography Controls
Change font size, weight, color, line height, and text alignment. Toggle bold, italic, and underline styles with one click.
Colors & Background
Pick any color for text and backgrounds. See changes live in the preview as you edit. Supports hex color values.
Spacing & Layout
Adjust padding and margin on all four sides. Toggle the spacing overlay to visualize padding (green) and margin (orange).
Borders & Radius
Add or modify borders with custom width, color, and style. Adjust border-radius for rounded corners on any element.
Size Controls
Set explicit width and height on elements. Override auto-sizing when you need precise dimensions for images, containers, or sections.
Undo & Redo
Made a mistake? Ctrl+Z to undo, Ctrl+Y to redo. Full history tracking so you can experiment freely without worry.
Preview on every device size
Switch between desktop, laptop, tablet, and mobile views to see how your changes look across different screen sizes before saving.
Four device sizes
Desktop, laptop, tablet, and mobile — match real-world screen widths.
Spacing overlay
Toggle the overlay to see padding (green) and margin (orange) on any element.
DOM breadcrumb
See exactly where the selected element sits in the page structure.
Perfect for quick edits
The visual editor is built for fast, targeted changes to your live site.
Fix Typos Quickly
Spot a typo on your live site? Double-click the text, fix it, save. No need to open source files or redeploy.
Adjust Brand Colors
Update heading colors, button backgrounds, or section tones to match your brand without editing CSS files.
Tweak Typography
Make headings bigger, change font weights, adjust line heights — all from the visual style panel.
Fine-Tune Spacing
Add more breathing room between sections or tighten up padding — see changes live as you adjust values.
Style Portfolio Layouts
Adjust card sizes, image containers, and gallery spacing to get your portfolio looking pixel-perfect.
Check Mobile Appearance
Preview your site at phone, tablet, laptop, and desktop sizes before saving to catch layout issues early.
Start editing visually today
No setup, no learning curve. Upload your site and start clicking to edit — available on Free, Plus, and Pro plans.
Good to know
The visual editor is powerful for quick edits, but has some limitations to be aware of.
Styles apply to all screen sizes
Changes are saved as inline CSS, which cannot use responsive breakpoints. A font size change on desktop will also apply on mobile.
JS-generated content not editable
Only static HTML elements can be edited. Content created by JavaScript at runtime won't persist after saving.
Inline styles override your CSS
Visual edits take the highest CSS priority and will override hover effects, animations, and media queries for edited properties.
Cannot add or remove elements
The visual editor modifies existing elements only. To add new sections or restructure your page, use the Code Editor (Pro plan).
Frequently asked questions
Everything you need to know about the visual editor.
What can I edit with the visual editor?
You can edit text content (inline with double-click), typography (font size, weight, color, alignment, line height, bold/italic/underline), spacing (padding and margin on all sides), background colors, borders (width, color, style, radius), layout properties (display, flex), and element sizing (width, height). The visual editor modifies existing elements — it cannot add or remove elements from the page.
Does the visual editor work with JavaScript-generated content?
No. The visual editor only edits static HTML elements. If your text, images, or elements are created or modified by JavaScript at runtime, those changes won't persist after saving — the editor saves the original HTML source, not the JavaScript output. For JS-heavy sites, use the Code Editor instead.
Do style changes work on mobile and tablet?
Style changes are saved as inline CSS, which applies to all screen sizes equally. A font size change made while viewing the desktop preview will also apply on mobile and tablet. If you need responsive breakpoints (different styles per screen size), use the Code Editor (Pro plan) to write media queries in your CSS.
Which plans include the visual editor?
The visual editor is available on all plans, including the Free plan. Every user can visually edit their hosted websites at no extra cost. The Code Editor (full source code editing) is a Pro plan feature.
What is the difference between the Visual Editor and Code Editor?
The Visual Editor lets you click elements and change their styles without touching code — available on all plans. The Code Editor gives you full access to edit HTML, CSS, and JavaScript source files directly with syntax highlighting — available on the Pro plan. Use Visual Editor for quick style tweaks and text fixes; use Code Editor for structural changes, responsive design, and JavaScript edits.
Will inline styles override my CSS stylesheet?
Yes. Visual editor changes are saved as inline styles, which take the highest CSS priority. They will override styles from your external stylesheets, including hover effects, animations, and media queries for the edited properties. If you need to undo all visual changes, you can re-upload your original files.
Can I edit multi-page websites?
Yes. If your project has multiple HTML pages, use the page dropdown in the editor header to switch between pages. Each page can be edited independently.
How do I undo changes?
Use Ctrl+Z (or Cmd+Z on Mac) to undo and Ctrl+Y (or Cmd+Y) to redo. The editor maintains a full undo history for your session. If you want to discard all changes, simply close the editor without saving.
Ready to edit your site visually?
Upload your website, click Visual Edit, and start making changes. It's that simple.
Free plan includes 3 projects with visual editing. No credit card required.