---
title: CKE Builder
date: 2025-10-02T13:05:00+02:00
author: admin
canonical_url: "https://craft-kit.dev/cke-builder"
section: Pages
---
# **CKEditor Builder**

Similar to the Matrix Builder, but components are inserted directly inside the CKEditor. This approach demonstrates how **structured content and rich text can coexist seamlessly**, giving editors more creative flexibility while maintaining a clean, controlled data model.

Each component — such as images, quotes, buttons, or call-to-actions — can be added inline within the text and [rendered](https://craft-kit.dev/blog/my-perfect-craft-cms-starter-setup) through the same Twig components used in the Matrix Builder. This allows editors to create visually rich pages directly inside the editor while developers retain full control over markup, consistency, and performance.

Perfect for content teams who prefer writing in a familiar WYSIWYG interface but still want the power of reusable, design-consistent components.

  ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/CKEBuilder.png?v=1773428544)  

   What is the CKEditor Builder?  The CKEditor Builder lets editors insert predefined components into rich-text fields without writing HTML. It keeps content structured and consistent while still giving editors flexibility.

 

  Why combine CKEditor with reusable blocks?  By embedding predefined blocks (images, CTAs, quotes, embeds), you get the best of two worlds: editorial freedom + strict design control. Every block renders the same way across all pages.

 

  How does it work in Craft Kit?  The builder exposes a curated list of components directly inside CKEditor via dropdowns. When selected, the editor inserts a clean placeholder tag—Craft renders the final Twig component automatically.

 

  When should you use CKEditor Builder blocks?  Use blocks when you need rich, structured content inside long-form text—articles, guides, landing pages, blog posts. They keep the content maintainable and scalable, even after years of editing.

 

 

 

 [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/roman-synkevych-vXInUOv1n84-unsplash.jpg?v=1773407199)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/roman-synkevych-vXInUOv1n84-unsplash.jpg?v=1773428545) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/michael-fortsch-AA5sf7WTv10-unsplash.jpg?v=1773407901)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/michael-fortsch-AA5sf7WTv10-unsplash.jpg?v=1773428545) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-4.jpg?v=1773407157)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-4.jpg?v=1773407156) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-3.jpg?v=1773407155)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-3.jpg?v=1773407155) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1773407152)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-2.jpg?v=1773407151) [ ![Etiam Egestas Risus Amet](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-1.jpg?v=1773407149)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-1.jpg?v=1773407150) 

  Open gallery (6 images)  

 

## Cards

## 🚀 Datastar Blog

A dynamic blog built with Craft DataStar. Features live filtering, pagination, and instant content updates without page reloads.

 

 [Read more](https://craft-kit.dev/blog-hypermedia-datastar) 

 

## 🗺️ Datastar Map

Dynamic, data-driven maps built with Craft CMS, Datastar, and Leaflet. Features real-time marker updates, category filters, and clustering — all rendered directly in Twig.

 

 [Read more](https://craft-kit.dev/map) 

 

 

 

## Features

- ⚡ 
    
     Hypermedia-first
    
     No JavaScript frameworks. Datastar handles reactivity via SSE — server stays the source of truth.
- 🧱 
    
     Matrix Content Builder
    
     Flexible page layouts with reusable blocks. Mix and match sections without touching code.
- 🎨 
    
     Tailwind CSS
    
     Utility-first styling with CSS custom properties, oklch colors, and zero config overhead.
- 🛠️ 
    
     Production-ready Setup
    
     Vite, DDEV, and Craft CMS 5 pre-configured and ready to build on from day one.
 
 

 Use these components in your own project!

 [👉 Download Craft Kit](https://github.com/handplant/craftcms-lazy-starter-kit)