path

docs/getting-started

title

Getting Started

description

Quick start guide to begin using SveltyCMS - from installation to creating your first content.

order

icon

mdi:rocket-launch

author

SveltyCMS Team

created

2025-10-05

updated

2025-10-05

Getting Started with SveltyCMS

Welcome to SveltyCMS! This guide will help you get up and running in under 10 minutes.

What is SveltyCMS?

SveltyCMS is a modern headless CMS built with SvelteKit that provides:

⚡ Lightning Fast - Built on SvelteKit 2 with Svelte 5
🗄️ Database Agnostic - Works with MongoDB, MariaDB, PostgreSQL
🌐 Multi-Tenant - Optional tenant isolation
🔌 Widget System - Extensible with plugins
🔒 Secure - Built-in authentication, 2FA, role-based access
🌍 Multilingual - i18n support with Paraglide JS
📊 GraphQL & REST - Flexible API options
🎨 Customizable - Tailwind CSS + Skeleton UI

Quick Start (5 Minutes)

1. Install SveltyCMS

# Clone the repository
git clone https://github.com/SveltyCMS/SveltyCMS.git
cd SveltyCMS

# Install dependencies
npm install

# Start development server (CLI installer launches automatically)
npm run dev

2. Complete Setup Wizard

The CLI installer guides you through:

✅ Choose Database (MongoDB recommended for first install)
✅ Enter Connection Details (or use MongoDB Atlas free tier)
✅ Test Connection (automatic)
✅ Create Admin User (your email and password)
✅ Seed Initial Data (automatic)

3. Access Admin Panel

Once setup completes:

🎉 Setup Complete!

📍 Admin Panel: http://localhost:5173/admin
📍 API Endpoint: http://localhost:5173/api
📍 GraphQL: http://localhost:5173/api/graphql

👤 Login with your admin credentials

First Steps After Installation

1. Login

Navigate to http://localhost:5173/admin
Enter your admin email and password
You're in! 🎉

2. Configure Settings

Navigate to ⚙️ Settings and configure:

Site Name - Your CMS name
Site URL - Your production URL
Default Language - Choose your language
Theme - Light/Dark mode
Date Format - YYYY-MM-DD, MM/DD/YYYY, etc.

3. Create Your First Collection

Collections define your content structure (like tables in a database).

Example: Create a "Blog Posts" collection

Navigate to 📚 Collections → + New Collection

Fill in details:

Name: posts
Display Name: Blog Posts
Icon: mdi:post

Add fields:
- Title (text, required)
- Content (richtext)
- Author (relation to users)
- Status (select: draft, published, archived)
- Featured Image (media)
- Published Date (datetime)
Click Save Collection

4. Create Your First Entry

Navigate to 📚 Collections → Blog Posts
Click + New Post

Fill in:

Title: My First Post
Content: Hello, SveltyCMS!
Status: published

Click Save

Congratulations! You've created your first content entry! 🎊

Understanding the Dashboard

Admin Panel Layout

┌─────────────────────────────────────────────┐
│ 🏠 SveltyCMS            [Search] 👤 Admin ▼ │
├──────────┬──────────────────────────────────┤
│          │                                   │
│ Dashboard│   📊 Dashboard Overview           │
│ 📚 Collections                              │
│ 📁 Media │   • System Health                │
│ 👥 Users │   • Recent Content               │
│ 🔌 Widgets   • Online Users                │
│ ⚙️ Settings  • Storage Usage                │
│          │                                   │
└──────────┴──────────────────────────────────┘

Key Sections

Dashboard

System metrics and health
Recent content activity
Online users
Quick actions

Collections

Manage content types
Create/edit/delete entries
Import/export data
View revisions

Media

Upload files
Organize in folders
Process images
Manage assets

Users

Create user accounts
Assign roles
Manage permissions
View activity

Widgets

Install extensions
Activate/deactivate
Configure settings
Browse marketplace

Settings

System configuration
Theme preferences
Email setup
Cache management

Working with the API

SveltyCMS provides both REST and GraphQL APIs.

REST API Example

Fetch all posts:

const response = await fetch('http://localhost:5173/api/collections/posts', {
	credentials: 'include'
});
const { data } = await response.json();
console.log(data);

Create a new post:

const response = await fetch('http://localhost:5173/api/collections/posts', {
	method: 'POST',
	credentials: 'include',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({
		title: 'New Post',
		content: 'Content here...',
		status: 'published'
	})
});

GraphQL Example

Query posts:

query GetPosts {
	posts(limit: 10) {
		_id
		title
		content
		author {
			username
		}
		createdAt
	}
}

Access GraphQL Playground:

http://localhost:5173/api/graphql

Common Workflows

Workflow 1: Blog Setup

Create Collections
- Posts (title, content, author, status)
- Categories (name, slug, description)
- Tags (name, slug)
Set Up Relationships
- Posts → Users (author)
- Posts → Categories (many-to-many)
- Posts → Tags (many-to-many)
Create Content
- Add categories
- Add tags
- Write posts
Configure Frontend
- Query posts via API
- Display on your website
- Implement pagination

Workflow 2: E-Commerce Product Management

Create Collections
- Products (name, price, description, sku)
- Categories (name, parent)
- Inventory (product_id, quantity, location)
Add Media
- Upload product images
- Organize in folders
- Link to products
Manage Products
- Create product entries
- Assign categories
- Upload images
- Track inventory

Workflow 3: Multi-Language Site

Enable Multi-Language
- Go to Settings → Languages
- Add languages (English, German, French, etc.)
Create Translatable Fields
- Mark fields as "translatable"
- Enter content in each language

Query by Language

fetch('/api/collections/posts?lang=de');

User Roles & Permissions

SveltyCMS includes built-in role-based access control.

Default Roles

Admin

Full system access
Manage users and settings
Install widgets
All permissions

Editor

Create/edit/delete content
Upload media
Manage own posts
Cannot access system settings

Contributor

Create/edit own content
Upload media
Cannot publish content
Limited access

Viewer

Read-only access
View published content
No edit permissions

Creating Custom Roles

Navigate to ⚙️ Settings → Roles & Permissions
Click + New Role
Define permissions:
- content:read
- content:write
- content:delete
- media:read
- media:write
- user:read
- etc.

Extending with Widgets

Widgets add functionality to SveltyCMS.

Core Widgets (Pre-installed)

Media Upload - File management
Rich Text Editor - WYSIWYG editing
Image Gallery - Image display
User Management - User CRUD
Collection Builder - Dynamic schemas

Installing Widgets

Navigate to 🔌 Widgets → Marketplace
Browse available widgets
Click Install on desired widget
Activate the widget
Configure settings

Creating Custom Widgets

See Widget Development Guide for details.

Next Steps

Now that you're set up, explore these topics:

Content Management

Security

Development

Deployment

Getting Help

Documentation

Community

Contributing

Quick Reference

Useful Commands

# Development
npm run dev          # Start dev server
npm run build        # Build for production
npm run preview      # Preview production build

# Database
npm run seed         # Seed initial data
npm run migrate      # Run migrations

# Testing
npm run test         # Run tests
npm run test:e2e     # End-to-end tests

# Maintenance
npm run lint         # Lint code
npm run format       # Format code
npm run typecheck    # Type checking

Default URLs

Admin: http://localhost:5173/admin
API: http://localhost:5173/api
GraphQL: http://localhost:5173/api/graphql
Frontend: http://localhost:5173

Important Files

config/private.ts - Database connection configuration (created during setup)
config/collections/ - Collection schemas
src/routes/api/ - API endpoints
src/databases/ - Database adapters
Roles are managed in the database via /config/accessManagement

Ready to build something amazing? 🚀

Start creating content, or dive deeper into the full documentation.

FilesExpand file tree

getting-started.mdx

Latest commit

History