Build a full content management system in Bubble with content types, a WYSIWYG editor, image management, scheduling, and role-based editorial workflows. This tutorial covers creating an admin CMS interface for managing blog posts, pages, and media that renders on your public-facing site.
Overview: Building a CMS in Bubble
A CMS lets your team create, edit, and publish content without touching the app's design. This tutorial builds an admin-focused content management system with a rich text editor, media library, draft/publish states, and editorial roles.
Prerequisites
- A Bubble account with user authentication and roles
- The Rich Text Editor element or a plugin like Quill/TinyMCE
- Basic understanding of Data Types, Workflows, and privacy rules
Step-by-step guide
Design the CMS data model
Design the CMS data model
Create Data Types: 'Article' with title (text), slug (text), body (text — stores rich text HTML), excerpt (text), cover_image (image), category (Option Set), status (Option Set: Draft/InReview/Published), author (User), published_date (date), seo_title (text), seo_description (text). Create 'MediaItem': file (file), name (text), uploaded_by (User), tags (list of text).
Expected result: CMS data types with editorial workflow fields are ready.
Build the article editor page
Build the article editor page
Create an 'admin-editor' page (restricted to admin/editor roles). Add inputs for title, slug (auto-generated from title), excerpt, category dropdown, and cover image uploader. Add a Rich Text Editor element for the body content. Add a Save Draft button (creates/updates Article with status = Draft) and a Publish button (sets status = Published, published_date = Current date/time).
Expected result: Admins can create and edit articles with rich text formatting.
Create the article listing and management page
Create the article listing and management page
Build an 'admin-articles' page with a Repeating Group showing all Articles sorted by date. Each row displays title, author, status badge, and published date. Add filter tabs: All, Drafts, Published. Add Edit and Delete buttons per row. The Edit button navigates to admin-editor with the article's ID.
Expected result: Admins can browse, filter, edit, and delete all articles.
Implement the editorial workflow
Implement the editorial workflow
Add a Submit for Review button that changes status to InReview and notifies editors. Editors see InReview articles in their queue and can Approve (status → Published) or Request Changes (status → Draft with a feedback note). Use privacy rules so writers can only edit their own drafts while editors can approve any article.
Pro tip: Add an 'editor_notes' field for feedback when requesting changes on submitted articles.
Expected result: A multi-step editorial workflow with roles for writers and editors.
Render CMS content on public pages
Render CMS content on public pages
Create a dynamic 'article' page that reads the slug from the URL. Data source: Do a search for Article where slug = Get slug from page URL and status = Published. Display the title in an H1, cover image, author name, published date, and body content in a Rich Text element (which renders HTML safely). Add meta tags using the SEO fields.
Expected result: Published articles display on public-facing pages with proper formatting and SEO metadata.
Build the media library
Build the media library
Create an 'admin-media' page with a file uploader that creates MediaItem records. Display all media in a grid Repeating Group with thumbnails. Add a search bar filtering by name or tags. When editing an article, add a 'Insert Image' button that opens the media library in a popup — clicking an image inserts its URL into the Rich Text Editor.
Expected result: A centralized media library for managing and inserting images across articles.
Complete working example
1CMS — ARCHITECTURE SUMMARY2============================34DATA TYPES:5 Article: title, slug, body (HTML), excerpt, cover_image,6 category, status (Draft/InReview/Published),7 author, published_date, seo_title, seo_description8 MediaItem: file, name, uploaded_by, tags910ROLES:11 Writer: create articles, edit own drafts, submit for review12 Editor: review submitted articles, approve/reject, publish13 Admin: full access to all content and settings1415EDITORIAL WORKFLOW:16 Writer creates → Draft17 Writer submits → InReview18 Editor reviews → Published or → Draft (with notes)1920PAGES:21 admin-articles — Article listing with filters22 admin-editor — Rich text editor with save/publish23 admin-media — Media library grid24 article (public) — Dynamic page rendering published content2526SEO:27 Each article has seo_title and seo_description28 Dynamic meta tags set on the public article pageCommon mistakes when building a CMS in Bubble
Why it's a problem: Not sanitizing rich text HTML before display
How to avoid: Use Bubble's Rich Text element for display — it sanitizes HTML automatically
Why it's a problem: Generating slugs with special characters
How to avoid: Auto-generate slugs by converting title to lowercase, replacing spaces with hyphens, and removing special characters
Why it's a problem: Not restricting the admin pages to authorized roles
How to avoid: Add Page is loaded redirects: When Current User's role is not admin/editor → Go to index
Best practices
- Auto-generate URL slugs from article titles
- Use an editorial workflow with draft/review/publish states
- Restrict admin pages with role-based redirects
- Add SEO fields for custom meta titles and descriptions
- Build a media library for centralized image management
- Display rich text content using Bubble's Rich Text element for safe HTML rendering
- Schedule articles for future publication using a backend workflow
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a CMS in Bubble.io with a rich text editor, editorial workflow (draft/review/publish), media library, and public article pages with SEO. Can you design the data model and admin interface?
Build a content management system. Create Article and MediaItem data types. Build an admin editor with rich text, an article listing page, editorial workflow with draft/review/publish states, and public article pages.
Frequently asked questions
Can I schedule articles for future publication?
Yes. Add a scheduled_date field. Use a recurring backend workflow that checks for articles with scheduled_date <= now and status = Draft, then changes them to Published.
How do I add categories to the CMS?
Create a Category Option Set or Data Type. Add a category field on Article. Display categories as filter tabs on listing pages and as navigation on the public site.
Can multiple writers collaborate on one article?
Not simultaneously in the editor. Use a check-out system: when a writer opens an article for editing, set an 'editing_by' field to block others until they save.
How do I add comments to articles?
Create a Comment data type linked to Article. Display comments on the public article page and add moderation tools in the admin.
Can I version articles?
Create an ArticleVersion data type that stores snapshots of body, title, and date. Save a version each time the article is published.
Can RapidDev build a custom CMS?
Yes. RapidDev builds content management systems with advanced features like version history, multi-language support, and custom content workflows.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation