Skip to main content
To help you design faster and more efficiently, the Saasio editor includes a powerful set of Style Shortcuts. These shortcuts allow you to apply common CSS properties directly to a selected element without ever needing to open the style panel. Mastering these shortcuts will dramatically speed up your workflow, especially when creating complex layouts.

​
How to Use a Style Shortcut

  1. Select an element on the canvas.
  2. Make sure you are not currently editing a text field.
  3. Simply type the shortcut key combination. The corresponding style will be applied instantly.

​
Most Useful Style Shortcuts

Here is a reference guide to the most common and useful shortcuts available.

​
1. Width & Height Shortcuts

Quickly set the dimensions of your elements.

​
2. Margin & Padding Shortcuts

Apply consistent spacing to your elements. The number in the shortcut corresponds to the rem value.

​
Flexbox Layout Shortcuts

Flexbox is the key to creating modern, responsive layouts. These shortcuts allow you to build complex flex containers in seconds.

​
1. Main Flexbox Setups

These are powerful “combo” shortcuts that apply a full set of common Flexbox properties at once.

f+x (Flex Row)

This shortcut creates a horizontal, wrapping container.CSS Applied:
  • display: flex;
  • flex-direction: row;
  • justify-content: space-between;
  • align-items: center;
  • flex-wrap: wrap;
  • gap: 1rem;

f+y (Flex Column)

This shortcut creates a vertical container.CSS Applied:
  • display: flex;
  • flex-direction: column;
  • justify-content: space-between;
  • align-items: center;
  • flex-wrap: nowrap;
  • gap: 1rem;

​
2. Flex Direction & Centering

Use these to quickly adjust the alignment and direction of items within a flex container.
Tip: To perfectly center items both horizontally and vertically, select your container and use three shortcuts in a row: f+x, j+c, and i+c.