Canvas & Viewports
Master the design canvas and responsive viewports. Learn how to create layouts that work perfectly across all devices and screen sizes.
Design Canvas
The canvas is your workspace where you design and arrange components. It provides visual feedback, alignment guides, and responsive preview capabilities.
Canvas Features
- • Visual component placement
- • Real-time preview
- • Grid alignment system
- • Component selection and editing
- • Drag and drop functionality
Canvas Controls
- • Zoom in/out controls
- • Fit to screen option
- • Grid toggle
- • Snap to grid
- • Component layers
Responsive Viewports
ForgeZap provides three viewport modes to help you design for different screen sizes. Each viewport shows how your application will look on different devices.
Desktop
1200px and above
- • Full desktop layout
- • Sidebar navigation
- • Multi-column layouts
- • Hover interactions
Tablet
768px - 1024px
- • Optimized for touch
- • Collapsible navigation
- • Responsive grids
- • Touch-friendly buttons
Mobile
Below 768px
- • Single column layout
- • Bottom navigation
- • Swipe gestures
- • Thumb-friendly design
Grid System
The grid system helps you create consistent, aligned layouts. It provides visual guides and automatic snapping for precise component placement.
Grid Features
Visual Grid
- • 20px default spacing
- • Toggle visibility on/off
- • Customizable grid size
- • Color-coded guides
Snap to Grid
- • Automatic alignment
- • Precise positioning
- • Consistent spacing
- • Professional layouts
Grid Best Practices
Zoom Controls
Zoom controls help you work with detailed layouts and see the big picture of your application.
Zoom In
Get closer to details
Zoom Out
See the full layout
Fit to Screen
Auto-adjust zoom
Component Positioning
Position Properties
Absolute Positioning
- • X/Y coordinates
- • Precise placement
- • Overlapping components
- • Z-index layering
Size Properties
- • Width and height
- • Minimum/maximum sizes
- • Responsive sizing
- • Aspect ratio
Alignment Tools
Keyboard Shortcuts
Viewport Controls
- Ctrl + 1 Desktop view
- Ctrl + 2 Tablet view
- Ctrl + 3 Mobile view
Canvas Controls
- Ctrl + + Zoom in
- Ctrl + - Zoom out
- Ctrl + 0 Reset zoom
- Ctrl + G Toggle grid