Grid & Rulers
Enable grid overlay and rulers for precise element alignment and measurement.
Grid Overlay
The grid overlay displays a visual grid on the canvas to help you align and position elements consistently. It's a design aid — the grid does not appear in the generated PDF.
Enabling the Grid
- Click the Canvas Settings icon in the toolbar (gear icon)
- Toggle Show Grid to on
- The grid appears as light dotted lines across the canvas
Grid Spacing
Configure the distance between grid lines:
- 4px — Fine grid for detailed positioning
- 8px — Default, balanced for most templates
- 16px — Coarse grid for quick layout
- Custom — Set any value that matches your design system
Design System Alignment
If your company uses an 8px grid system, set grid spacing to 8px so your PDF templates align with your broader design language.Rulers
Rulers display along the top and left edges of the canvas, showing pixel measurements. They help you understand exact positions and dimensions at a glance.
Enabling Rulers
- Open Canvas Settings
- Toggle Show Rulers to on
- Horizontal and vertical rulers appear along the canvas edges
Ruler Features
- Tick marks — Pixel measurements from the top-left origin
- Cursor indicator — A moving line on the ruler tracks your cursor position
- Element highlight — When an element is selected, the ruler highlights its position and width/height
Measurement Units
The editor uses pixels as the primary unit. For reference when designing for print:
| Print Size | Pixels (72 DPI) | Pixels (96 DPI) |
|---|---|---|
| 1 inch | 72px | 96px |
| 1 cm | 28px | 38px |
| 1 mm | 2.8px | 3.8px |
Document Stack PDFs use 72 DPI by default. So 1 inch = 72 pixels in the editor. An A4 page is 595 × 842 pixels.
Combining Grid, Rulers, and Snapping
For maximum precision, use all three tools together:
- Grid — Visual reference for consistent spacing
- Rulers — Exact pixel measurements
- Snapping — Automatic alignment as you drag
This combination makes it easy to create professionally aligned layouts without manually entering X/Y coordinates for every element.
Next Steps
- Snapping & Guides — Smart alignment
- Positioning & Alignment — Exact coordinates
- Page Settings — Page dimensions and margins