> ## 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.

# Quickstart

> Integrate Grunt into CKEditor 5 in three steps

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](https://github.com/Altua/Samples/tree/main/CKEditor)

```bash theme={null}
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:

```text theme={null}
https://pkgs.dev.azure.com/altua/Oak/_packaging/Integrations/npm/registry/
```

Configure `.npmrc`:

```text theme={null}
@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:

```bash theme={null}
npm install @grunt/ckeditor5-grunt ckeditor5 ckeditor5-premium-features
```

Register `Grunt` in your CKEditor configuration:

```ts theme={null}
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:

```ts theme={null}
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:

```text theme={null}
grunt.js
_framework/*
```

When you use npm, runtime assets are under:

```text theme={null}
node_modules/@grunt/ckeditor5-grunt/_framework
```

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

## Next steps

<CardGroup cols={2}>
  <Card title="Architecture overview" icon="diagram-project" href="/ckeditor-integration/overview">
    Understand the three-layer design before expanding the integration.
  </Card>

  <Card title="Theme configuration" icon="asterisk" href="/ckeditor-integration/theme">
    Apply your product theme automatically to inserted Grunt objects.
  </Card>

  <Card title="Storage pipeline guide" icon="database" href="/ckeditor-integration/storage-pipeline">
    Implement a production-ready pipeline with your backend API.
  </Card>

  <Card title="Runtime assets guide" icon="file-code" href="/ckeditor-integration/runtime-assets">
    Validate hosting and runtime file delivery for WASM.
  </Card>

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