GlassStudio — Visual Website Editor

Features

Everything you need to edit any website

11 professional editing tools packed into a single file. No build step, no dependencies, no framework lock-in.

🎨

Visual Style Editing

Colors, backgrounds, gradients, borders, opacity, spacing — all controlled via sliders and swatches with live preview.

📐

Flexbox & Grid Controls

Toggle display modes, set direction, justify, align, gap, and wrap — visually, without writing a single line of CSS.

🔤

Typography Engine

Font family, weight, size, letter-spacing, line-height, text transform, and text shadow — all with inline editing.

🌈

Gradient Builder

Pick start/end colors, set angle, preview in real time, and apply linear gradients to any element instantly.

✨

CSS Transition Builder

Set property, duration, easing, and hover scale — then preview the animation live before applying it.

📋

Copy & Paste Styles

Ctrl+Shift+C to copy an element's full style, Ctrl+Shift+V to paste it onto any other element. Works with batch.

📏

Spacing Visualizer

Toggle an overlay showing padding (green) and margin (blue) on any element — updates live as you scroll.

📱

Responsive Preview

Switch between Mobile (375px), Tablet (768px), and Desktop widths to preview your designs responsively.

🔄

Undo / Redo + History

Full 50-state undo/redo stack with a timestamped history panel. Click any entry to jump back instantly.

👆

Batch Editing

Shift+click to select multiple elements. All style changes apply to the entire batch simultaneously.

💾

Presets & Export

Save style presets by category, export as clean HTML, CSS, React JSX, or Tailwind classes. Download or copy.

⌨️

Keyboard Shortcuts

Full shortcut support — undo, redo, toggle sidebar, switch tabs, copy/paste styles, and more. Press ? to see all.

INTERACTIVE PLAYGROUND

Live Demo

Click any element below to start editing

Every element with a dashed outline on hover is editable. The GlassStudio sidebar will open automatically. Try changing colors, spacing, fonts, and effects.

Welcome to GlassStudio

Click this text to edit it inline. Change the font, color, size, weight, letter-spacing, or apply text shadows — all from the sidebar panel.

Edit This Button

Layout & Spacing

Select this card and try adjusting padding, margin, border-radius, and border styles. Toggle the Spacing Visualizer to see padding and margin overlays.

Flexbox Grid Spacing

Effects & Transitions

Apply box shadows, gradients, opacity changes, and CSS transitions. Use the Transition Builder to set up hover animations with live preview.

Click the image to resize, apply filters, and adjust layout

Quick Start

Add GlassStudio to any website in 30 seconds

Two files. Zero dependencies. Just drop them in and add data-editable="true" to any element you want to be editable.

Include the files

Add the CSS and JS files to your HTML page.

<link rel="stylesheet" href="overlay-editor.css">
<script src="overlay-editor.js"></script>

Mark editable elements

Add the data attribute to any element you want users to edit.

<h1 data-editable="true">
  Edit me!
</h1>

Done — it auto-boots

GlassStudio initializes automatically. You can also control it via the API.

GlassStudio.init();
GlassStudio.on('change', (e) => {
  console.log('Changed:', e);
});

Shortcuts

Keyboard shortcuts

Press ? at any time to see this list in the editor.

Shortcut	Action
Ctrl + Z	Undo last change
Ctrl + Shift + Z	Redo
Ctrl + \	Toggle sidebar visibility
Escape	Deselect element / switch to Page mode
1 — 4	Switch between visible tabs
Shift + Click	Batch-select multiple elements
Ctrl + Shift + C	Copy element style
Ctrl + Shift + V	Paste element style
?	Show shortcut overlay

GlassStudioVisual Website Editor