Quickstart

Set up Grunt for CKEditor 5, wire your API pipeline, and verify production runtime assets.

Step 1: install and register Grunt

Start from the sample project:

Altua CKEditor sample

git clone https://github.com/Altua/Samples.git
cd Samples/CKEditor

The Grunt npm package is private and must be downloaded from the Azure Artifacts registry:

https://pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/registry/

Configure .npmrc:

@grunt:registry=https://pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/registry/
always-auth=true
; begin auth token
//pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/registry/:username=altua
//pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/registry/:_password=[GRUNT_PACKAGE_TOKEN]
//pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/:username=altua
//pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/:_password=[GRUNT_PACKAGE_TOKEN]
//pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

[GRUNT_PACKAGE_TOKEN] is the package token value provided by Grunt. Install dependencies:

npm install @grunt/ckeditor5-grunt ckeditor5 ckeditor5-premium-features

import {
  ClassicEditor,
  Essentials,
  Paragraph,
  Bold,
  Italic
} from "ckeditor5";

import Grunt from "@grunt/ckeditor5-grunt/grunt";

ClassicEditor.create(document.querySelector("#editor"), {
  plugins: [Essentials, Paragraph, Bold, Italic, Grunt],
  toolbar: [
    "undo",
    "redo",
    "|",
    "insert-grunt-chart",
    "insert-grunt-gantt",
    "insert-grunt-table",
    "|",
    "gruntEditor"
  ]
});

Step 2: connect your API storage pipeline

Do not use local storage in production. Implement your own GruntObjectStoragePipeline and register it with:

editor.plugins.get("Grunt").setPipeline(pipeline);

Your custom pipeline should handle:

saveCommit(key, commit)
saveSvg(key, svg)
getCommit(key)
getSvg(key)

Use your backend API for authentication, tenancy, and persistence rules.

Step 3: serve runtime assets

Ensure these files are publicly accessible:

grunt.js
_framework/*

When you use npm, runtime assets are under:

node_modules/@grunt/ckeditor5-grunt/_framework

Make sure your build pipeline copies these assets and serves correct MIME types.

Next steps

Architecture overview

Understand the three-layer design before expanding the integration.

Theme configuration

Apply your product theme automatically to inserted Grunt objects.

Storage pipeline guide

Implement a production-ready pipeline with your backend API.

Runtime assets guide

Validate hosting and runtime file delivery for WASM.

Production checklist

Verify toolbar actions and production readiness.

Get started

Core concepts

Build integration

Step 1: install and register Grunt

Step 2: connect your API storage pipeline

Step 3: serve runtime assets

Next steps

Architecture overview

Theme configuration

Storage pipeline guide

Runtime assets guide

Production checklist

​Step 1: install and register Grunt

​Step 2: connect your API storage pipeline

​Step 3: serve runtime assets

​Next steps

Architecture overview

Theme configuration

Storage pipeline guide

Runtime assets guide

Production checklist

Step 1: install and register Grunt

Step 2: connect your API storage pipeline

Step 3: serve runtime assets

Next steps