Using CKEditor 5 with AI coding agents

The official CKEditor skills teach your AI coding agent how to work with CKEditor 5. There are three skills:

• ckeditor adds CKEditor 5 to a project: it selects an installation method, wires up the editor, maps features to your use case, loads the styles, and sets the license key.
• ckeditor-update updates an existing CKEditor 5 integration to the latest version or to a version that you name.
• ckeditor-bundle adds the scripts that build and upload the editor bundle for CKEditor Cloud Services. Features such as document storage and the Server-side Editor API need this bundle.

Install them with one command:

npx skills add ckeditor/skills

Your agent loads the correct skill automatically, based on what you ask it to do.

The ckeditor skill loads when you ask your agent to install, set up, configure, or troubleshoot CKEditor 5. It will:

• Choose an install method – npm, CDN, or ZIP.
• Wire up the editor in vanilla JavaScript or an official React, Angular, or Vue wrapper.
• Configure plugins, the toolbar, content styles, and the UI language.
• Set the license key and unlock premium features.
• Send version-specific questions to the live documentation instead of guessing.

The ckeditor-update skill loads when you ask your agent to update, upgrade, or migrate CKEditor 5, for example: “Update CKEditor 5 to the latest version.” You can also name the version you want. It will:

• Find the installed version, the installation method, and the framework wrappers, and record what the editor does today.
• Read the update guides for every version between yours and the target one, from the oldest to the newest.
• Apply the changes to your code, including a move off legacy installation methods, such as predefined builds, when the target version needs it.
• Put all CKEditor 5 packages on the same version and update the framework wrappers.
• Verify that the editor still has the same features and content, and report every change with the guide section that made it necessary.

Review the changes before you commit them. The skill does not cover downgrades or migration from CKEditor 4. For CKEditor 4, see the Migration from CKEditor 4 guide.

The ckeditor-bundle skill loads when your project needs an editor bundle for CKEditor Cloud Services. Document storage, import and export, and the Server-side Editor API need this bundle. The skill also loads when the editor changes and the bundle must follow, or when the upload of a bundle fails. It will:

• Move the editor into one module that both the application and the bundle use.
• Decide which custom plugins Cloud Services runs, and split a plugin that mixes content with browser code.
• Add a bundle build for the bundler of your project, and make the test data from samples of your content.
• Check the bundle and the test data in the same way as Cloud Services, before the upload.
• Add an upload script and the build:bundle, upload:bundle, and release:bundle scripts for your CI.

The skill uploads the bundle only with your approval, and the upload script reads the credentials from environment variables. Review the changes before you commit them.

The skills use the open Agent Skills format, so they work in any agent that supports it – including Claude Code, Cursor, Codex, OpenCode, GitHub Copilot, Windsurf, Gemini, Cline, AMP, Zed, and more.

Besides skills.sh, which installs the skills into every supported agent it detects, you have two more options.

/plugin marketplace add ckeditor/skills
/plugin install ckeditor@ckeditor

Copy the skills/ckeditor/, skills/ckeditor-update/, and skills/ckeditor-bundle/ directories from the ckeditor/skills repository into your agent’s skills directory. For example, use .claude/skills/ckeditor/, .claude/skills/ckeditor-update/, and .claude/skills/ckeditor-bundle/.

The skills work on their own, but they are more effective when your agent can search the live documentation. The hosted CKEditor 5 documentation MCP server (powered by Kapa.ai) gives agents semantic search over the docs, returned as relevant snippets with source links.

• Endpoint: https://ckeditor5.mcp.kapa.ai
• Authentication: Google or GitHub SSO, which Kapa uses to control abuse of the MCP server.

The server requires a one-time sign-in. The first time your agent calls it, a browser window opens – sign in with your Google or GitHub account, then retry the question. If no prompt appears in Claude Code, run /mcp, select ckeditor5, and choose Authenticate.

claude mcp add --transport http --scope project ckeditor5 https://ckeditor5.mcp.kapa.ai

{
	"mcpServers": {
		"ckeditor5": {
			"type": "http",
			"url": "https://ckeditor5.mcp.kapa.ai"
		}
	}
}

Add it to .cursor/mcp.json:

{
	"mcpServers": {
		"ckeditor5": {
			"url": "https://ckeditor5.mcp.kapa.ai"
		}
	}
}

codex mcp add ckeditor5-docs --url https://ckeditor5.mcp.kapa.ai

[mcp_servers.ckeditor5-docs]
url = "https://ckeditor5.mcp.kapa.ai"
startup_timeout_sec = 20
tool_timeout_sec = 60
enabled = true

Add it to opencode.json:

{
	"$schema": "https://opencode.ai/config.json",
	"mcp": {
		"ckeditor5-docs": {
			"type": "remote",
			"url": "https://ckeditor5.mcp.kapa.ai",
			"enabled": true
		}
	}
}

For any other agent, point its MCP client at the streamable HTTP endpoint above and authenticate with Google or GitHub SSO.

Even without the MCP server, agents can read the documentation efficiently: every page of the latest documentation is also served as clean, token-friendly markdown, in two ways. Replace .html with .md in the page URL, for example:

https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/editor-types.md

Alternatively, request the original .html page with an Accept: text/markdown header and the server returns the markdown version.

To find a page, start from the index of the project you need. Each one lists every page with its summary, and every markdown page links back to it:

• https://ckeditor.com/docs/ckeditor5/llms.txt – the CKEditor 5 guides.
• https://ckeditor.com/docs/ckeditor5/latest/api/llms.txt – the API reference, which is too large to share a file with the guides.
• https://ckeditor.com/docs/cs/llms.txt – CKEditor Cloud Services.
• https://ckeditor.com/docs/ckbox/llms.txt – CKBox.

For bulk access, https://ckeditor.com/docs/llms-full.txt bundles all the guides in a single plain-text file.

Found wrong, stale, or missing guidance? Open an issue in the ckeditor/skills repository. Agents are encouraged to file these when reality contradicts the skills.