TypeScript Types

CloudCannon provides TypeScript type definitions for JavaScript and TypeScript configuration files, enabling autocomplete and type checking in your IDE. These types are also useful for creating tooling and working with LLMs.

Configuration Types#

The @cloudcannon/configuration-types package is built with Zod, a TypeScript-first schema validation library. This means the schemas can be used for more than just type definitions — you can use them for runtime validation, JSON Schema generation, and integration with the broader Zod ecosystem.

Install the package:

npm install --save-dev @cloudcannon/configuration-types

Use JSDoc annotations in JavaScript files for autocomplete:

/** @type {import('@cloudcannon/configuration-types').Configuration} */
module.exports = {
  // Your configuration with full autocomplete
};

Or use TypeScript directly:

import type { Configuration } from '@cloudcannon/configuration-types';

const config: Configuration = {
  // Your configuration with full autocomplete
};

export default config;

Available Types

The package exports the following types:

• Configuration — CloudCannon configuration file
• Routing — Routing file configuration
• InitialSiteSettings — Initial site settings file configuration

The source code is available on GitHub.

Visual Editor API Types#

For the CloudCannon Visual Editor API, the @cloudcannon/visual-editor-api package provides TypeScript declarations.

npm install --save-dev @cloudcannon/visual-editor-api

Use these articles to implement Visual Editor API v1:

• What is the Visual Editor API?
• Initialize the Visual Editor API
• Use TypeScript with the Visual Editor API

For an end-to-end workflow, follow Build custom Visual Editor integrations.

If you are building internal tooling, use Visual Editor API v1 types to create reusable helpers for file updates, collection audits, and editor automation flows.