Command Palette
The Command Palette is your all-in-one shortcut to every action in the Flowmo Designer. Instead of hunting through menus and sidebars, you press a single keyboard shortcut, type what you want, and execute it -- all without leaving the canvas. It combines fuzzy search, inline property editing, AI assistance, background removal, and text rewriting into one fluid interface.
Prerequisites
- A project open in the Flowmo Designer
- Familiarity with basic Keyboard Shortcuts
Opening and Closing the Command Palette
| Action | Mac | Windows |
|---|---|---|
| Open / close the palette | Cmd + Shift + Space | Ctrl + Shift + Space |
The palette spawns near your current selection. If you have an element selected, it positions itself next to the selection outline so you can see both the palette and your element. If nothing is selected, it centers on the screen.
Press Escape or use the same shortcut again to close it.
Tip: The palette is draggable. Grab its header area and move it anywhere on screen if it is blocking your view.
Search Mode (Default)
When the palette opens, you land in Search mode. A text input is focused and ready for you to type.
What You Can Search For
The palette searches across two categories simultaneously:
- CSS Properties -- every design property available in the right sidebar (opacity, border-radius, background, font-size, etc.). Properties are matched using friendly labels, so typing "fill" finds
background, typing "radius" findsborderRadius, and typing "tracking" findsletterSpacing. - Actions -- commands that do something immediately. These include tools, plugins, structural operations, alignment, CMS actions, and more.
When the search field is empty, the palette shows a curated set of suggested properties (Fill, Opacity, Radius, Width, Height, Font Size, Color) followed by all available actions.
Available Actions
Here is the full list of actions you can trigger from the palette, organized by category:
AI
- Ask AI -- opens the AI assistant inline within the palette. You can type a question or instruction directly in the search field before selecting this action, and your query carries over.
- AI Text Helper -- appears when a text element is selected. Opens an inline text rewriting interface with presets.
Image
- Remove Background -- appears when an image element is selected. Runs AI-powered background removal right inside the palette.
- Edit Image -- appears when an image element is selected. Copies the image to your clipboard and opens the image editor in a new tab.
Tools
- Move Tool, Hand Tool, Text Tool, Rectangle, Circle, Triangle, Star, Pen Tool, Pencil Tool -- switch your active tool instantly.
Frames
- Frame, Smartphone Frame (390px), Tablet Frame (768px), Laptop Frame (1280px), Desktop Frame (1920px) -- create device-sized containers.
Insert
- Insert Image, Insert Video -- trigger file upload dialogs.
Plugins
- Unsplash, Iconify, Photopea, Flowmo Helpers, Image Editor -- open integrated plugins with a single keystroke.
Structure
- Copy, Duplicate, Cut, Paste, Paste to Replace, Copy as Image, Delete, Rename -- standard element operations.
- Frame Selection, Group, Ungroup -- structural organization.
Components
- Create Component -- turn your selection into a reusable master component.
- Create Instance -- create an instance of the selected master component.
- Edit Master Component -- drill into a component's master for editing (enters Focus Mode).
Order & Alignment
- Bring to Front, Send to Back, Move Forward, Move Backward -- layer ordering.
- Align Left, Align Center, Align Right, Align Top, Align Middle, Align Bottom -- element alignment.
View
- Toggle Timeline -- show or hide the animation timeline panel.
- Toggle CMS -- open the CMS data panel.
- Full Screen -- hide both sidebars for a distraction-free canvas.
CMS
- CMS: Enable/Disable Visual Mode, CMS: New Page, CMS: New Page Part, CMS: Mark as Repeater, CMS: New Repeater, CMS: Add to Repeater, CMS: New Field, CMS: Add to Field, CMS: Add to Menu, CMS: Add to Breadcrumbs, CMS: Ignore Element -- full CMS workflow without leaving the palette.
Project Assets
- Your project's components appear as insertable actions (e.g., "Button", "Card"). Selecting one creates an instance on the canvas.
- Your project's CSS variables appear as copyable values. Selecting one copies
var(--your-variable)to your clipboard.
Styles
- Styles -- opens the Quick Start panel with tabs for Design System colors, section templates, and page templates.
Tip: Actions that require a specific selection (like Remove Background or AI Text Helper) only appear when the right type of element is selected. If you do not see an action, check your selection.
Detail Mode (Inline Property Editing)
When you select a CSS property from the search results, the palette morphs into Detail mode. The search field is replaced by an inline property editor -- the same control you would find in the right sidebar's Design panel.
How It Works
- Type a property name (e.g., "opacity") and select it from the results.
- The palette transitions smoothly to show the property editor.
- Edit the value directly. Changes apply to your selected element in real-time.
- Click the back arrow to return to Search mode.
Special Property Editors
Some properties get dedicated editing interfaces:
- Fill / Background -- renders the full Background Layers editor with support for solid colors, gradients, and image fills. You can add multiple layers and reorder them.
- Effects / Shadow -- renders the Effects Layers editor for managing box shadows and filters with drag-and-drop ordering.
- All other properties -- use the standard Dynamic Field editor, which supports unit switching (px, %, em, rem, etc.) and CSS variable selection.
Tip: If a property is not yet defined on your element (for example, you have never set opacity), the palette initializes it with a sensible default (opacity: 1, background: #ffffff, border-radius: 0px, etc.) before opening the editor.
AI Mode
Select Ask AI or type a question and press Enter when no results match. The palette expands into AI mode, embedding the full AI assistant directly inside the palette window.
The AI assistant uses smart routing to determine whether your query is a design task, a research question, or a general request, and routes it to the appropriate handler -- all without you needing to choose.
Your search text carries over as the initial prompt, so you can type your question in the search field and seamlessly transition into the AI conversation.
Text Helper Mode
When you have a text element selected, choose AI Text Helper to enter this mode. It provides a focused interface for rewriting text content using AI.
Step-by-Step
- Select a text element on the canvas.
- Open the Command Palette and choose AI Text Helper.
- The palette shows your current text and a set of one-click presets:
- Professional -- makes the text sound more polished
- Check Spelling -- fixes grammar and punctuation
- More Detail -- expands the text with more description
- Concise -- shortens while keeping key information
- Friendly -- makes the tone more conversational
- Click a preset, or type custom instructions in the text field and submit.
- Review the generated result. Click Apply to replace the text on your element, or try again with different instructions.
Background Removal Mode
When you have an image element selected, choose Remove Background to enter this mode. The palette runs AI-powered background removal entirely in-browser.
Step-by-Step
- Select an image element on the canvas.
- Open the Command Palette and choose Remove Background.
- Processing starts automatically. You will see a loading indicator while the AI model runs.
- Once complete, the palette shows the processed image with a transparent background.
- Click Apply to replace the original image. The processed image is uploaded to your project's storage and applied to the element.
Styles / Quick Start Mode
Select Styles from the palette to open a tabbed interface with three sections:
- Design -- view and modify your project's design system colors (primary, secondary, accent, background, text).
- Sections -- browse and insert pre-built section templates directly onto your canvas.
- Pages -- browse and insert full page templates as new pages in your project.
The Fuzzy Search Engine
The Command Palette uses a custom-built scoring algorithm rather than a standard search library. Understanding how it works helps you search more effectively:
- Exact prefix matches score highest. Typing "bor" will rank "border-radius" above "mix-blend-mode" even though both contain those letters.
- Substring matches rank second. If your query appears anywhere in the label, it scores well.
- Fuzzy character matching is the fallback. Characters are matched in order but can be spread across the label.
- Synonyms are built in. For example, "fill" matches
background, "tracking" matchesletterSpacing, "leading" matcheslineHeight, "alpha" matchesopacity, and "rounded" matchesborderRadius.
Tips
- Type your AI question directly in the search field. If there are no matching results, the palette shows an "Ask AI" button. You can also just type and press Enter to go straight to AI mode.
- Use the palette for property editing on the fly. Instead of scrolling through the right sidebar to find a specific property, open the palette, type the property name, and edit it inline.
- The palette is resizable. Drag the bottom-right corner to make it larger, especially useful in AI mode when you want more room for the conversation.
- Actions are context-aware. The palette automatically shows or hides actions based on your current selection. Select an image to see image actions; select text to see text actions; select nothing to see project-level actions.
Common Issues
| Problem | Solution |
|---|---|
| The palette does not open | Make sure you are not focused inside a text input, textarea, or content-editable element. The keyboard shortcut is suppressed when you are typing in a field to avoid conflicts. |
| An action I expect is missing | Most actions require a specific element type to be selected. For example, Remove Background only appears when an image is selected. Check your selection on the canvas. |
| Property changes are not applying | Make sure you have an element selected. When nothing is selected, property edits target the :root (project-level styles) instead of a specific element. |
| The palette appears in an awkward position | Drag it by its header to reposition. The palette calculates a "safe" position that avoids overlapping your selection, but complex layouts can sometimes produce suboptimal placement. |