Admin Panel
A Domma SPA with 30+ views — the admin UI is built entirely with Domma

Overview

The admin panel is a client-side SPA built entirely with Domma. It serves as both the CMS administration interface AND a real-world example of a production Domma application. It demonstrates every major Domma feature:

  • Router (R) — 30+ routes with sub-views
  • Forms (F) — Blueprint-driven forms for every entity
  • Models (M) — Reactive data throughout the admin
  • Elements (E) — Modals, tabs, accordions, toasts, sidebars
  • Tables (T) — Paginated, searchable, filterable data tables
  • Icons (I) — 200+ icons via data-icon attributes
  • Storage (S) — Session state, preferences
  • HTTP (H) — All API communication
  • Effects — Animations and visual effects

Dashboard

The dashboard is the first view after login. It gives an at-a-glance summary of the entire CMS state.

Summary Cards

  • Page count
  • Collection entry count
  • Pending form submissions
  • Active users

Quick Actions

  • New Page
  • New Collection Entry
  • View Submissions

Recent Activity Feed

Last 10 changes across all content types, showing who made the change, what was changed, and when.

Site Health & Charts

  • Disk usage
  • Last backup date
  • Page views over 7 days Pro
  • Top pages Pro

Page Editor

A full-featured Markdown page editor with a split-pane layout — Markdown source on the left, live preview on the right.

Toolbar

Formatting buttons for:

  • Bold, Italic
  • Headings (H1–H3)
  • Link, Image
  • Inline code, Code block
  • Table, Blockquote
  • Ordered & unordered lists
  • Divider
  • Insert shortcode
  • Media library (inserts image syntax)

Frontmatter Editor

Structured form for page metadata:

  • Title, description, layout, theme
  • Draft toggle, tags
  • SEO, canonical URL, social preview

Auto-save & Publishing

  • Auto-save every 30 seconds to browser storage
  • Publish button
  • Save Draft button

Media Library (Admin)

A full media management interface for uploading, organising, editing, and inserting media assets.

Upload & Browse

  • Drag-and-drop upload zone or click to browse
  • Grid view with image preview thumbnails
  • Copy URL to clipboard
  • Delete with confirmation dialog

Image Editor

Click any image to open the inline editor:

  • Crop, resize, rotate, flip
  • Filters (brightness, contrast, saturation)

Filtering & Sorting

  • Filter by type: images, documents, all
  • Sort by date, name, size
  • Search by filename

Collection & Form Editors

Collection Editor

A visual schema builder for defining collection structure:

  • Add, remove, and reorder fields visually
  • Field settings panel: name, type, required, default, validation, display label
  • Adapter toggle: file ↔ mongo Pro
  • Preview schema as JSON

Form Editor

Similar field builder to collections, with additional capabilities:

  • Layout selector (stacked, grid, inline)
  • Success message configuration
  • Step configuration (wizard mode)
  • Conditional logic: "Show [field] when [other field] [operator] [value]"
  • Trigger configuration: email, webhook, action

View & Action Editors Pro

View Editor

Build custom data views with a visual pipeline builder:

  • Pipeline stage list with drag-to-reorder
  • Stage type selector + configuration form per stage
  • Live preview table: run pipeline, see results instantly
  • Column display configuration

Action Editor

Compose multi-step automation actions:

  • Step list with drag-to-reorder
  • Step type selector + type-specific configuration form
  • Test runner panel: input sample data, step through execution
  • Execution history table

Permission-Aware Sidebar

The admin sidebar adapts dynamically to the logged-in user's role. It is generated from the user's permissions and enabled plugins, with sections that expand and collapse with localStorage persistence via S.set().

Role Visible Sections
admin Content, Collections, Forms, Media, Blocks, Views, Actions, Users, Roles, Plugins, Settings
manager Content, Collections, Forms, Media, Blocks (no Users / Roles / Settings)
editor Pages, Media
subscriber Dashboard, My Profile

Keyboard Shortcuts

Shortcut Action
Ctrl / Cmd + S Save current editor content
Ctrl / Cmd + P Preview current page
Ctrl / Cmd + / Toggle sidebar
Ctrl / Cmd + K Open quick search (pages, collections, settings)
Ctrl / Cmd + N New item — context-aware (e.g. new page when in pages view)
Escape Close modal or dialog

Dogfooding Domma

The admin panel is a first-class consumer of every Domma module. The table below shows how each namespace is put to work in the admin UI:

Domma Module How Used in Admin
R Router 30+ named routes: /dashboard, /pages, /pages/:id, /collections/:slug, etc.
F Forms Blueprint-driven forms for pages, collections, forms, users, settings
M Models Reactive page state, form data, table state, user session
E Elements Modals (confirm delete), Tabs (page editor panels), Toast (save notifications), Sidebar (nav), Accordion (settings groups)
T Tables Collections list, entries table, submissions, users, media grid
I Icons data-icon attributes throughout — 50+ icons in use
S Storage Session token, sidebar state, editor auto-save, user preferences
H HTTP All API calls: GET / POST / PUT / DELETE for every content type
Effects Reveal animations on dashboard load, celebrations on first publish