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

# Installation and setup

> Install Grunt for CKEditor 5 and configure the editor plugins and toolbar

## Install packages

The Grunt package is hosted in a private Azure Artifacts feed and requires authentication.

## Recommended starting point

Start from the official sample:

* [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
```

Create or update your project `.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.

Then install the required dependencies:

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

## Configure CKEditor

Add `Grunt` to your plugin list and enable Grunt toolbar actions.

```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"
  ]
});
```

This setup enables Grunt UI actions in CKEditor. Persistence comes from your storage pipeline configuration.

<Card title="Next: storage pipeline" icon="arrow-right" href="/ckeditor-integration/storage-pipeline">
  Connect Grunt object persistence to your backend API.
</Card>