Admin UI
The WollyCMS admin is a single-page application built with SvelteKit. It runs at /admin on your CMS domain (e.g., https://cms.example.com/admin).
The admin supports three theme modes: Light, Dark, and System (follows your OS preference).
Switching themes
Section titled “Switching themes”Click the theme icon in the bottom-left of the sidebar to cycle between modes:
- Sun — Light mode
- Moon — Dark mode
- Monitor — System (auto-detects OS preference)
Your choice is saved in the browser and persists across sessions. There is no white flash on page load — the theme is applied before the page renders.
CSS variables
Section titled “CSS variables”The admin uses CSS custom properties for all colors. Both light and dark themes are defined in packages/admin/src/app.css. Key variables:
| Variable | Purpose |
|---|---|
--c-bg |
Page background |
--c-bg-subtle |
Subtle background (hover states, table headers) |
--c-surface |
Card, modal, and input backgrounds |
--c-text |
Primary text |
--c-text-light |
Secondary/muted text |
--c-border |
Borders and dividers |
--c-accent |
Primary accent (links, active states, focus rings) |
--c-danger |
Destructive actions |
--c-success |
Success states |
--c-warning |
Warning states |
--c-sidebar |
Sidebar background |
Custom block type editors and admin extensions should use these variables to automatically support both themes.
Branding
Section titled “Branding”The admin displays your site name in the sidebar header. Configure it in System → Settings under the “Admin Brand Name” field. The logo is the WollyCMS block composition icon by default.
Keyboard shortcuts
Section titled “Keyboard shortcuts”| Shortcut | Action |
|---|---|
Ctrl+K |
Open global search |
Ctrl+S |
Save current page (in page editor) |
Ctrl+Shift+P |
Toggle preview panel (in page editor) |
↑ / ↓ |
Move a block up/down within its region (with a block’s drag handle focused) |
? |
Show keyboard shortcuts overlay |
Esc |
Close overlay/modal |
Global search
Section titled “Global search”Press Ctrl+K from anywhere in the admin to open the global search. It searches across pages, blocks, media, and menus. Results are grouped by type.
Dashboard
Section titled “Dashboard”The dashboard shows:
- Quick actions — New Page, Upload Media, View Site (links to your
SITE_URL) - Stats — Total pages, published, drafts, shared blocks, media, menus, users
- Recent pages — Last updated pages with direct edit links
Loading states
Section titled “Loading states”Pages show animated skeleton placeholders while data loads. The dashboard, pages list, and media grid all use shimmer skeletons instead of blank screens or spinner text.
Sidebar navigation
Section titled “Sidebar navigation”The sidebar organizes admin features into sections:
- Content — Pages, Blocks, Media
- Structure — Menus, Taxonomies, Redirects
- Schema — Content Types, Block Types
- System — Users, Webhooks, API Keys, Tracking Scripts, Audit Log, Account, Settings
On tablets (< 1024px), the sidebar collapses to icon-only mode with hover tooltips. On phones (< 768px), the sidebar is hidden behind a hamburger menu that slides out as an overlay with full labels. Tables scroll horizontally and grid layouts stack vertically.
Page editor
Section titled “Page editor”The page editor is the core editing experience:
- Title area — Notion-style large title input with inline slug editor
- Status pill — Colored badge showing Published/Draft/Archived
- Regions — Color-coded content areas (Hero, Content, Sidebar, etc.)
- Block cards — Collapsible cards with type badges, position numbers, and quick actions
- Preview panel — Split-pane live preview with device size toggle (mobile/tablet/desktop)
- SEO sidebar — Meta title/description, OG image, canonical URL, robots, SERP preview, social preview, SEO score
- Accessibility panel — WCAG AA compliance checker
- Revision history — View and restore previous versions
Block editing
Section titled “Block editing”- Click the + button on a region to add a block (visual type picker with icons)
- Hover a block card for quick actions (Edit, Duplicate, Move to Region, Remove)
- Drag blocks to reorder within or across regions, using the handle (
⠇) on the left of each block card. A blue insertion bar shows where the block will land — it tracks the pointer continuously across the whole region, and the list never shifts while you drag. - Reorder without a mouse: focus a block’s drag handle (
Tab) and press ↑ / ↓ to move the block up or down within its region. Each move is announced to screen readers and saved immediately. - Use
/in the rich text editor for slash commands (headings, lists, tables, images)
Reordering a block collapses any expanded block cards first — rich text editors cannot survive being moved in the DOM. Unsaved field edits are preserved.