---
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**

Structured components — images, quotes, buttons, CTAs — inserted directly inside CKEditor, rendered through the same Twig components as the Matrix Builder. Editors write in a familiar WYSIWYG interface and add rich components inline. Developers keep full control over markup, consistency, and performance.

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

   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=1777035501)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/roman-synkevych-vXInUOv1n84-unsplash.jpg?v=1777035501) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/michael-fortsch-AA5sf7WTv10-unsplash.jpg?v=1777035499)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/michael-fortsch-AA5sf7WTv10-unsplash.jpg?v=1777035501) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-4.jpg?v=1777035499)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-4.jpg?v=1777035500) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-3.jpg?v=1777035499)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-3.jpg?v=1777035500) [ ![](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-2.jpg?v=1777035500)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-2.jpg?v=1777035500) [ ![Etiam Egestas Risus Amet](https://craft-kit.dev/uploads/transforms/_768xAUTO_crop_center-center_85_none_ns/Testimage-1.jpg?v=1777035500)  ](https://craft-kit.dev/uploads/transforms/_1600xAUTO_crop_center-center_90_none_ns/Testimage-1.jpg?v=1777035500) 

  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)