Back to wontlost.com
Companion tool for VaadinCKEditor

CKEditor Builder

Stop hand-coding CKEditor configurations. Visually configure your editor in minutes with an interactive 7-step wizard, then export production-ready code.

Launch Builder VaadinCKEditor Add-on
Free to use
No account required
CKEditor 5 v47.4.0

7 Steps to a Perfect Editor

The wizard guides you through every aspect of CKEditor configuration, from editor type selection to production-ready code export.

1

Getting Started

Choose a preset (Standard, Full, Minimal) or start from scratch with custom mode.

2

Editor Type

Select from Classic, Inline, Balloon, or BalloonBlock editor styles.

3

Plugin Selection

Browse 70+ free and premium plugins with filtering and dependency auto-resolution.

4

Advanced Config

Configure content security, paste behavior, table options, and more.

5

Toolbar Builder

Drag-and-drop toolbar customization with multi-line and style options.

6

Style & Language

Set theme (auto/light/dark), language, and RTL support.

7

Preview & Export

Live editor preview with code export in Java, TypeScript, or JSON.

Key Features

Everything you need to configure CKEditor 5 without touching JSON or reading API docs.

Multi-Format Code Export

Generate ready-to-paste code in Java (Vaadin), TypeScript, or JSON config — with timestamps and metadata.

70+ Plugin Library

Browse free and premium CKEditor plugins with automatic dependency resolution and compatibility checks.

Drag-and-Drop Toolbar

Visually arrange toolbar items, add separators, and configure multi-line layouts with real-time preview.

Live Editor Preview

See your configured editor in action before exporting. Test all 4 editor types with your selected plugins.

Multi-Language UI

Builder interface available in English, Chinese, French, Spanish, Russian, and Arabic with full RTL support.

Theme & Styling

Auto-detect Vaadin Lumo theme, configure dark mode, and customize toolbar colors and backgrounds.

4 Editor Types Supported

Configure any CKEditor 5 editor variant — each with its own toolbar behavior and editing experience.

Classic Editor

Traditional WYSIWYG with a fixed toolbar above the content area. Best for form-based editing.

Inline Editor

Lightweight in-place editing. Toolbar appears when you focus the editable area.

Balloon Editor

Floating toolbar that appears on text selection. Minimal UI footprint.

BalloonBlock Editor

Block-level toolbar plus inline balloon. Combines block and selection controls.

Export Production-Ready Code

The builder generates code you can copy directly into your project. No manual translation needed.

Java (Vaadin) Recommended
VaadinCKEditor editor =
VaadinCKEditor.create()
.withPreset(STANDARD)
.withType(CLASSIC)
.withTheme(AUTO)
.withLanguage("en")
.build();
TypeScript
import { ClassicEditor }
from 'ckeditor5';
ClassicEditor.create(
element, {
plugins: [...],
toolbar: [...],
})
JSON Config
{
"type": "classic",
"preset": "standard",
"plugins": [...],
"toolbar": [...],
"theme": "auto"
}

Try the CKEditor Builder Now

Configure your perfect CKEditor 5 instance in minutes. Free, no account required.

Launch Builder View Source on GitHub

Part of the VaadinCKEditor ecosystem by wontlost