Keyboard shortcuts

Ctrl / Cmd means Ctrl on Windows and Linux and Cmd on a Mac. Outside the code editor, Appsanic accepts either key on any computer.

Editor shortcuts wait while you type in a field, and while a dialog or menu is open, so keys like Delete and Ctrl / Cmd + Z act on your text instead. While Preview runs your app, Escape is the only editor key: it takes you back to Design or Code.

Choose Keyboard shortcuts in the top bar for a short list inside the editor.

Ctrl / Cmd+Z

Undo the last change.

Ctrl / Cmd+Shift+Z

Redo the change you undid.

Ctrl / Cmd+Y

Redo, too.

Ctrl / Cmd+D

Duplicate the selection.

Ctrl / Cmd+G

Group the selected components.

Ctrl / Cmd+Shift+G

Ungroup the selected group.

Ctrl / Cmd+A

Select every visible top-level component on the page.

Delete

Delete the selection. Backspace does the same.

Escape

Clear the selection.

Shift+G

Show or hide the 8 px canvas grid, which also snaps resizing.

Tab

Move between components on the canvas, in page order. Shift + Tab goes back.

Enter

Select the focused component. On a selected group, Enter selects the components inside it.

Shift+Enter

Add the focused component to the selection, or take it out. Ctrl / Cmd + Enter does the same.

Escape

While you drag, cancel an area selection, a pan or a resize.

On the toolbar above a selected component, Left and Right move between its buttons, Home and End jump to the first and last, and Escape returns you to the component.

Resize with the keyboard

Tab to a resize handle on the selected component, then use the arrow keys: Left and Right change the width, Up and Down the height. How far each press goes depends on the canvas grid.

With a mouse, Shift, Ctrl or Cmd + click adds a component to the selection or takes it out. Drag across empty canvas to select an area, holding Shift, Ctrl or Cmd to add to the selection. Drag with the middle mouse button to pan, and hold Alt while dragging a resize handle to ignore the grid. Zoom has no shortcut: use Zoom in, Zoom out and Fit to viewport below the canvas.

F2

Edit the focused text, button label or badge on the canvas. Double-click does the same.

Enter

Save the text.

Shift+Enter

Start a new line.

Escape

Cancel the edit. Clicking elsewhere saves it.

Fields in the Inspector and App settings

Enter

Apply the value and leave the field.

Ctrl / Cmd+Enter

Apply a field that takes several lines.

Escape

In the Inspector, put the field back to its saved value.

In App settings, Escape closes the dialog and applies your valid edits; an edit it cannot accept keeps the dialog open on that field. Escape also clears a search, such as Find a setting… in the Inspector.

To move a component without the mouse, focus its layer in Layers or the component on the canvas, and pick it up. The same keys place a new component from Insert.

Space

Pick up the focused layer, canvas component or component in Insert.

Up

Choose the previous insertion point.

Down

Choose the next insertion point.

Right

Place it inside the container, or on the canvas.

Left

Place it before the layer.

Enter

Drop it at the chosen point. Space drops it too.

Escape

Cancel the move.

Without picking anything up, Enter selects the focused layer, and Enter on a component in Insert adds it to your page. Escape clears Find a layer… and Search components….

In Pages

Enter

Open the focused page on the canvas.

F2

Open its Page settings. Double-click does the same.

Alt+Up

Move the page earlier in the list.

Alt+Down

Move the page later.

Ctrl / Cmd+S

Apply your changes and check them now, without waiting for the pause after typing.

Ctrl+Space

Show completions.

Ctrl / Cmd+F

Find and replace in the open file. Enter finds the next match, Shift + Enter the previous one, and Escape closes the search.

F12

Go to a definition, when one is available.

Alt+Z

Turn word wrap on or off.

Ctrl / Cmd+Plus

Zoom the code in. Ctrl / Cmd + Minus zooms out, and Ctrl / Cmd + 0 resets it.

Ctrl / Cmd+Z

Undo your typing in the file.

Ctrl / Cmd+/

Comment or uncomment the line.

Alt+Up

Move the line up. Alt + Down moves it down.

Ctrl / Cmd+Shift+K

Delete the line.

Tab indents and Shift + Tab outdents. To move focus out of the editor, press Escape and then Tab. With focus on the open files above the editor, Left and Right switch between them; Escape in the file explorer hides it.

Ctrl / Cmd+K

Open or close Sanic AI. It works from Design and Code, but not while you type in another field or the code editor.

Enter

Send your message. While a request runs, Enter queues it as a follow-up.

Shift+Enter

Start a new line.

Ctrl / Cmd+Enter

While a request runs, Steer now: stop the current request and continue with your message. Checked changes stay.

Escape

Close the Sanic AI panel.

Shift+F10

Open the right-click menu for the focused component, layer or page, when Right-click menu is on in App settings. The Menu key does the same.

Arrow keys

Move through a menu, a list or a row of tabs, such as Inspector, Actions and Motion, your open files, or Problems and Console.

Home

Jump to the first item or tab. End jumps to the last. In a menu, typing a letter jumps to an item that starts with it.

Escape

Close a menu or dialog and return to where you were. On a compact window, it also closes an open panel.

Ctrl / Cmd+K

On your dashboard, jump to Search projects and pages…. Up and Down move through the results, Enter opens one and Escape closes the list.

To resize a panel, focus its edge: Left and Right change its width in 8 px steps (32 px with Shift), Home and End set its smallest and largest width, and a double-click resets it. The divider between code and preview moves in 2% steps (10% with Shift).