RuleCMS Documentation
Learn how to build, manage, and publish content with RuleCMS — from composing pages with drag-and-drop widgets to delivering published content into your own websites and apps.
Getting Started
Sign up, accept the license, and create a workspace — organization, team, and three environments — so you can start building widgets.
Organizations & Teams
Invite a teammate onto your workspace, add an organization administrator, or create another team in the same account.
Projects, Environments & Tokens
Copy the token your site uses to load widgets. Draft in Development, QA on Staging, ship Production — and register a second app when keys should stay separate.
CSS Variables
Name --brand-surface once on the project. New widgets start with that catalog. Existing widgets stay put until someone syncs from CSS Settings.
Class Definitions
Name rounded-xl once on the project. New widgets start with those declaration blocks. Existing widgets stay put until someone syncs from CSS Settings.
Cascade layers
Wrap rounded-xl in @layer utilities so copied classes compete with Maya’s host Tailwind pane. New widgets start with that wrap. Existing widgets stay put until someone syncs from CSS Settings.
CSS Properties
Type --angle once on the project so transitions and keyframes can interpolate. New widgets start with those @property rules. Existing widgets stay put until someone syncs from CSS Settings.
Fonts
Load Geist once on the project so Maya’s hero does not fall back to Times. New widgets start with those faces. Existing widgets stay put until someone syncs from CSS Settings.
Keyframes
Give fade-in frames on the project so Maya’s animate-fade-in on the hero actually runs. New widgets start with those animations. Existing widgets stay put until someone syncs from CSS Settings.
Position try
Register --flip on the project so Maya’s SALE badge can flip when it would overflow. Built-ins such as flip-block stay in class bodies. New widgets start with those try sets. Existing widgets stay put until someone syncs from CSS Settings.
Themes
Override --brand-surface on the project when Maya’s host is dark. Light values stay on CSS Variables. New widgets start with those overrides. Existing widgets stay put until someone syncs from CSS Settings.
Widget chrome
Set color-scheme on Maya’s homepage hero when her host is dark. Form controls and selection stay light until chrome is set. New widgets start with those fields. Existing widgets stay put until someone syncs from CSS Settings.
Widgets
Open the Production Default Widget and start composing, or create the next campaign in Development. Promote copies the draft; publish is the snapshot your site fetches.
The Composer
Edit the widget draft on the canvas. Drag Text and Image into a hero, restyle tablet without changing desktop, then keep going. Publishing is a later step.
Collections
Reuse Maya's product card on many pages, or freeze a one-off variant on the sale hero. Shared is one source; embedded is a copy that travels with the parent widget.
Widget Caching
Maya publishes a new headline and the live site still shows the old one. Published widgets refresh within a minute. Here is why, and how to change the wait.
Publishing
Publish Maya's homepage hero to Staging, then Production. The composer is the draft. Publish is the snapshot a token fetches.
Widget Selection Rulesets
Pick the right widget for each visitor. Author rules in the dashboard, dry-run them, publish a snapshot, and resolve from your app.
Widget Edit Links Extension
Maya already published her homepage hero. Install the free Chrome extension, turn on Link to RuleCMS, and click the R on that live embed to land in its composer.
Component Libraries
Maya's homepage hero is Text and Image today. This page is how her team's own React hero becomes a first-class palette card — preview, attributes, drag — not a Custom slot.
Media Assets
Maya needs the photograph on her homepage hero. Upload it once on the team's Images page, then pick it in the composer. Videos are a separate library.
Development Integration
Maya wants her Development homepage hero on her local site as she saves. Copy the dev. token and draft widget key from Integrate — no publish step.
Custom Props and Click Handlers
Maya wants the CTA on her homepage hero to open her booking drawer. Copy Component id from Modify, then pass onClick on RuleCMSWidget.
Text Placeholders
Maya's homepage hero Text greets each visitor by name. She writes {{ user.firstName ?? there }} and passes placeholderValues on RuleCMSWidget.
Server Rendering with Pre-fetched Mode
Rise & Crumb's Weekend Special banner arrives in the server HTML, and its Pre-order button opens the site's drawer. Fetch on the server, render pre-fetched.
Click Handlers on Server-Rendered Widgets
Rise & Crumb's server-rendered buttons open a drawer, play a video, and count clicks. Wrap RuleCMSWidgetServer in RuleCMSButtonClicks.
Mount Your Own Components
Maya wants her BookingForm on the homepage hero. Drop Custom, type booking-form, and register mounts on RuleCMSWidget — no RuleCMS enablement. The composer stays a dashed box.
HTML Custom Element Embed
Maya wants her published homepage hero on her WordPress marketing site. Pin the versioned script and drop <rulecms-widget> with the token and published key from Integration.
MCP
Maya is already in Cursor, writing her homepage hero. Connect RuleCMS there and her agent can add the photograph to Images without the upload page. The same account, and the same permissions, as the dashboard.
API Reference
Maya already published her homepage hero. The React SDK and <rulecms-widget> already call this GET. This page is when her app fetches the snapshot itself — token plus published key on widget-cache.