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.
ShortcutCSS Property AppliedDescription
w+twidth: fit-content;Makes the element’s width fit its content.
w+fwidth: 100%;Makes the element take the full width of its parent.
h+theight: fit-content;Makes the element’s height fit its content.
h+fheight: 100%;Makes the element take the full height of its parent.

​
2. Margin & Padding Shortcuts

Apply consistent spacing to your elements. The number in the shortcut corresponds to the rem value.
ShortcutCSS Property Applied
m+amargin: auto;
p+5padding: 5rem;
m+10margin: 10rem;
etc…(works for various numbers)

​
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.
ShortcutCSS Property AppliedDescription
f+xdisplay: flex;The foundation for all flex layouts.
f+rflex-direction: row;Arranges items horizontally.
f+cflex-direction: column;Arranges items vertically.
j+cjustify-content: center;Centers items along the main axis.
i+calign-items: center;Centers items along the cross axis.
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.