How to Use Keyboard Shortcuts in the App Editor and Player
  • 17 Sep 2022
  • 3 Minutes to read
  • Contributors

How to Use Keyboard Shortcuts in the App Editor and Player


Article summary

Overview

A list of available keyboard shortcuts available in Tulip's App Editor and Player.

In order to make editing apps more efficient, there are a number of different keyboard shortcuts you can use.

You can see all available keyboard shortcuts by clicking the "..." in the top right of the App Editor.

Or, you can press ? to instantly show the shortcuts menu.

App Editor

Adding Elements

Use these shortcuts to quickly add these elements:

  • Add Text: T
  • Add Image: I
  • Add Button: B
  • Add Variable: V
  • Add Step: Enter
  • Duplicate Step: ⌘D

Objects

  • Cut an Object: ⌘X
  • Copy an Object: ⌘C
  • Paste an Object: ⌘V
  • Push Object: Arrow Keys
  • Nudge Object: ⇧Arrow Keys
  • Bring Forwards: ⌘F
  • Send Backwards: ⌘B
  • Bring To Front: ⇧⌘F
  • Send To Back: ⇧⌘B
  • Delete Object: Delete/Backspace
  • Select All: ⌘A

Trigger Modal

  • Save and close: ⌘Enter

Navigation (Mac Devices)

Note: For Windows devices, use Control in place ⌘ and Alt in place of ⌥.

  • Next Step: ↓ (with no objects selected)
  • Previous Step: ↑ (with no objects selected)
  • Swap Step Up: ⌘↑
  • Swap Step Down: ⌘↓
  • Edit Step Name: ⌘Enter
  • Delete Step: ⌘Backspace
  • Base Layout: ⌥⌘M
  • Pan Mode: Space (hold)
  • Zoom In/Out: ⌥⌘Scroll
  • Reset View: ⇧⌘Z
  • Show Keyboard Shortcuts: ?

Widget shortcuts:

These shortcuts apply when you have a Widget selected in the Tulip App Editor:

  • Arrow keys to move the selected widgets by a single pixel
  • Shift+Arrow keys to move the selected widgets by 5 pixels
  • Delete to delete the selected widgets
  • Control+A to select all widgets
  • Control+x/c/v to cut / copy / paste the selected widgets
  • Control+shift+f to move the selected widgets to the front
  • Control+shift+b to move the selected widgets to the back
  • Control+f to move the selected widgets forward by one layer
  • Control+b to move the selected widgets back by one layer
  • Shift+click to add/remove widgets to the current selection.
  • Shift+drag to move the selected widgets only up, down, left, or right.

Step shortcuts:

These shortcuts apply when you have a Step selected in the Tulip App Editor:

  • Enter to add a new step
  • Control+enter to edit the step name
  • Control+delete to delete the step
  • Control + D to duplicate the step
  • Control+up/down arrow to move the step up or down in the Steps List
  • Alt + control + M to instantly move to the Base Layout
  • Hold space to enable pan mode
  • Control + alt + scroll to zoom in and out (CMD + Option + Scroll on Mac)
  • Shift + control + z to reset the view

Universal shortcuts:

These shortcuts don’t change based on the selection context:

  • Control+z to undo when the “Undo” popup is open at the top of the screen.

Note: These shortcuts are for a Windows machine. To use them on a Mac, use Command instead of control and you have the added advantage of using emoticons in your text by using Command+Control+Space Bar.

Tulip Player

Form Step

This shortcut applies when you have opened a Form Step in the App Editor.

  • Tab key to automatically select the next field on the Form Step without touching a mouse or a screen

Was this article helpful?