Creating Buttons | AEbar Docs

Adding a Button

Click the + button in the grid to open the button editor.

If the current panel has no bars yet, AEbar shows this empty state. Clicking Add your first button creates the first bar and opens the button editor immediately.

AEbar showing its no-bar empty state with a centered add button and the label Add your first button.

When a bar exists but contains no buttons, the grid shows an empty area with just the + button. This is different from the “no bar” state above.

AEbar grid area with no buttons, showing only the add button at the bottom.

The Button Editor

The button editor opens in its own window. It has three main sections: action configuration at the top, appearance controls in the middle, and modifier actions at the bottom.

The editor window hosts everything needed to configure a button. The strip at the top of the editor shows the buttons in the current bar plus a live preview of the one you are working on, so you can see where it will appear.

The AEbar button editor window with action type row, action fields, appearance controls, and modifier section.

While the editor is open, you can click the + button at the top of the editor to save the current button and immediately start another one.

Choosing an Action Type

The editor shows eight action types across the top. Click one to select it:

Action Type	What It Does
Effect	Applies an effect to selected layers. Search installed effects by name or enter match name manually.
Preset	Applies an After Effects animation preset (.ffx or .ffxml) from a file path.
Expression	Sets an expression on a property of selected layers. Optionally target a specific property path.
Menu	Invokes an After Effects menu command by name or ID. The command ID is cached after first use for faster repeat execution.
Extension	Opens a CEP extension by its extension ID.
JSX	Runs a JSX or JSXBIN script file. The file path is stored, and the source can optionally be embedded for portability when exporting.
Scriptlet	Runs inline ExtendScript code you type directly into the editor.
Shell	Runs a shell command with optional arguments.

Each action type shows its own configuration fields below the type selector. See the Action Types Reference for full details on every field.

Effect Search vs Manual Entry

When the Effect action type is selected, the editor shows a searchable list of all effects installed on your system. Select an effect from the list to auto-fill both the display name and match name.

AEbar editor action section showing the searchable effect list with Gaussian Blur and other results visible.

If the effect is not in the search results, click Manual to switch to direct entry. This shows text fields where you type the match name and display name yourself.

AEbar editor action section in manual mode showing text fields for match name and display name.

Icon Picker

Clicking the icon trigger in the Appearance section opens the icon picker. Three tabs are available:

Lucide — 1,500+ stroke-style icons, searchable by name.
Font Awesome — 2,000+ solid and regular icons from Font Awesome Free. KBar imports use this set automatically.
Custom — Upload your own SVG, PNG, JPG, or WebP image.

Button Appearance

The Appearance section lets you customize how the button looks in the grid:

Icon opens the icon picker. Choose from Lucide, Font Awesome, or upload a custom image.
Color opens a color picker. Set a color to tint the button's icon. Recently used colors appear above the hex field for quick reuse. Leave it unset for the default theme color.
Label sets a text label displayed on the button. When set, the button shows both icon and text. If only text is set with no icon, the button shows text alone.
Tooltip appears on hover to describe what the button does.

AEbar editor appearance section with icon trigger, color picker, label field, and tooltip field.

Modifier Actions

The Modifiers section lets you assign alternate actions to Shift, Alt, and Cmd (Ctrl on Windows). Toggle a modifier on with the switch, then configure its action type and settings.

Modifier actions use an action type selector plus a raw JSON configuration field, rather than the same form controls shown for the primary action. This gives you full flexibility but means you need to know the config shape for each action type.

AEbar editor modifiers section with the Shift modifier expanded, showing action type selector and raw JSON config field.

When a user holds a modifier key while clicking the button, the modifier action runs instead of the primary action. Modifier tooltips appear on hover so users know what each key combination does.

A single button can cover up to four actions: the primary click plus three modifier variants. For example, one button could apply Gaussian Blur on click, Directional Blur on Shift+click, and Fast Box Blur on Alt+click.

Live Preview

While the editor is open, the grid shows a live preview of the button you are editing. The preview button has a dashed border and a subtle wiggle animation so you can distinguish it from saved buttons. Changes to the icon, color, or label update the preview in real time. The preview is not added to the bar until you save it.

Editing an Existing Button

Long-press any button in the grid to enter edit mode. All buttons show pencil and X badges. Click the pencil badge to reopen the button editor with the existing configuration loaded.

Long-press is the main way into edit mode. Once the badges appear, click the pencil to edit a button, drag to reorder, or click empty grid space to exit.

You can also right-click a button to open its editor directly without entering edit mode.

To exit edit mode, click any empty space in the grid.

Deleting a Button

In edit mode, click the red X badge on any button to remove it. This action is immediate and cannot be undone.