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 User Collections.
Components tab
Components are grouped into cards — the standard RuleCMS widgets, plus a group for each component library your team has enabled. To build your page, drag a component from a card 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.
The filter card at the top of the palette keeps things tidy when you have many groups. Each checkbox shows or hides one group of components, and Uncheck all clears everything so you can enable just the group you need.
User 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.
The Modify Display panel
Click any component on the canvas and the Modify Display panel slides in. Close it with the X button, by pressing Escape, or by clicking outside the panel. Its tabs cover everything about the selected component and its row:
| Tab | What you edit there |
|---|---|
| Component | Duplicate or delete the component, plus component-specific settings (for example, the icon picker for icon components, or collection options when a collection is selected). |
| Entire Row | Duplicate or delete the whole row. |
| Row Layout | Horizontal alignment (start, center, end, space between, space around, space evenly), vertical alignment (top, center, bottom, baseline, stretch), and whether items wrap onto new lines. |
| Dimensions | Minimum and maximum width and height. Widths are set as a percentage of the row (0–100); heights in pixels. |
| Content | The component's text (up to 500 characters) and title (up to 100 characters). |
| Image | For image components: pick the image, alt text, width and height, and delivery options (sizes, loading, fetch priority, transformations). Only the settings the component supports are shown. |
| Hide | Hide the component on some or all screen sizes. |
Set values per device — or once for all
Most attributes in the Modify Display panel are responsive. Every such editor starts with a "Same value for all dimensions" checkbox:
- Checked (the default) — you enter one value and it applies on phones, tablets, and desktops.
- Unchecked — separate On Phone, On Tablet, and On 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.
Working with images
On an image component's Image tab you can:
- 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.
Picking icons
Components with an icon setting include an icon picker on the Component tab. 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 the Hide tab to hide a component everywhere or only on specific screen sizes — for example, hide a large banner on phones. Hidden components 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.
- Duplicate before you experiment. Duplicating a component or row from the Modify Display panel is the quickest way to try a variation without losing the original.