> ## Documentation Index > Fetch the complete documentation index at: https://docs.visualradioassist.live/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > Use the names from the glossary at https://docs.visualradioassist.live/glossary: Audio Manager (two words), command (never commando), on air and off air (never live) for programs and studios, and server apps for the VRA apps installed in the studio. > Say which app an answer applies to, like VRA Cloud, the Core or the Output Player, and the version when the page names one. > Only give settings, values and steps that are in these docs. Never invent one. If the docs don't cover it, say so. > When the docs don't answer the question, send the user to Visual Radio Assist support at https://cloud.visualradioassist.live/support. # Designer controls and shortcuts > Every control in the Visual Designer header and canvas toolbar, how rulers, guides and snapping work, and the full list of keyboard shortcuts. The [Visual Designer](https://docs.visualradioassist.live/visual-designer.md) has four sets of controls: the header, the floating canvas toolbar, the canvas aids and the keyboard shortcuts. Press Cmd or Ctrl + / in the Visual Designer to see every shortcut. ## Visual Designer header The header holds everything about the visual as a whole. | Control | What it does | | - | - | | **Back to visuals** | Returns to the visual list, or to the templates when you edit a template. | | Visual name | Click to rename the visual. A **Template** badge shows when you edit a template. | | **Saved** | When the visual was last saved. | | **Keyboard shortcuts** | Lists every shortcut. | | **Code editor** | Opens the CSS and JS of the visual. On a screen 1280 px or wider, **Pin Editor** keeps it open next to the canvas. | | **Animations** | Opens the animations timeline, see [Animations](https://docs.visualradioassist.live/visual-designer/animations.md). | | **More actions** | **Rename**, **Safe margins**, **Convert to template**, **Copy visual URL** and **Enter fullscreen**. | | **Save** | Saves the visual. Shows **Locked for edit** when the visual is [locked](https://docs.visualradioassist.live/lock-resources.md). | **Old animations** shows in the header for a visual made before the animations timeline. Click it to convert the animations, see [Convert old animations](https://docs.visualradioassist.live/visual-designer/animations.md#convert-old-animations). ## Canvas toolbar The floating toolbar on the canvas holds the tools: * **Select** and **Hand tool** to select layers or pan the canvas * **Add text**, **Add shape**, **Add image** and **All layers**, which opens the layer catalog * **Undo** and **Redo** * **Zoom to fit** and the zoom menu, with **Zoom in**, **Zoom out** and 50%, 100% and 200% * **Play** to preview the visual going on air, **Back to editing** to stop The zoom menu also holds the canvas aids and the **Backdrop**: a checkerboard, or a camera still from your studio, so you see the graphic over the real picture. ## Rulers, guides and snapping The canvas aids are in the zoom menu of the canvas toolbar. Your choices are kept in this browser. | Aid | What it does | Default | | - | - | - | | **Rulers** | Shows rulers along the canvas. Drag from a ruler to add a guide. | On | | **Grid** | Shows a 20 px grid. | Off | | **Snap to grid** | Snaps layers to the grid. | Off | | **Smart guides** | Snaps layers to other layers and shows alignment lines. Snapping to the canvas and to guides works without it. | On | | **Clear guides** | Removes every guide from the visual. | - | Drag a guide to move it. Drop it outside the canvas, or select it and press Delete, to remove it. Guides are kept per visual in this browser. Layers snap within 8 px. Hold Cmd or Ctrl while dragging to turn snapping off. **Safe margins** in **More actions** shows the safe areas, 5% and 3.5% in from the edges. ## Keyboard shortcuts Cmd on a Mac, Ctrl on Windows. | Shortcut | Action | | - | - | | V | Select | | H | Hand tool | | Hold Space | Hand tool while held | | Cmd or Ctrl + = | Zoom in | | Cmd or Ctrl + - | Zoom out | | Cmd or Ctrl + Shift + 1 | Zoom to fit | | Cmd or Ctrl + 0 | Zoom to 100% | | T | Add a text layer, with nothing selected | | Cmd or Ctrl + D | Duplicate layer | | Delete or Backspace | Delete layer | | Esc | Deselect | | Arrow keys | Nudge 1 px, with animations closed | | Shift + arrow keys | Nudge 10 px | | Cmd or Ctrl + S | Save | | Cmd or Ctrl + Z | Undo | | Cmd or Ctrl + Shift + Z | Redo | | Cmd or Ctrl + / | Keyboard shortcuts | | A | Open or close animations | | Tap Space | Play or stop the preview | | K | Pause the animation preview | | L | Play the animation preview forward | | Left and right arrow | Step one frame, with animations open and no bar selected | Hold Cmd or Ctrl and scroll, or pinch on a trackpad, to zoom. Scroll to pan. ## Code editor The code editor has two tabs, **JS** and **CSS**, for the whole visual. The animations timeline writes its animations into the JS tab, and supported hand-written animation code shows on the timeline. For writing your own code, see [Develop visual graphics](https://docs.visualradioassist.live/develop-with-vra/develop-visual-graphics.md). HTML and SVG layers have their own **Code Layer Editor** in the inspector. ## Related * [Design your first visual](https://docs.visualradioassist.live/getting-started/design-your-first-visual.md) * [Layer types](https://docs.visualradioassist.live/visual-designer/layers.md) * [Animations](https://docs.visualradioassist.live/visual-designer/animations.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.