What you can do
You already opened a widget from Widgets. Picture Maya's homepage hero sitting in the Production Default Widget. The canvas is empty. This page is how she builds on it.
Two everyday jobs:
- Drag Text and Image into the hero. Open Components, drop a heading and a photo onto the canvas, and the everyday hero starts to exist. Click either one and the Modify drawer is where you write the copy or pick the picture.
- Restyle the tablet hero without changing desktop. Uncheck Same value for all resolutions on padding or font size, then use the device toggles in the top bar. Phone, tablet, and desktop each get their own value. Desktop stays as you left it.
A third path, when you would rather talk than drag: Ask AI can add a button in ordinary language. It does the same operations the mouse does — not a new kind of edit.
How the composer thinks
The left sidebar is the palette. The center is the canvas. Components drop onto rows. Drop into an existing row to sit beside what is already there, or into empty space to start a new row. Click a component and the Modify drawer slides in — that is where one component, its column, and its row are edited.
Styles that belong to the whole widget are not in that drawer. The gear in the widget header opens Widget Settings — the box every row sits inside. On a collection, the same gear opens Collection Settings.
Here is the case that surprises people. When the composer opens, Filters is collapsed and only the first library panel is expanded. Text and Image live in that first panel — usually Base Elements. Other libraries look missing until you open Filters and use Expand all, or click a panel header. Nothing was removed. It was just closed.
A sale badge that has to sit on the hero photo is not the next row. That is an overlay layer. Add Layer lives in the header, just left of the gear. Rewriting the row underneath will not put the badge on the image.
Build in the composer
You do this after Edit Widget or Create Widget — the same landing the Widgets guide already walked. After Get Started you are in Production, looking at the Default Widget.
- Open the organization → team → project → environment you want to work in. Find the orange Widgets card, View Widgets, then the widget row. Edit Widget opens the composer.
- On the left, stay on the Components tab. The first library panel is already open. Drag Text onto the empty canvas. Drag Image next to it, or below it to start a second row. Dragging is the faster way when you can already see the spot. Click a card instead, and a wizard asks where it should go. Click to place walks through every question.
- Click the Text. The Modify drawer opens. Its heading is Modify, with a subtitle such as “Row 1, Column 1”. Selected Component is the copy. Selected Column is the box. Entire Row is how the columns sit together.
- Type the hero heading. Click the Image and pick a photo with Select Image. There is no Save button in the drawer — the composer writes the draft as you go. That is a safe stop.
- Use the phone / tablet / desktop toggles in the top bar to preview each size. Uncheck Same value for all resolutions only when a setting should differ.
Publishing is a later, explicit step — see Publishing. Undo and Redo in the top bar step through this session. Reload clears that history.
When you reach for it
The first path above is drag, click, restyle. These are the other levers on the composer, named as jobs.
| What you need | When you reach for it |
|---|---|
| Filters / Show all / Expand all | A library looks missing. Open Filters for Show all / Hide all, Expand all / Collapse all, and Filter groups to narrow the checkbox list. Collapse Filters again when you want room for the component list. |
| Collapse sidebar | Use the double-arrow at the top right of the tab row to collapse the sidebar to a thin strip so the canvas has more room. Click Expand sidebar on that strip to bring the palette back. |
| Collections tab | Drop a saved block onto the canvas with the move handle. Empty collections cannot be dragged — you will see a warning icon instead. Pencil edits the collection; trash removes it from the list (pages already using it, and anything already published, are not affected). The Create New Collection action at the bottom of the tab — below the empty-state message, or below the list — opens the same create page as Create New Collection in the Go To menu. Shared versus embedded is Collections. |
| Move / Copy / Delete | Clicking a component opens Modify. To rearrange instead, switch modes from the keyboard, or from Switch Edit Mode in the top bar. Each mode adds a handle on every component. Only one mode is active. Press the shortcut again, or Esc, to go back to clicking. An empty page has nothing to move. Shortcuts use Option / Alt so Cmd / Ctrl + C still copies text. They stay quiet while you type, while Modify or a dialog is open, and while the composer is in a background tab. |
| Widget Settings / Collection Settings | The gear in the header. There is no Component / Column / Row toggle, and no delete — you are styling the entity you already opened. Size, spacing, border, shadow, overflow, and hiding stay off the editing canvas so drag and drop keeps a full surface; open Preview to see them. Preview can switch between Visual, JSON, and CSS Settings. Gap, colours, typography, and opacity apply while you edit. Those drawers offer Clear all attributes and not Reset — a widget or collection has no drop-time starters. Widget Settings · Collection Settings · How Reset and Clear work. |
| Images, videos, icons | With an Image selected, Media Selector and Select Image pick from the team media library. Stored width, height, and alt can prefill. Check Decorative image (use empty alt text) when screen readers should skip it. Videos use Video Selector after you upload under Videos (MP4, WebM, or MOV) — see the Video component. Icon settings include a picker: search by name, first 15 matches, current pick next to Current Selection. |
| Hide per device | Hide Column in Selected Column hides a column everywhere or only on some sizes — a large banner off phones, for example. Hidden columns stay visible while you edit so you can still select them. They disappear in preview and on the published page. Switching “all devices” versus per-device clears the other mode's values. More on per-device values. |
| Click to place | You clicked a card, or you would rather not drag. Dragging is faster when you can see the spot. The wizard asks where it goes, and Drop on canvas puts it where the same drag would. The information icon in the dialog opens the full walkthrough. |
| Ask AI | The button in the lower-right of the canvas. Same operations as the palette and Modify, in ordinary language — add a button, move a row, change padding. Targeted on purpose. It will not design a page from a brief. |
| Overlay layers | Content that has to sit on top of the hero — a badge on a photo, a caption on the image. Add Layer is in the header, just left of the gear. Do not rewrite the row underneath to fake it. |
| CSS on this widget | Tokens, classes, fonts, and the rest the canvas reads belong to this widget, not the project. Edit them from CSS Settings on the Widgets management page — Sync from Project lives there too. Start with widget CSS Variables. The Modify-drawer toggle for a named token is Using a CSS variable instead of a typed value. Project catalogs are the template for the next widget: CSS Variables, Class Definitions, Fonts, Keyframes, Position try, CSS Properties, Themes, Cascade layers, and Widget chrome. Widget copies sit under Widgets in the sidebar — Class Definitions, Fonts, Keyframes, Position try, CSS Properties, Themes, Cascade layers, Widget chrome. |
Move, copy, and delete from the keyboard:
| Shortcut | What it does |
|---|---|
| Option/Alt + M | Toggle Move Mode |
| Option/Alt + C | Toggle Copy Mode |
| Option/Alt + X | Toggle Delete Mode |
| Esc | Leave the current mode |
Each setting in Modify has a small information icon just after its name. That opens its page in a new tab — column, row, widget, and collection settings in the Attribute Reference, and a component's own settings under RuleCMS Components. Reset and Clear all attributes sit above the filter in each Modify section and only change that section.
Two more canvas habits. Row wrapping stays on one line while you edit so you can see everything; it wraps in preview and on the published page. Duplicate a column or row from Modify when you want a variation without losing the original. Invalid values turn red and are not applied. An empty field means “use the component default.”
What to read next
This page is the story and the first walkthrough. Components, placing without a drag, every setting, Ask AI, and overlay layers live on the pages below.
- RuleCMS Components — Text, Image, Video, and the rest the palette ships — what each one does and the settings it owns.
- Click to place — Every question the wizard asks when you click a card instead of dragging it. Dragging is still faster when you can see the spot.
- Attribute Reference — Every column, row, widget, and collection setting. Reset and Clear have their own card: How Reset and Clear work.
- Ask AI — The same composer operations in ordinary language.
- Overlay Layers — A badge on a photo, a caption on a hero, without rewriting the row underneath.
- Collections — Shared versus embedded blocks you drop from the Collections tab.
- widget CSS Variables — This widget's token catalog. CSS Settings and Sync from Project live on the Widgets management page.
- Widgets — Open or create the record this canvas edits. Promote and publish are there, not here.
- Publishing — How a draft becomes the snapshot a Staging or Production token fetches.
How this fits
A widget is the record. The composer is how you edit the draft. Nothing a visitor's site fetches changes until you publish. CSS Settings, promote, and the Default Widget in Production live on Widgets.
Open the Default Widget. Drop Text and Image into the hero. When the tablet layout needs its own spacing, uncheck Same value for all resolutions. Publish when the draft is the one you want the site to fetch.