The Composer

The composer at a glance

The composer is where you build widgets and collections visually. It has three main areas:

• The component palette (left sidebar) — everything you can drag onto the page, organized into groups, plus your saved collections.
• The canvas (center) — your page as it currently looks. Components are arranged in rows; click any component to edit it.
• The Modify Display panel — opens when you click a component on the canvas. Everything about that component and its row is edited here.

The component palette

The left sidebar has two tabs: Components and Collections.

Components tab

Components are grouped into collapsible panels — the components RuleCMS provides to every team (for example Base Elements), plus a panel for each component library your team has enabled. To build your page, drag a component from a panel onto the canvas: drop it into an existing row to add it alongside other components, or drop it into empty space to start a new row.

When the composer opens, Filters is collapsed and only the first library panel is expanded. Click a panel header to expand or collapse that group; use the chevron on the right as a quick cue for open vs closed.

Open Filters when you need the toolbar and group checkboxes:

• Show all / Hide all — turn every group checkbox on or off so whole libraries appear or disappear from the list below.
• Expand all / Collapse all — open or close every library panel at once without changing which groups are visible.
• Filter groups — type a few characters to narrow the checkbox list to matching library names.
• Each checkbox shows or hides one library panel. Collapse Filters again when you want more room for the component list.

Collections tab

Collections you have saved on this team appear here, ready to be reused. Each can be used as a shared block (one edit updates every page that references it after publish) or converted into an embedded copy tied to a single parent — see Collections for the full guide. For each collection you can:

• Drag it onto the canvas using the move handle — the whole collection is placed on your page, just like a component. Empty collections cannot be dragged (you'll see a warning icon instead of the handle).
• Edit it with the pencil button, which opens the collection in the composer.
• Remove it with the trash button. Removing a collection takes it off the list of available options — pages and widgets already using it, and anything already published, are not affected.
• Create a new collection with the Create New Collection action at the bottom of the tab — below the empty-state message, or below the list of saved collections. It opens the same create-collection page as Create New Collection in the Go To menu.

Moving, copying, and deleting components

Normally, clicking a component on the canvas opens the Modify drawer. To rearrange the page instead, put the canvas into one of three edit modes. Each mode adds a small handle to the top-left corner of every component on the page:

• Move mode — drag a component's handle to another spot on the page. Drop zones appear as you drag, on all six sides of every existing component, so you can place it above, below, or beside anything already there.
• Copy mode — the same drag, except the original stays where it is and a copy lands where you drop it.
• Delete mode — click a component's handle to remove it. The Undo arrow in the composer top bar brings it back.

Switch modes from the keyboard, or from the composer top bar menu under Switch Edit Mode if you would rather not use shortcuts:

Hold Option on a Mac, or Alt on Windows and Linux. Only one mode is ever active, and each shortcut is a toggle: press it again, or press Esc, to go back to clicking components to edit them. An empty page has nothing to move, so the modes become available once you have dropped your first component.

The Modify drawer

Click any component on the canvas and the Modify drawer slides in. Close it with the X button, by pressing Escape, or by clicking outside it. Its heading tells you where you are on the page (“Row 2, Column 3”), and its contents are grouped into three collapsible sections:

Each section has a filter box at the top, so you can type “padding” or “colour” instead of scrolling, and the toggle in the drawer header jumps between the three sections. Above the filter sit two pills, Reset and Clear all attributes — they only change that section, and they do different jobs. How Reset and Clear work.

Widget Settings and Collection Settings

The Modify drawer edits one selected component, column, or row. Styles that belong to the whole widget or the whole collection live elsewhere:

• On a widget, the gear in the widget header opens Widget Settings — the box every row of that widget sits inside. See Widget Settings.
• On a collection, the gear in the collection header opens Collection Settings — the same idea for the reused block, wherever it is embedded. See Collection Settings and the Collections guide.

There is no Component / Column / Row toggle in those drawers, and no delete action — you are styling the entity you already opened. Size, spacing, border, shadow, overflow, and hiding are left out on the editing canvas so drag and drop keeps a full surface; open Preview to see them applied. Gap, colours, typography, and opacity apply while you edit.

Those drawers also have Clear all attributes at the top, which strips the outer box’s visual CSS and leaves the rows inside alone. They do not offer Reset, because a widget or collection has no drop-time starters to return to. How Reset and Clear work.

Overlay layers

Rows sit below each other; columns sit beside each other. Some designs need a third direction: on top of. A sale badge on a product photo, a caption on a hero, a promo that must not steal the click from the button underneath — those are overlay layers. Add Layer lives in the header, just left of the gear. The full guide covers the problem, the use cases, and how to add, edit, and delete layers.

Set values per device — or once for all

Most settings in the Modify drawer are responsive. Every such editor starts with a "Same value for all resolutions" checkbox:

• Checked (the default) — you enter one value and it applies on phones, tablets, and desktops.
• Unchecked — separate phone, tablet, and desktop fields appear, and each device gets its own value. Use the device switcher in the composer top bar to preview each size.

Switching modes clears the values from the other mode, so what you see in the editor is always exactly what applies. More on per-device values.

Working with images

With an image component selected, the Selected Component section lets you:

• Pick the image from your team's media assets. When you select an asset that has stored image attributes, fields like width, height, and alt text prefill automatically.
• Write alt text for accessibility. For purely decorative images, check "Decorative image (use empty alt text)" — screen readers will skip the image, which is the correct behavior for decoration.
• Tune delivery with the loading and fetch-priority dropdowns. These default to sensible values; choosing "(unset — use component default)" returns to the default at any time.

Working with videos

Upload clips under your team's Videos library first (MP4, WebM, or MOV). Then drop a Video component and use Selected Component to:

• Pick the video with Video Selector. Empty playback fields can prefill from defaults saved on that video's detail page.
• Choose a poster image (optional) from the Images library. Leave it unset to use the video's first frame.
• Decide content vs decoration. A video someone watches keeps the defaults (controls on, autoplay off). A silent looping background needs Autoplay, Muted, and Loop on, and Controls off — those four go together.
• Set intrinsic width and height so the page does not jump while the file loads. Column Width still controls how large the video appears in the layout.

Picking icons

Components with an icon setting include an icon picker in the Selected Component section. Search by name across thousands of icons (the first 15 matches are shown), then click an icon to apply it. Your current selection is highlighted in the grid and shown next to "Current Selection."

Hiding components per device

Use Hide Column in the Selected Column section to hide a column everywhere or only on specific screen sizes — for example, hide a large banner on phones. Hidden columns stay visible while you edit (so you can still select and change them) and disappear in preview and on the published page.

Good to know

• Row wrapping applies outside edit mode. When you enable wrapping on a row, items stay on one line while editing (so you can see everything); they wrap in preview and on the published page.
• Your work saves automatically. The composer auto-saves as you edit; publishing is a separate, explicit step — see Publishing.
• Undo has your back. Because edits save as you go, there is no unsaved draft to throw away — instead, the Undo and Redo arrows in the bar at the top of the composer step back and forth through your changes, including deleting a column or row. Undo history belongs to the session you have open, so it clears if you reload.
• Duplicate before you experiment. Duplicating a column or row from the Modify drawer is the quickest way to try a variation without losing the original.
• Every setting is documented. The information icon beside each setting opens its own page. The Attribute Reference lists the column, row, widget, and collection settings, and RuleCMS Components lists what each component itself can do.
• Content that has to sit on top of other content belongs on an overlay layer, not in the next row.