Editor Guide
The Purl editor is designed for rapid visual creation. This guide covers panels, tools, and workflows.
Views
Map View
The map view shows all cells in your project laid out spatially.
- Pan - Drag on empty space
- Zoom - Scroll wheel
- Select cell - Click on a cell
- Enter cell - Double-click to switch to Cell View
- Create cell - Click "Add Cell" button or right-click for context menu
- Delete cell - Select and press Delete/Backspace
- Rearrange - Drag cells to organize spatially
Cell View
The cell view is where you design individual screens.
Canvas (center)
- Shows the cell's background and all objects
- Drag to move objects, resize handles to scale
- Marquee select by dragging from empty space
Toolbar (top)
- Add objects: Shape, Text, Line, Grid
- Toggle grid, snap settings
- Play/Build mode switch
Right Panel
- Structure tab: Tree view of objects and layers
- Properties tab: Edit selected object's properties
Panels
Structure Panel
Shows all objects in the current cell organized by layers:
- Layers - Containers for organizing objects
- Objects - Listed by name with type icons
- Components - Expandable to show children
Actions:
- Click to select
- Drag to reorder or move between layers
- Right-click for context menu
- Eye icon toggles visibility in build mode
- Lock icon prevents selection/editing
Properties Panel
Edit the selected object's properties:
- Position & Size - X, Y, Width, Height
- Fill - Color, gradient, image, pattern, noise (stackable layers)
- Stroke - Color, width, style
- Text - Content, font, size, color, alignment
- Corners - Border radius for shapes
- Shadow - Offset, blur, spread, color
- Scripts - Open script editor
States - Define named property presets that can be applied via scripts.
Script Editor
Write scripts for object or cell events. See Scripting for syntax.
- Syntax highlighting
- Auto-complete suggestions (Tab to accept)
- Right-click for syntax browser
- Error indicators
Layers
Layers organize objects in the Structure panel.
- Create - Click + button or right-click → "New Layer"
- Rename - Double-click layer name
- Reorder - Drag layers up/down
- Visibility - Eye icon hides layer in build mode
- Lock - Lock icon prevents selecting/editing objects
Objects render in layer order first, then z-order within layers.
Transform
Moving
- Drag selected objects
- Arrow keys for micro-movement
- Shift+drag constrains to horizontal/vertical
Resizing
- Drag corner/edge handles
- Shift+drag maintains aspect ratio
- Alt+drag resizes from center
Snapping
- Grid snap - Objects snap to grid when visible
- Edge snap - Objects snap to other object edges
- Contact snap - Shift+drag snaps shapes to touch
Fill Layers
Shapes support multiple stacked fill layers:
- Color - Solid color
- Gradient - Linear or radial
- Image - Fill, fit, stretch, tile, or center
- Pattern - Dots, grid, lines, diagonal, cross
- Noise - Procedural noise texture
Each layer has:
- Opacity slider
- Blend mode (normal, multiply, screen, overlay, etc.)
- Reorder buttons (move up/down)
Copy & Paste
| Action | Shortcut |
|---|---|
| Copy | Cmd/Ctrl+C |
| Paste | Cmd/Ctrl+V |
| Duplicate | Cmd/Ctrl+D |
| Paste Style | Cmd/Ctrl+Shift+V |
Paste Style copies visual properties (fill, stroke, text style) without position/size.
Tips
- Quick test - Press Space to enter Play mode
- Console - Cmd/Ctrl+` to toggle debug console
- Reset view - Double-click zoom controls to reset
- Precise positioning - Use Properties panel for exact values
- Batch operations - Select multiple objects to edit shared properties
See Shortcuts for complete keyboard reference.