|
| 1 | +--- |
| 2 | +title: Render Modes |
| 3 | +description: > |
| 4 | + Control rendering fidelity and performance in Kanvas with four render modes and an intelligent Adaptive mode that automatically optimizes the experience. |
| 5 | +weight: 3 |
| 6 | +categories: [Designer, Operator] |
| 7 | +tags: [performance, rendering] |
| 8 | +--- |
| 9 | + |
| 10 | +Kanvas supports multiple render modes that control the level of visual detail and interactivity on the canvas. Higher-fidelity modes show more detail but require more processing power, while lower-fidelity modes strip visual elements for better performance on large designs. |
| 11 | + |
| 12 | +The Adaptive mode acts like an automatic transmission -- it monitors render performance in real time and seamlessly shifts between modes to maintain smooth interactivity. |
| 13 | + |
| 14 | +## Render Modes |
| 15 | + |
| 16 | +Kanvas provides four render modes, each offering a different balance of visual fidelity and performance: |
| 17 | + |
| 18 | +| Mode | Fidelity | Description | |
| 19 | +|------|----------|-------------| |
| 20 | +| Full | Highest | Complete rendering with all details, badges, TagSets, animations | |
| 21 | +| Medium (Style-Only) | High | Full component styles but no badges, TagSets, or animations | |
| 22 | +| Wireframe | Low | Simple outlines and straight-line connections, no SVGs or styling | |
| 23 | +| View Only | Lowest | Static wireframe snapshot with no interactivity | |
| 24 | + |
| 25 | +### Full Mode |
| 26 | + |
| 27 | +Full mode renders every visual element in your design: |
| 28 | + |
| 29 | +- **SVG backgrounds** and gradient fills on all components |
| 30 | +- **All badges** -- compound node, label, external link, expand/collapse, managed-by-Meshery, terminal session, and error badges |
| 31 | +- **TagSets** (BubbleSets) showing visual groupings of related components |
| 32 | +- **Mount animations** when components appear on the canvas |
| 33 | +- **Edge styling** with bezier curves and colored arrows |
| 34 | + |
| 35 | +Full mode is best for reviewing final visuals, detailed inspection, and pixel-perfect output. It uses the most resources and may impact performance on large or complex designs. |
| 36 | + |
| 37 | +### Medium Mode (Style-Only) |
| 38 | + |
| 39 | +Medium mode preserves component appearance while stripping decorative overlays: |
| 40 | + |
| 41 | +- **Kept:** Component SVG backgrounds, node shapes, and edge styling |
| 42 | +- **Kept:** Expand/collapse badges (essential for navigating compound nodes) and error badges |
| 43 | +- **Stripped:** Decorative badges (compound node, label, external link, managed-by-Meshery, terminal session) |
| 44 | +- **Stripped:** TagSets, mount animations, and gradient fills |
| 45 | + |
| 46 | +Medium mode is ideal for everyday editing where you want to see component detail without visual clutter. It is significantly lighter than Full mode. |
| 47 | + |
| 48 | +### Wireframe Mode |
| 49 | + |
| 50 | +Wireframe mode reduces the canvas to basic structural outlines: |
| 51 | + |
| 52 | +- **No SVG background images** on any components |
| 53 | +- **Edges rendered as straight gray lines** -- no bezier curves or colored arrows |
| 54 | +- **All badges stripped** |
| 55 | +- **All TagSets disabled** |
| 56 | +- **Layout animations disabled** |
| 57 | + |
| 58 | +Wireframe mode is best for quick layout work, performance-critical scenarios, and focusing purely on design structure. It is very lightweight and handles large designs well. |
| 59 | + |
| 60 | +### View Only Mode |
| 61 | + |
| 62 | +View Only mode extends Wireframe rendering with complete removal of interactivity: |
| 63 | + |
| 64 | +- Same visual rendering as Wireframe mode |
| 65 | +- **All nodes locked** -- cannot be moved or resized |
| 66 | +- **All event handlers removed** -- no click, hover, grab, drag, resize, or double-click responses |
| 67 | + |
| 68 | +View Only mode is best for embedding designs, sharing read-only views, and generating static documentation screenshots. It uses minimal resources. |
| 69 | + |
| 70 | +{{< alert type="info" >}} |
| 71 | +In View Only mode, users cannot interact with the canvas at all. Switch to another mode to resume editing. |
| 72 | +{{< /alert >}} |
| 73 | + |
| 74 | +## Switching Render Modes |
| 75 | + |
| 76 | +### Using the Layers Panel |
| 77 | + |
| 78 | +The **Render Mode Switcher** is located in the Layers panel in the left sidebar. To change modes: |
| 79 | + |
| 80 | +1. Click the current mode icon in the Layers panel to open the mode selector. |
| 81 | +2. Select the desired mode from the dropdown menu. |
| 82 | +3. The canvas updates immediately. |
| 83 | + |
| 84 | +### Using URL Parameters |
| 85 | + |
| 86 | +You can also set the render mode via URL query parameter. Append the `render` parameter to your Kanvas design URL: |
| 87 | + |
| 88 | +- `render=full` -- Full rendering with all details |
| 89 | +- `render=medium` -- Style-only rendering without badges and TagSets |
| 90 | +- `render=wireframe` -- Outline-only rendering |
| 91 | +- `render=viewOnly` -- Non-interactive wireframe snapshot |
| 92 | + |
| 93 | +For example: `https://kanvas.new/extension/meshmap?render=wireframe&mode=design&design=xxxx` |
| 94 | + |
| 95 | +For more details on URL parameters, see [Design Render Quality](/kanvas/advanced/url-parameters/). |
| 96 | + |
| 97 | +## Adaptive Mode |
| 98 | + |
| 99 | +Adaptive mode automatically adjusts the render mode based on real-time performance measurements. When enabled, Kanvas monitors canvas responsiveness and shifts between modes to maintain smooth interactivity -- downshifting when performance degrades and upshifting when it recovers. |
| 100 | + |
| 101 | +### How It Works |
| 102 | + |
| 103 | +Adaptive mode monitors two performance metrics in real time: |
| 104 | + |
| 105 | +- **Render latency** -- the time to complete a render cycle (measured at the p95 percentile) |
| 106 | +- **Interaction latency** -- the time from user input (pan, zoom) to visual response (measured at the p95 percentile) |
| 107 | + |
| 108 | +Performance is tracked using a rolling window of the last 20 samples. When the p95 render latency exceeds 150ms or the p95 interaction latency exceeds 80ms, the mode automatically downshifts (for example, Full to Medium, or Medium to Wireframe). When performance recovers -- render latency drops below 60ms and interaction latency drops below 30ms for 10 consecutive samples -- the mode upshifts. |
| 109 | + |
| 110 | +### Hysteresis (Preventing Flicker) |
| 111 | + |
| 112 | +Adaptive mode uses asymmetric thresholds to prevent rapid mode switching: |
| 113 | + |
| 114 | +- **Downshifting happens quickly** -- with a 3-second cooldown between shifts. Users notice lag immediately, so the system responds fast. |
| 115 | +- **Upshifting is cautious** -- requiring 10 consecutive good samples before shifting up. This prevents the mode from flickering back and forth at the boundary. |
| 116 | + |
| 117 | +The result is fast response to performance problems and careful, stable recovery. |
| 118 | + |
| 119 | +### Ceiling Mode |
| 120 | + |
| 121 | +When you enable Adaptive mode, your currently selected render mode becomes the **ceiling** -- the highest fidelity that Adaptive will use. Adaptive mode will never upshift above your ceiling. |
| 122 | + |
| 123 | +For example, if you set the ceiling to Medium, Adaptive will shift between Medium and Wireframe as needed but will never go to Full mode. This is useful when you know you do not need badges or tagsets and want to prevent unnecessary rendering overhead. |
| 124 | + |
| 125 | +### Enabling Adaptive Mode |
| 126 | + |
| 127 | +To enable Adaptive mode: |
| 128 | + |
| 129 | +1. Open the **Render Mode Switcher** in the Layers panel. |
| 130 | +2. Toggle the **Adaptive** switch. |
| 131 | +3. When active, an "AUTO" indicator appears next to the current mode. |
| 132 | + |
| 133 | +Manual mode selections while Adaptive is active set the new ceiling. For example, switching from Full to Medium while Adaptive is on means Adaptive will now treat Medium as the highest mode it can use. |
| 134 | + |
| 135 | +You can also enable Adaptive mode via URL parameter: `?adaptive=true` |
| 136 | + |
| 137 | +For example: `https://kanvas.new/extension/meshmap?adaptive=true&mode=design&design=xxxx` |
| 138 | + |
| 139 | +{{< alert type="note" >}} |
| 140 | +Adaptive mode is event-driven -- it only samples performance when you interact with the canvas (pan, zoom, edit). There is zero overhead when the canvas is idle. |
| 141 | +{{< /alert >}} |
| 142 | + |
| 143 | +## Performance Guidance |
| 144 | + |
| 145 | +When Adaptive mode downshifts, Kanvas may display suggestions to help you optimize your design. These appear as toast notifications with actionable recommendations: |
| 146 | + |
| 147 | +- **"N tagsets detected"** -- Large numbers of TagSets (BubbleSets) are computationally expensive. Consider disabling some via the Layers panel. |
| 148 | +- **"N parent nodes detected"** -- Deeply nested compound nodes increase render complexity. Collapsing some parent nodes may help. |
| 149 | +- **"N components visible"** -- High-density designs benefit from layer filtering to hide components you are not currently working with. |
| 150 | +- **"N relationships"** -- Designs with many relationships render faster in Wireframe mode. |
| 151 | + |
| 152 | +Each suggestion is shown at most once per minute to avoid notification fatigue. |
| 153 | + |
| 154 | +## Best Practices |
| 155 | + |
| 156 | +1. **Start with Adaptive mode** for everyday work -- it handles performance automatically and keeps the canvas responsive. |
| 157 | +2. **Use Full mode selectively** -- reserve it for final visual review or documentation screenshots. |
| 158 | +3. **Switch to Wireframe for layout work** -- it is the fastest mode for rearranging large designs. |
| 159 | +4. **Use View Only for sharing** -- when embedding designs or sharing read-only snapshots where editing should be prevented. |
| 160 | +5. **Set an appropriate ceiling** -- if you do not need badges or tagsets, set the ceiling to Medium to avoid unnecessary rendering overhead. |
| 161 | +6. **Break large designs into smaller ones** -- designs beyond 500 components benefit from being split regardless of render mode. See [Performance Limits and Tuning](/kanvas/advanced/performance/) for more guidance. |
| 162 | + |
| 163 | +## Known Limitations |
| 164 | + |
| 165 | +- Render mode applies globally to the entire canvas -- you cannot set different modes for different areas of a design. |
| 166 | +- View Only mode strips all interactivity. You must switch to another mode to resume editing. |
| 167 | +- Adaptive mode thresholds are fixed and cannot be customized per-user or per-design. |
| 168 | +- Mode transitions may cause a brief visual flash as styles update across all elements. |
| 169 | +- The performance guidance system analyzes design structure, not actual GPU or CPU load -- suggestions are heuristic-based. |
| 170 | + |
| 171 | +## Render Modes in Designer vs Operator |
| 172 | + |
| 173 | +All four render modes work in both Designer and Operator contexts: |
| 174 | + |
| 175 | +- In **Designer mode**, render modes control the fidelity of your editable design canvas. All modes except View Only allow full editing. |
| 176 | +- In **Operator mode**, the `managed-by-Meshery` and `terminal session` badges follow the same suppression rules as in Designer -- they are visible in Full mode and hidden in Medium, Wireframe, and View Only modes. |
| 177 | +- **View Only mode is particularly useful in Operator** for monitoring dashboards where accidental edits should be prevented. |
0 commit comments