Custom code regions in TypeScript

To enable custom code regions for TypeScript SDKs, update the project’s .speakeasy/gen.yaml file as follows:

.speakeasy/gen.yaml


configVersion: 2.0.0
generation:
  # ...
typescript:
  # ...
+ enableCustomCodeRegions: true

Full example

The Speakeasy examples repository includes a full TypeScript SDK that uses custom code regions.

Regions

Below are the available code regions in TypeScript SDKs.

SDK classes

TypeScript SDK classes can have two code regions:

// #region imports: The imports region allows you to add imports to an SDK file needed for custom methods and properties. It must be located at the top of the file alongside generated imports.
// #region sdk-class-body: The class-body region allows you to add custom methods and properties to an SDK class. It must be located in the body of a TypeScript SDK class alongside generated methods and properties.

Managing dependencies

When adding custom code that requires external packages, configure these dependencies in the .speakeasy/gen.yaml file to prevent them from being removed during SDK regeneration. Use the additionalDependencies configuration to specify package dependencies:

.speakeasy/gen.yaml


typescript:
  additionalDependencies:
    dependencies:
      marked: "^5.0.0"
      dompurify: "^3.0.0"
    devDependencies:
      "@types/dompurify": "^3.0.0"
    peerDependencies:
      react: "^18.0.0"

This ensures that dependencies persist across SDK regenerations and are properly included in the generated package.json.

src/sdk/todos.ts


/*
 * Code generated by Speakeasy (https://speakeasy.com). DO NOT EDIT.
 */
 
import { todosGetOne } from "../funcs/todosGetOne.js";
import { ClientSDK, RequestOptions } from "../lib/sdks.js";
import * as operations from "../models/operations/index.js";
import { unwrapAsync } from "../types/fp.js";
 
// #region imports
import DOMPurify from "dompurify";
import marked from "marked";
import type { Todo } from "../models/components/todo.js";
// #endregion imports
 
export class Todos extends ClientSDK {
  // #region sdk-class-body
  async renderTodo(id: string): Promise<string> {
    const todo = await this.getOne({ id });
 
    const html = await marked.parse(`# ${todo.title}\n\n${todo.description}`, {
      async: true,
    });
 
    return DOMPurify.sanitize(html);
  }
  // #endregion sdk-class-body
 
  async getOne(
    request: operations.TodosGetOneRequest,
    options?: RequestOptions,
  ): Promise<operations.TodosGetOneResponse> {
    return await unwrapAsync(todosGetOne(this, request, options));
  }
}

Last updated on September 16, 2025