Back to Dashboard
Version 5.0 (HTMX Powered)

Editor Guide

Welcome to the Fluid CMS visual editor. This guide will help you master the tools needed to build stunning, responsive pages.

Architecture Overview

Fluid CMS uses a Recursive Split Layout Engine (RSLE). This means your pages are built from top-level "Sections," which can be further subdivided into complex grids and columns.

Atomic Design

Everything follows an atomic hierarchy: Organisms (Sections) contain Molecules (Blocks) which are built from Atoms (Content units).

Real-time Sync

Our HTMX-powered core ensures that every change you make in the sidebar is instantly reflected in the canvas without page reloads.

Managing Sections

Sections are the horizontal building blocks of your page. Use the Left Navigator to manage them:

Pro Tip: You can reorder sections instantly by clicking the up/down arrows in the section header on the canvas.
  • Adding: Type a name in the "Add section..." box at the bottom of the left panel and press Enter.
  • Selecting: Click any section in the left panel or directly on the canvas to open its properties.
  • Visibility: Use the eye icon in the navigator to quickly toggle whether a section is displayed.

Block Properties

The Right Sidebar is where the magic happens. When you select a section, all editable fields appear here:

Content

Edit titles, subtitles, and body text. Use the rich text editor (Trix) for advanced formatting.

Media

Upload images or select from the library. We automatically optimize your images to WebP for speed.

Design

Toggle background variants, adjust spacing (PT/PB), and choose layout alignments.

Saving & Publishing

We separate Drafts from Live content to give you full control over your releases.

  • Save Draft: Saves your current progress to the database. Changes will NOT be visible to public visitors.
  • Publish: Compiles your layout into a high-performance JSON snapshot and makes it live on the frontend immediately.
Lightning Fast: Published pages load in under 1 second because they use our optimized caching layer.

Live Preview

Click the Live Preview button in the top bar to open your page in a new tab. This preview shows exactly what the published version will look like, including all current draft changes.