Designing Stunning Displays with the Canvas Editor

The Showcel Canvas Editor is a full-featured design tool built right into your browser. Think of it as a simplified Figma specifically designed for screen layouts. Here's how to make the most of it.

Getting started: Open any screen and click "Open Editor." You'll see a workspace that matches your screen's resolution and orientation. The toolbar on the left offers element types: Text, Image, Video, and Widget.

Adding elements. Click any tool, then click on the canvas to place it. Drag the handles to resize. Use the properties panel on the right to fine-tune position, size, colors, and content.

The Layer system. Every element sits on a layer, just like in Photoshop. The Layers panel shows your element stack. Drag layers to reorder. Use "Bring to front" and "Send to back" for quick positioning.

Magnetic snapping. As you drag elements near each other or near the canvas edges, they'll snap to alignment guides. This makes pixel-perfect layouts easy without manual coordinate entry.

Text tips. Use large, bold fonts for content meant to be read from a distance. A good rule: for every meter of viewing distance, text should be at least 2.5cm tall on screen. Stick to 2–3 fonts maximum.

Image best practices. Use high-resolution images (at least 1920x1080 for full-screen backgrounds). The editor supports "Cover" and "Contain" fit modes — Cover fills the area and crops, Contain shows the full image with possible letterboxing.

Save often! The editor auto-saves, but you can also hit the Save button. Changes sync to your live screen within 30 seconds. Use the Web Player button to preview exactly how it looks on a real device.