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.
Prerequisites
- A Bubble account with user authentication
- A rich text editor plugin installed
- Basic understanding of Data Types and workflows
Step-by-step guide
Create CMS Data Types
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.
Build the Content Editor
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.
Implement Publish/Draft Workflow
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.
Build the Content Dashboard
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.
Create the Public Content Display
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 working example
1DATA TYPES:2- Content: title, body (rich text), slug, excerpt, featured_image, category, author, status (draft/published/archived), published_date, seo_title, seo_description3- Category: name, slug, description, sort_order4- MediaItem: file, title, uploaded_by, upload_date56PAGES:71. content-dashboard — list all content with filters82. content-editor — create/edit with rich text93. media-library — browse and manage uploaded media104. article (public) — display published content1112WORKFLOWS:131. Save Draft → Create/Update Content with status='draft'142. Publish → Set status='published', set published_date, set slug153. Schedule Publish → Schedule backend workflow to publish at future date164. Archive → Set status='archived'175. Delete → Delete Content (with confirmation)1819ROLES:20- Editor: create/edit own content, submit for review21- Admin: publish, edit all content, manage categoriesCommon mistakes when developing a CMS in Bubble.io: Step-by-Step Guide
Why it's a problem: Not separating draft and published content in public queries
How to avoid: Always add the constraint 'status = published' when displaying content publicly.
Why it's a problem: Using plain text instead of a rich text editor
How to avoid: Install a rich text editor plugin like the Rich Text Editor, TinyMCE, or Quill.
Why it's a problem: Not generating SEO-friendly slugs for content
How to avoid: 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.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a CMS in Bubble.io for managing blog posts and articles. I need content types, categories, rich text editing, draft/publish states, and role-based access. How do I structure this?
Create a CMS with Content, Category, and MediaItem data types. Build a content editor with rich text, a dashboard with status filters, and a public article page. Implement draft/publish workflow with scheduled publishing.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation