The Properties Panel on the right side of the screen shows all editable properties for the currently selected element(s). The panel contents change dynamically based on what you have selected.
Common Properties
These properties appear for most element types:
Position
Control where the element is placed on the canvas:
- X - Horizontal position from the left edge
- Y - Vertical position from the top edge
Size
Control the element's dimensions:
- W (Width) - Horizontal size
- H (Height) - Vertical size
- Lock ratio - Click to constrain proportions
Rotation
Rotate the element in degrees (0-360). You can also type negative values or values over 360.
Fill Properties
Fill Color
Click the color swatch to open the advanced color picker:
- Color modes - RGB, HSL, HSB
- Hex input - Enter exact color codes
- Opacity slider - 0-100% transparency
- Color presets - 64 preset colors for quick selection
- Eyedropper - Sample colors from canvas
Gradients
Apply gradient fills with multiple color stops:
- Linear - Colors blend in a straight line
- Radial - Colors blend from center outward
- Angular - Colors blend around a center point
Stroke Properties
Stroke
Configure the element's border/outline:
- Color - Stroke color (uses same color picker)
- Width - Stroke thickness (0-100px)
- Position - Inside, center, or outside the shape
Stroke Style
When stroke width > 0, additional options appear:
- Cap - Butt, Round, or Square line endings
- Join - Miter, Round, or Bevel corners
- Dashed - Enable dashed/dotted lines
- Dash pattern - Customize dash and gap lengths
Effects
Drop Shadow
Add a shadow behind the element:
- Color - Shadow color (usually dark with opacity)
- X/Y Offset - Shadow position relative to element
- Blur - Softness of shadow edges
- Spread - Expand or contract shadow size
Corner Radius
For rectangles, round the corners:
- All corners - Single value for all corners
- Individual corners - Click expand to set each corner separately
- Corner smoothing - iOS-style "squircle" effect (0-100%)
Element-Specific Properties
Text Elements
- Content - Edit the text directly
- Font family - Choose from available fonts
- Font size - Text size in pixels
- Font weight - Regular, Medium, Bold, etc.
- Font style - Normal, Italic
- Line height - Space between lines
- Letter spacing - Space between characters
- Alignment - Left, Center, Right, Justify
- Text resize - Auto width, Auto height, Fixed
Image Elements
- Replace image - Swap with a different image
- Fit mode - Fill, Fit, Crop, Tile
- GIF frame - For animated GIFs, select display frame
Arc/Pie Elements
- Sweep angle - Arc length (0-360°)
- Start angle - Where the arc begins
- Inner radius - Create donut/ring shapes
- Closed - Pie mode vs open arc
Line Elements
- Arrow start - Arrowhead at line start
- Arrow end - Arrowhead at line end
Click and drag on number labels (X, Y, W, H, etc.) to "scrub" values - drag left to decrease, right to increase. Hold Shift for larger increments.
Multi-Selection
When multiple elements are selected:
- Common properties (like fill, stroke) are shown
- Mixed values show a dash (-) or "Mixed"
- Changes apply to all selected elements
- Position shows the bounding box of all selected elements
No Selection
When nothing is selected, the Properties Panel shows:
- "No selection" message
- Canvas background color option
- Grid and snap settings