# How to develop a CMS in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 30-35 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Build a content management system in Bubble by creating Content, Category, and Author data types with a WYSIWYG editor for rich text. Implement publish/draft states, media library for images, role-based access (editor vs admin), and a public-facing content display page. The CMS backend uses a dashboard with content listing, inline editing, and status management workflows.

## Build a CMS in Bubble

This tutorial shows you how to create a content management system for managing blog posts, articles, and pages. You will build the data model, editor interface, publishing workflow, and public display.

## Before you start

- A Bubble account with user authentication
- A rich text editor plugin installed
- Basic understanding of Data Types and workflows

## Step-by-step guide

### 1. Create CMS Data Types

Create 'Content' with: title (text), body (text — for rich text HTML), slug (text), excerpt (text), featured_image (image), category (Category), author (User), status (text: draft/published/archived), published_date (date), seo_title (text), seo_description (text). Create 'Category' with: name, slug, description. Create 'MediaItem' with: file (image/file), title, uploaded_by (User), upload_date.

**Expected result:** CMS data types are ready for content management.

### 2. Build the Content Editor

Create an admin page 'content-editor' with Type of content = Content. Add inputs: title, slug (auto-generated from title), rich text editor plugin for body, Dropdown for category, File Uploader for featured image, Multiline for excerpt, inputs for SEO title and description. Add Save Draft and Publish buttons.

**Expected result:** Editors can create and edit content with rich text formatting.

### 3. Implement Publish/Draft Workflow

Save Draft button: Create or update Content with status = 'draft'. Publish button: Set status = 'published', published_date = Current date/time, and set the slug. Add a Schedule Publish feature: date picker for future publish date, workflow schedules a backend workflow to change status at that time.

**Expected result:** Content can be saved as draft and published immediately or at a scheduled time.

### 4. Build the Content Dashboard

Create 'content-dashboard' page with a Repeating Group of Content sorted by modified date. Show title, status badge (green/yellow/gray), category, author, and date. Add filter dropdowns for status and category. Add action buttons: Edit, Duplicate, Archive, Delete.

**Expected result:** Editors see all content with status indicators and management actions.

### 5. Create the Public Content Display

Create a public 'article' page with Type = Content. Display: title, featured_image, author name, published_date, body (rich text display), and category. Only show published content (add page load check: if status is not 'published', redirect to 404). Add related articles at the bottom.

**Expected result:** Published content displays beautifully on the public-facing page.

## Complete code example

File: `Workflow summary`

```text
DATA TYPES:
- Content: title, body (rich text), slug, excerpt, featured_image, category, author, status (draft/published/archived), published_date, seo_title, seo_description
- Category: name, slug, description, sort_order
- MediaItem: file, title, uploaded_by, upload_date

PAGES:
1. content-dashboard — list all content with filters
2. content-editor — create/edit with rich text
3. media-library — browse and manage uploaded media
4. article (public) — display published content

WORKFLOWS:
1. Save Draft → Create/Update Content with status='draft'
2. Publish → Set status='published', set published_date, set slug
3. Schedule Publish → Schedule backend workflow to publish at future date
4. Archive → Set status='archived'
5. Delete → Delete Content (with confirmation)

ROLES:
- Editor: create/edit own content, submit for review
- Admin: publish, edit all content, manage categories
```

## Common mistakes

- **Not separating draft and published content in public queries** — Users might see unpublished draft content on the website. Fix: Always add the constraint 'status = published' when displaying content publicly.
- **Using plain text instead of a rich text editor** — Plain text cannot handle formatting, images, links, or headings — essential for content creation. Fix: Install a rich text editor plugin like the Rich Text Editor, TinyMCE, or Quill.
- **Not generating SEO-friendly slugs for content** — URLs with unique IDs are ugly and hurt SEO. Clean URLs improve click-through rates. Fix: Auto-generate slugs from titles using the 'Set a thing's slug' action.

## Best practices

- Use a rich text editor plugin for content body editing.
- Implement draft/published/archived status workflow for content lifecycle management.
- Auto-generate SEO-friendly slugs from content titles.
- Add role-based access: editors create, admins publish.
- Include SEO fields (title, description) per content piece.
- Build a media library for reusable images across content.

## Frequently asked questions

### Which rich text editor plugin should I use?

The Bubble Rich Text Editor is free and adequate for basic needs. TinyMCE and Quill plugins offer more features. Choose based on your formatting requirements.

### Can I build a headless CMS with Bubble?

Yes. Use Bubble as the CMS backend (editor + data storage) and serve content via the Data API to a custom frontend built with Next.js or similar.

### How do I handle content versioning?

Create a ContentVersion data type that stores snapshots before each edit. This allows reverting to previous versions.

### Can multiple editors work on content simultaneously?

Bubble does not support real-time collaborative editing. Implement a 'locked by' field to prevent two editors from modifying the same content simultaneously.

### How do I optimize CMS performance with many articles?

Paginate content listings, use Search constraints, and cache popular content. For high-traffic content sites, RapidDev can architect performance-optimized CMS solutions.

### Can I add custom content types beyond articles?

Yes. Create additional Data Types (e.g., Page, Product, FAQ) each with their own fields and editor interfaces.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/develop-a-cms-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/develop-a-cms-in-bubble