Development Guide
Extend and customize SveltyCMS — widget development, plugin architecture, automation, AI integration, and SDK references.
On this page
Build on SveltyCMS: widgets, plugins, dashboard widgets, and the way server code calls the core. Operating the admin is Guides. The product model is Concepts. Lookup pages are the Reference.
Admin pages
(app) routes, widget inputs, and plugin views share one kit: AdminPageShell, AdminCard, and the controls in src/components/ui.
- 🧩 Native UI — Catalog, import paths, and the rest of the barrel
- 📐 Page shells — How
AdminPageShellandAdminCarddivide a page - 🎛️ Native controls — Button, Badge, Input, Select, Textarea, Toggle, Checkbox, Modal
Shade, RTL, and motion rules stay in the GUI styling guide. Theme setup for operators is Design System & Admin Theme Settings.
🧩 Widget System
Build custom field types using the 3-pillar architecture (Definition, Input, Display) with full Valibot validation and Tailwind v4 theming.
- 📖 Widget System Overview — Architecture, lifecycle, and registration
- 🛠️ Widget Development Guide — Step-by-step tutorial for creating widgets
- 🏗️ Widget Architecture — The 3-pillar strategy in depth
- 🔧 Widget Development — API reference and best practices
- 🏪 Widget Marketplace — Publishing and discovering community widgets
- 📋 Widget Index — Complete widget catalog
🔌 Plugin System
Extend SveltyCMS with server-side logic via the hook-based plugin architecture.
- 🏗️ Plugin Architecture — Hook system, lifecycle, and registration
- 🔧 Plugin Development — Building and testing plugins
- 🛒 E-Commerce Overview — Four surfaces only: plugins, field widgets, dashboard widgets, gated API handlers (core stays a CMS)
📊 Dashboard Widgets
Build self-contained, marketplace-portable widgets for the admin dashboard grid.
- 🏠 Dashboard Widget Overview — Package layout and discovery
- 🏗️ Dashboard Widget Architecture — Folder structure,
widget.json, registry, licensing - 🛠️ Dashboard Widget Development — Step-by-step guide to building a dashboard widget
- 🏪 Dashboard Widget Marketplace — Publishing and installing dashboard widgets
Automation and workflows
Editors run these in the admin. The guides are the task. This section keeps the developer pages around them.
- ⚡ Automation System — Event-driven triggers for webhooks, emails, and field updates
- 📋 Workflow Engine — Draft, review, and publishing state management
- 🛠️ Error Handling — Unified error handling patterns for development
- 🔧 Autonomous Maintenance — System watchdog and self-healing
🧠 AI Integration
Leverage AI capabilities within SveltyCMS.
- 🤖 AI Integration — Local Ollama, hosted MCP knowledge core, AI translation
- 🧠 AI-Assisted Builder Design — Roadmap: design collections, widgets, pages, and automations with AI (Phase 0 gateway shipped)
- 🧠 Smart CMS Importer — AI-powered migration from legacy platforms (marketplace plugin)
🌐 Frontend & Live Preview
Build public sites on SveltyCMS — headless or with the optional in-repo starter.
- 🌐 SvelteKit Site Starter — Optional
routes/(site)public frontend (free) - 👁️ Live Preview Architecture — Preview tokens and postMessage protocol
- 🔌 Editable Website Plugin — Premium live preview (€14.99)
📡 SDK & API Patterns
Developer tools for building on top of SveltyCMS.
- 📦 Hybrid Package Model —
@sveltycms/coreand@sveltycms/widgetsnpm packages - ⚡ Edge SDK — Edge-optimized data fetching and multi-region support
- 🔗 Local vs HTTP API — When to use the Local SDK vs REST/GraphQL
- 📖 OpenAPI Specification — Dynamic OpenAPI 3.1.0 spec for automated SDK generation
Next Steps
- Building an admin page? Start with Native UI
- New to widget development? Start with the Widget System Overview
- Building a plugin? See the Plugin Architecture
- Using the SDK? Read the Hybrid Package Model
- Automating workflows? Check the Automation System
- Using AI? Read the AI Integration Guide
- Need the API? Visit the API Reference