Skip to main content
Integrate Grunt into CKEditor 5 to enable rich charts, tables, and Gantt diagrams powered by the Grunt WebAssembly runtime. The CKEditor integration provides:
  • Chart, table, and Gantt insertion
  • Inline editing UI
  • Layout controls like wrap, break, and alignment
  • A pluggable object storage pipeline
  • WebAssembly-based rendering

​
Integration architecture

The integration has three layers.

​
1. CKEditor plugin layer

The Grunt CKEditor plugin:
  • Registers editing behavior
  • Adds toolbar buttons
  • Inserts and manages Grunt objects
  • Delegates persistence to your storage pipeline
Use this API to configure storage: 
editor.plugins.get("Grunt").setPipeline(pipeline);

​
2. WebAssembly runtime

Grunt rendering runs inside a WebAssembly runtime built with Avalonia. The runtime:
  • Renders charts and diagrams
  • Handles resizing and editing
  • Is bundled as grunt.js
  • Requires _framework/* runtime assets
Your app must serve these files over HTTP.

​
3. Storage pipeline

Grunt does not enforce a storage model. You implement a custom pipeline that talks to your backend API. This model fits:
  • SaaS platforms
  • Multi-tenant systems
  • Versioned documents
  • Authenticated APIs
  • Server-side persistence

Continue to installation

Install packages and register the Grunt plugin in CKEditor.