Editor Guide

Editor Layout

The editor is divided into four main areas:

Working with Elements

Adding Elements

• Text: Click the T button and click on the canvas to add text.
• Image: Click the Image button and click on the canvas to add a photo.
• Lines: Use the Lines tool for straight dividers and line styles. Shapes: Click Shapes for rectangles, circles, and polygons.
• Barcode: Click the Barcode button to add a barcode. You can link it to data fields.
• QR Code: Click the QR Code button to add a QR code. Link it to text or URLs.
• Signature: Click the Signature button to add a signature zone, then upload a signature image in Properties.
• Webcam: Click the Webcam button to capture a photo from your device's camera.

Selecting Elements

• Click on any element to select it. A blue border with handles will appear.
• The right panel will show properties for that element.
• Hold Shift and click to select multiple elements.
• Click the background (empty space) to deselect all elements.

Moving & Resizing

• Drag: Click and drag an element to move it.
• Resize: Click and drag the corner handles to resize. Hold Shift while dragging to maintain proportions.
• Precise positioning: Use the X and Y fields in the right panel to set exact coordinates.
• Snap to grid: Use the Grid and Snap buttons on the canvas bottom bar (right side).

Rotating Elements

• Select an element and look for the rotation handle (circular arrow at the top).
• Click and drag the rotation handle to rotate the element.
• Hold Shift while rotating to snap to 15-degree increments.
• Or use the Rotation field in the right panel to type an exact angle (0-360).

Locking Elements

• Select an element and toggle the Lock button in the right panel.
• Locked elements cannot be moved, resized, or deleted. They'll show a lock icon in the layer panel.
• Use this to protect elements that shouldn't be accidentally changed.

Text Formatting

Select a text element to see these formatting options in the right panel:

• Font: Choose from 20+ professional fonts (Roboto, Poppins, Playfair Display, Oswald, etc.).
• Size: Adjust text size in pixels or use the slider.
• Color: Click the color box to pick a color. Use the color palette for quick access.
• Bold/Italic/Underline: Click the style buttons to apply formatting.
• Alignment: Choose left, center, or right alignment.
• Vertical Align: Position text at the top, middle, or bottom of the text box.
• Line Height: Adjust spacing between lines.
• Letter Spacing: Adjust spacing between characters.
• Text Direction: Set left-to-right, right-to-left, or auto for different languages.

Colors & Gradients

Using the Color Palette

• Click on any color field (text color, fill, stroke) to open the color picker.
• Use the color palette to choose a preset color.
• Click + to save frequently used colors to your palette.
• Your saved colors will appear in the "Recent" and "Saved" sections.

Adding Gradients

• Select a shape and open the right panel.
• In the fill section, click the gradient button to enable gradients.
• Choose between Linear or Radial gradients.
• Click color stops to adjust the gradient colors and positions.
• Use the angle slider for linear gradients to change the direction.

Undo & Redo

• Undo: Click the undo button in the top toolbar or press Ctrl+Z (Windows) / Cmd+Z (Mac).
• Redo: Click the redo button in the top toolbar or press Ctrl+Y (Windows) / Cmd+Y (Mac).
• You can undo and redo as many times as you need. The undo history is cleared when you close the editor.

Copy, Paste & Duplicate

• Copy: Select an element and press Ctrl+C or click Copy in the context menu.
• Paste: Press Ctrl+V to paste. The element will be pasted at the center of the canvas.
• Duplicate: Select an element and press Ctrl+D to create an exact copy slightly offset.
• You can copy and paste elements between different badge designs by opening multiple tabs.

Layers & Ordering

The layer panel (right side, "Layers" tab) shows all elements on your badge:

• Reorder layers: Drag layers up or down to change which elements appear on top.
• Hide layers: Click the eye icon to hide a layer without deleting it.
• Lock layers: Click the lock icon to prevent accidental edits.
• Click layer names: Click on a layer name to select that element on the canvas.
• Rename layers: Double-click a layer name to rename it for better organization.

View & Grid Settings

Use the View menu to control editor settings:

• Zoom: Use the zoom slider to zoom in/out. Or use Ctrl + mouse wheel.
• Grid: Toggle the grid overlay to help align elements.
• Grid Size: Change the grid spacing (10px, 20px, etc.).
• Snap to Grid: Enable snapping to make elements align perfectly to the grid.
• Ruler: Toggle rulers on/off to see measurements in pixels.

Keyboard Shortcuts

Speed up your workflow with these shortcuts: