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.
Edits follow the preview size
Edits in the desktop view apply to all screen sizes. Switch to the tablet or phone preview first and your edits apply to that size only.
JS-generated content is read-only
Content created by your scripts is shown but can't be edited — the editor tells you where to change it instead. Saving never writes script output into your HTML file.
Edits win over your original styles
Edited properties override the original rule — that's what makes the change visible. Hover effects on an edited property may stop showing.
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?
Yes, safely. The editor knows which elements come from your HTML file and which were created by JavaScript when the page loaded. Script-created content is shown as read-only, with a note explaining where to edit it instead — content rendered from a Dplooy Data collection, for example, points you to the Data tab. Saving writes your original file plus only the edits you made, so script output never ends up in your HTML. If a script rewrites text that IS in your file, the editor warns you before you edit it.
Do style changes work on mobile and tablet?
Yes — style changes follow the preview size you are editing in. Edits made in the default desktop view apply to all screen sizes. Switch to the tablet or phone preview first, and your edits apply to that screen size only — so you can fix a headline that's too big on mobile without changing how it looks on desktop. Your site's own responsive design keeps working alongside your edits.
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 visual edits override my CSS stylesheet?
For the properties you change, yes — that's what makes your edit visible. Your changes are saved as CSS rules in one clearly-marked style block inside your page, written to win over the original rule for that property. Everything you don't touch keeps working exactly as your stylesheet defines it, including your responsive breakpoints. One caveat: if an element has a hover effect on a property you edit, the hover effect for that property may stop showing. To undo all visual changes, 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.