Canvas and live preview.

The canvas isn’t a mockup or a placeholder. It’s your actual page, served from your actual server, with all your actual content. Glopzi loads it with ?glopzi-edit=1 appended to the URL, which tells our runtime to expose extra hooks the editor uses (selection overlays, marker handles, postMessage updates). Visitors never see this mode.

Because the canvas is your real site, your responsive design, custom fonts, third-party scripts, builder quirks, and layout edges are all visible while you design. This is on purpose: motion that looks great against fake content often looks wrong against real content.

The editor has two modes for what happens when you click in the canvas. Toggle between them in the toolbar.

• Edit mode(default). Clicking in the canvas selects an element. Hovering shows a highlight outline. Internal links inside the page are intercepted so they don’t navigate away by accident.
• Browse mode. Clicking behaves normally. Links navigate, buttons open menus, forms submit. Use this when you need to walk through a flow on your site (a wizard, a multi-step form) to reach the page you want to animate.

Switch back to edit mode when you arrive at the destination page. The URL bar in the toolbar always reflects the page you’re currently looking at.

Every change you make in the right panel reflects in the canvas immediately. Move a slider, drag a checkpoint, change an easing curve: the animation re-renders without a page reload. There’s no “preview” round-trip.

For scroll animations, the canvas’s real scroll position drives the timeline playhead. Scroll the canvas to the checkpoint range and watch the motion play out as a visitor would experience it.

For time animations, the timeline below the canvas exposes play/pause and a draggable playhead so you can scrub through the motion at your own pace. See The timeline.

When an animation is selected in the sidebar, the element it targets gets a green outline in the canvas. The outline tracks the element’s real position as it animates, so you can confirm Glopzi is animating what you think it is.

The outline shape adapts to what kind of element it is:

• Text: thin underline-style accent.
• Buttons and links: rounded outline matching the element’s border-radius.
• Images and media: square corners with corner brackets.
• Containers: plain rectangle.

If the outline isn’t where you expect, the picker probably grabbed a different element than you intended. Re-pick or fall back to the picker’s Alt-bypass.

The two are different and easy to confuse:

• Previewopens your current editor state in a clean tab without editor chrome. It includes unsaved changes. Visitors don’t see preview content.
• Save pushes your current state to the CDN so your real visitors see it. See Saving and publishing.

• Picking an element covers what happens when you click in edit mode.
• The timeline explains the playhead, zoom, and per-property rows.
• Saving and publishing covers what actually goes live, and when.