Skip to main content
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: 
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
Register Grunt in your CKEditor configuration: 
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.