> ## Documentation Index
> Fetch the complete documentation index at: https://docs.grunt.io/llms.txt
> Use this file to discover all available pages before exploring further.

# CKEditor integration

> Add Grunt charts, tables, and Gantt editing to your CKEditor 5 application

Use this documentation to integrate the Grunt CKEditor plugin into your own product.

You are not building Grunt itself. You are wiring Grunt into your existing CKEditor setup with your own storage and deployment model.

## What you get

* Chart, table, and Gantt insertion in CKEditor
* Inline editing controls in the editor
* A storage pipeline contract you connect to your backend
* WebAssembly runtime rendering in your application

## Before you start

* A CKEditor 5 integration in your app
* A `GRUNT_PACKAGE_TOKEN` from Grunt
* A backend endpoint for Grunt object commit/SVG persistence

## Start from the sample

Use the official sample as your baseline implementation:

* [Altua CKEditor sample](https://github.com/Altua/Samples/tree/main/CKEditor)

```bash theme={null}
git clone https://github.com/Altua/Samples.git
cd Samples/CKEditor
```

## Recommended implementation path

<CardGroup cols={3}>
  <Card title="Quickstart" icon="rocket" href="/ckeditor-integration/quickstart">
    Follow the full setup sequence from package auth to runtime assets.
  </Card>

  <Card title="Installation and setup" icon="download" href="/ckeditor-integration/installation">
    Configure package feed auth and register Grunt in CKEditor.
  </Card>

  <Card title="Theme configuration" icon="asterisk" href="/ckeditor-integration/theme">
    Apply a Grunt theme with `setTheme(modelElement, theme)`.
  </Card>

  <Card title="Storage pipeline" icon="database" href="/ckeditor-integration/storage-pipeline">
    Implement `saveCommit`, `saveSvg`, `getCommit`, and `getSvg` in your API.
  </Card>

  <Card title="Runtime assets" icon="file-code" href="/ckeditor-integration/runtime-assets">
    Serve `grunt.js` and `_framework/*` correctly in production.
  </Card>

  <Card title="Toolbar and production checklist" icon="list-check" href="/ckeditor-integration/toolbar-and-production">
    Validate toolbar actions and production readiness.
  </Card>

  <Card title="Architecture overview" icon="diagram-project" href="/ckeditor-integration/overview">
    Understand how plugin, runtime, and storage layers fit together.
  </Card>
</CardGroup>