--- title: "TypeScript Delivery SDK API Reference" description: "Reference guide for Contentstack's TypeScript Delivery SDK: Explore features and functions for seamless content delivery in your projects" url: "https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/typescript/reference" product: "Contentstack" doc_type: "guide" audience: - developers - admins version: "current" last_updated: "2026-07-24" --- # TypeScript Delivery SDK API Reference ## TypeScript Delivery SDK API Reference ## Overview Contentstack offers the TypeScript Delivery SDK for building applications. Additionally, the SDK supports creating applications for Node.js and React Native environments. **Additional Resource**: To know more about the TypeScript Delivery SDK, refer to the [About TypeScript Delivery SDK](/docs/developers/sdks/content-delivery-sdk/typescript/about-typescript-delivery-sdk) and [Get Started with TypeScript Delivery SDK](/docs/developers/sdks/content-delivery-sdk/typescript/get-started-with-typescript-delivery-sdk) documentation. ## Contentstack The Contentstack module contains the instance of a stack. To import Contentstack, refer to the code below: ``` import contentstack from '@contentstack/delivery-sdk'; ``` ## Contentstack | TypeScript Delivery SDK | Contentstack The Contentstack module in the TypeScript Delivery SDK holds the stack instance and is the entry point for initializing access to your Contentstack content. ## Stack A [stack](/docs/developers/set-up-stack/about-stack) is a repository or a container that holds all the [entries](/docs/content-managers/author-content/about-entries)/[assets](/docs/content-managers/working-with-assets/about-assets) of your site. It allows multiple users to [create](/docs/content-managers/working-with-entries/create-an-entry), [edit](/docs/content-managers/working-with-entries/edit-an-entry), [approve](/docs/content-managers/use-workflows/send-an-entry-for-publish-or-unpublish-approval), and [publish](/docs/content-managers/publish-content) their content within a single space. The stack function initializes an instance of the Stack. To initialize a stack execute the following code: ``` import contentstack from '@contentstack/delivery-sdk'const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" }); ``` ## LivePreviewConfig Configuration settings to enable live preview functionality and fetch real-time content data. Specifies whether to enable the live preview feature. Specifies the host domain used to retrieve live preview content. Token required to fetch live preview content from the stack. ## Plugins When creating custom plugins, through this request, you can pass the details of your custom plugins. This facilitates their utilization in subsequent requests when retrieving details. To initializing a stack with plugins, refer to the code snippet below: ``` // custom class for pluginclass CrossStackPlugin { onRequest (request) { // add request modifications return request } async onResponse (request, response, data) { // add response modifications here return response }}const Stack = Contentstack.stack({ api_key, delivery_token, environment, plugins: [ new CrossStackPlugin(), ]}); ``` ## Asset The Asset method by default creates an object for all assets of a stack. To retrieve a single asset, specify its UID. ``` Example: const asset = stack.asset(); // For collection of asset // OR const asset = stack.asset('assetUid'); // For a single asset with uid 'assetUid' ``` UID of the asset ## ContentType The ContentType method retrieves all the content types of a stack. To retrieve a single contenttype, specify its UID. ``` Example: const contentType = stack.contentType(); // For collection of contentType // OR const contentType = stack.contentType('contentTypeUid'); // For a single contentType with uid 'contentTypeUid' ``` UID of the content type ## setLocale The setLocale method sets the locale of the API server. ``` Example: stack.setLocale('en-155'); ``` Enter the locale code ## sync The sync method syncs your Contentstack data with your app and ensures that the data is always up-to-date by providing delta updates. ``` Example: For initializing sync:Stack.sync();For initializing sync with entries of a specific locale:Stack.sync({ 'locale': 'en-us'}); For initializing sync with entries published after a specific date:Stack.sync({ 'start_date': '2018-10-22'}); For initializing sync with entries of a specific content type:Stack.sync({ 'content_type_uid': 'session'}); For initializing sync with a specific type of content: Stack.sync({ 'type': 'entry_published'}); //Use the type parameter to get a specific type of content. Supports 'asset_published', 'entry_published', 'asset_unpublished', 'entry_unpublished', 'asset_deleted', 'entry_deleted', 'content_type_deleted'For fetching the next batch of entries using pagination token:Stack.sync({'pagination_token': ''}); For performing subsequent sync after initial sync:Stack.sync({'sync_token': ''}); ``` An object that supports ‘locale’, ‘start\_date’, ‘content\_type\_uid’, and ‘type’ queries Specifies if the sync should be recursive API key of the stack Delivery token to retrieve data from the stack Environment name where content is published The Live preview configuration for the Contentstack API Name of the branch to fetch data from Sets the host of the API server (example: "dev.contentstack.com") Region of the stack. You can choose from five regions: NA, EU, Azure NA, Azure EU, GCP NA, and GCP EU. Lets you specify which language to use as source content if the entry does not exist in the specified language. Specifies the caching strategy. Accepts a string value from the Policy enum. Defines where the cache is stored. Accepts localStorage or memoryStorage as string values. Sets the maximum age (in milliseconds) before the cache expires. Function to serialize data before storing it in the cache. Function to deserialize data when retrieving it from the cache. Set early access headers Method to enable custom logging in the SDK Add custom plugins to the SDK ## Stack | TypeScript Delivery SDK | Contentstack The Stack class in the TypeScript Delivery SDK represents a content stack and serves as the main interface for retrieving entries, assets, and content types. ## Asset In Contentstack, any files (images, videos, PDFs, audio files, and so on) that you upload get stored in your repository for future use. This repository of uploaded files is called [assets](/docs/headless-cms/about-assets). The Asset method by default creates an object for all assets of a stack. To retrieve a single asset, specify its UID. **Example:** ``` import contentstack from '@contentstack/delivery-sdk'; import { BaseAsset } from '@contentstack/delivery-sdk'; const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" }); interface BlogAsset extends BaseAsset { title: string; description: string; url: string; // Add other custom properties as needed } async function fetchAssets() { try { const result = await stack.asset(asset_uid).fetch(); console.log('Assets Fetched:', assets); //Add your statements } catch (error) { console.error('Error fetching asset:', error); } } fetchAssets(); ``` ## fetch The fetch method retrieves the asset data of the specified asset. ``` Example: import { BaseAsset } from '@contentstack/delivery-sdk' interface BlogAsset extends BaseAsset { // other custom props } const asset = await stack.asset('assetUid').fetch(); ``` ## includeBranch The includeBranch method includes the branch details in the response. ``` Example: const assetResponse = await stack.asset('asset_uid').includeBranch().fetch(); ``` ## includeDimension The includeDimension method includes the dimensions (height and width) of the image in the result. ``` Example: const assetResponse = await stack.asset('asset_uid').includeDimension().fetch(); ``` ## includeFallback The includeFallback method retrieves the entry in its fallback language. ``` Example: const result = await stack.asset('asset_uid').includeFallback().fetch(); ``` ## locale The locale method retrieves the assets published in that locale. ``` Example: const result = await stack.asset('asset_uid').locale('en-us').fetch(); ``` ## relativeUrls The relativeUrls method includes the relative URLs of the asset in the result. ``` Example: const result = await stack.asset('asset_uid').relativeUrls().fetch(); ``` ## version The version method retrieves the specified version of the asset in the result. ``` Example: const result = await stack.asset('asset_uid').version(1).fetch(); ``` Version of the required asset ## includeMetadata The includeMetadata method includes the metadata for getting metadata content for the entry. ``` Example: const result = await stack.asset('asset_uid').includeMetadata().fetch(); ``` ## assetFields The assetFields method determines the optional asset field groups to include in the response. **Note:** The assetFields method is supported only in the North America (NA) region. **Response Behavior:** * Retrieves only the requested asset metadata, keeping asset payloads smaller. * Applies to published assets from the asset API. It applies to both single-asset responses and multi-asset responses. * Does not filter which assets appear in the response or restrict them by file type (MIME). * Requests optional metadata groups in addition to the core fields on BaseAsset, such as the file MIME type (content\_type) and the folder flag (is\_dir). It does not replace or modify those fields. **Note:** On asset objects, content\_type represents the file’s MIME type, not a Contentstack CMS content type. **Supported field groups (values):** * user\_defined\_fields: Includes stack-defined custom fields on the asset (author-managed key-value data). * embedded\_metadata: Includes metadata extracted from the file (e.g, EXIF or IPTC). * ai\_generated\_metadata: Includes AI-generated data (e.g., tags, descriptions, classifications). * visual\_markups: Includes annotation data (e.g., regions, notes, overlays) ``` Note: The SDK forwards invalid or empty fieldGroup strings without validating them. The Delivery API handles the errors. Usage and Behavior: Chain on a single asset or on an asset query, for example:stack.asset('').assetFields(...).fetch()or stack.asset().assetFields(...).find(). Multiple calls overwrite prior values. Calling with no arguments omits asset_fields[] from the request.Example: The following example fetches a single asset with selected field groups. The promise resolves to one asset as BlogAsset, including the requested field groups. import contentstack, { BaseAsset } from '@contentstack/delivery-sdk'; interface BlogAsset extends BaseAsset { user_defined_fields?: { photographer?: string; license?: string; }; ai_generated_metadata?: { tags?: string[]; description?: string; }; // Visual annotation / overlay payload shape is app-specific; use `unknown` until you define a narrow interface. visual_markups?: unknown; // Binary-embedded file metadata (e.g. EXIF-style); structure varies by file type. Type narrowly or validate at runtime. embedded_metadata?: unknown; } async function main() { try { const stack = contentstack.stack({ apiKey: '', deliveryToken: '', environment: '', }); const assetResponse = await stack .asset('') .assetFields( 'user_defined_fields', 'embedded_metadata', 'ai_generated_metadata', 'visual_markups' ) // Generic tells TypeScript the resolved asset shape (including optional field groups above). .fetch(); console.log(assetResponse); } catch (error) { console.error(error); } }The following example runs an asset query with two field groups and reads results from assets on the find response. import contentstack from '@contentstack/delivery-sdk'; async function main() { try { const stack = contentstack.stack({ apiKey: '', deliveryToken: '', environment: '', }); const result = await stack .asset() .assetFields('ai_generated_metadata', 'visual_markups') .find(); // Collection responses use `assets` on FindResponse (not `items`). console.log(result.assets); } catch (error) { console.error(error); } }Data Retrieval Behavior: Typing dynamic responses: Optional blocks returned for assetFields are not part of the SDK’s BaseAsset type and vary by stack. Extend BaseAsset in your own interface, pass that type to .fetch() or .find(), then validate or narrow the payload before use.Pagination and execution: Terminal methods (.fetch(), .find()) trigger a single HTTP request. Control page size and offset using query modifiers (e.g., limit, skip), or the system falls back to API defaults.Additional Resources: For detailed API payload schemas and default behaviors, refer to Contentstack Delivery API Documentation. ``` Keys that specify asset field groups to retrieve. Provide them as arguments before .fetch() or .find(). UID of the asset ## Asset Collection The Asset Collection provides methods for filtering and retrieving assets stored in Contentstack. You can retrieve specific assets by UID, tags, or metadata. **Example:** ``` const result = stack.asset().find() .then((assets) => console.log(assets)) .catch((error) => console.error("Error fetching assets:", error)); ``` ## addParams The addParam method adds a query parameter to the query. ``` Example: import { BaseAsset, FindAsset } from '@contentstack/delivery-sdk' interface BlogAsset extends BaseAsset { // other custom props dimension: { height: string; width: string; }; } const asset = await stack .asset() .addParams({"key": "value"}) .find(); ``` Add key-value pairs ## find The find method retrieves all the assets of the stack. ``` Example: const result = await stack.asset().find(); ``` ## includeBranch The includeBranch method includes the branch details in the result. ``` Example: const result = await stack.asset().includeBranch().find(); ``` ## includeCount The includeCount method retrieves count and data of all the objects in the result. ``` Example: const asset = await stack.asset().includeCount().find(); ``` ## includeDimension The includeDimension method includes the dimensions (height and width) of the image in the result ``` Example: const result = await stack.asset().includeDimension().find(); ``` ## includeFallback The includeFallback method retrieves the entry in its fallback language. ``` Example: const result = await stack.asset().includeFallback().find(); ``` ## locale The locale method retrieves the asset published in the specified locale. ``` Example: const result = await stack.asset().locale('en-us').find(); ``` Locale of the asset ## orderByAscending The orderByAscending method sorts the results in ascending order based on the specified field UID. ``` Example: const asset = await stack.asset().orderByAscending().find(); ``` Field UID to sort the results ## orderByDescending The orderByDescending method sorts the results in descending order based on the specified key. ``` Example: const asset = await stack.asset().orderByDescending().find(); ``` Field UID to sort the results ## param The param method adds query parameters to the URL. ``` Example: const asset = await stack.asset().param("key", "value").find(); ``` Add any param to include in the response Add the corresponding value of the param key ## relativeUrls The relativeUrls method includes the relative URLs of all the assets in the result. ``` Example: const result = await stack.asset().relativeUrls().find(); ``` ## removeParam The removeParam method removes a query parameter from the query. ``` Example: const asset = await stack.asset().removeParam("query_param_key").find(); ``` Specify the param key you want to remove ## version The version method retrieves a specific version of the asset in the result. ``` Example: const result = await stack.asset().version(1).find(); ``` Version number of the asset ## where The where method filters the results based on the specified criteria. ``` Example: const result = await stack.asset().query().where("field_UID", QueryOperation.IS_LESS_THAN, ["field1", "field2"]) .find(); ``` Specify the field the comparison is made from Specify the comparison criteria Specify the field the comparison is made to ## includeMetadata The includeMetadata method includes the metadata for getting metadata content for the entry. ``` Example: const result = await stack.asset().includeMetadata().find(); ``` ## skip The skip method will skip a specific number of assets in the output. ``` Example: const result = await stack.asset().skip(5).find(); ``` Enter the number of assets to be skipped. ## limit The limit method will return a specific number of assets in the output. ``` Example: const result = await stack.asset().limit(5).find(); ``` Enter the maximum number of assets to be returned. ## Asset Collection | TypeScript Delivery SDK | Contentstack Asset Collection in the TypeScript Delivery SDK filters and retrieves assets stored in Contentstack by UID, tags, or metadata. ## ContentType A [content type](/docs/headless-cms/about-content-types) is the structure or blueprint of a page or a section that your web or mobile property will display. It lets you define the overall schema of this blueprint by adding fields and setting its properties. **Example:** ``` import { BaseContentType } from '@contentstack/delivery-sdk' interface BlogPost extends BaseContentType { text: string; // other custom props } async function fetchContentType() { try { const contentType = await stack.contentType("blog").fetch(); console.log(contentType); //Add your statements } catch (error) { console.error("Error fetching content type:", error); } } fetchContentType(); ``` ## entry The entry method creates an entry object for the specified entry. ``` Example: const entry = stack.contentType("contentTypeUid").entry("entryUid"); ``` UID of the entry ## fetch The fetch method retrieves the details for the specified content type. ``` Example: const result = await stack.contentType("contentTypeUid").fetch(); ``` UID of the content type ## ContentType | TypeScript Delivery SDK | Contentstack The ContentType class in the TypeScript Delivery SDK accesses a specific content type and provides Entry and Query instances to retrieve its content. ## ContentType Collection The ContentType Collection method retrieves a list of all content types available within a stack. It provides metadata and structural details for each content type but does not retrieve actual content entries. **Example:** ``` const contentType = await stack.contentType().find(); ``` ## find The find method retrieves all the content types of the stack. ``` Example: import { BaseContentType, FindContentType } from '@contentstack/delivery-sdk' interface BlogPostContentType extends BaseContentType { // custom content type schema } const result = await stack.contentType().find(); ``` ## includeGlobalFieldSchema The includeGlobalFieldSchema method includes the schema of the global field in the response. ``` Example: const contentType = stack.ContentType(); const result = contentType.includeGlobalFieldSchema().find(); ``` ## ContentType Collection | TypeScript Delivery SDK | Contentstack ContentType Collection in the TypeScript Delivery SDK retrieves all content types in a stack, returning metadata and structural details without entry content. ## Entry An [Entry](/docs/headless-cms/about-entries) is the actual piece of content created using one of the defined content types. To work with a single entry, specify its UID. **Example:** ``` import contentstack from '@contentstack/delivery-sdk' import { BaseEntry } from '@contentstack/delivery-sdk' const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" }); interface BlogPostEntry extends BaseEntry { // custom entry types } async function fetchEntry() { try { const result = await stack.contentType(contenttype_uid).entry(entry_uid).fetch(); console.log('Entry: ', result); //Add your statements } catch (error) { console.error('Error fetching entry:', error); } } fetchEntry(); ``` ## fetch The fetch method retrieves the details of a specific entry. ``` Example: import { BaseEntry } from '@contentstack/delivery-sdk' interface BlogPostEntry extends BaseEntry { // custom entry types } const result = await stack .contentType(contentType_uid) .entry(entry_uid) .fetch(); ``` ## includeBranch The includeBranch method includes the branch details in the result. ``` Example: const result = await stack .contentType(contentType_uid) .entry(entry_uid) .includeBranch() .fetch(); ``` ## includeFallback The includeFallback method retrieves the entry in its fallback language. ``` Example: const result = await stack .contentType(contentType_uid) .entry(entry_uid) .includeFallback() .fetch(); ``` ## locale The locale method retrieves the entries published in that locale. ``` Example: const result = await stack .contentType(contentType_uid) .entry(entry_uid) .locale('en-us') .fetch(); ``` Locale of the entry ## addParams The addParam method adds a query parameter to the query. ``` Example: import { BaseEntry, FindEntry } from '@contentstack/delivery-sdk' interface BlogPostEntry extends BaseEntry { // custom entry types } const result = await stack .contentType(contentType_uid) .entry() .addParams({"key": "value"}) .find(); ``` Add key-value pairs ## except The except method excludes specific field(s) of an entry. ``` Example: const result = await stack .contentType("contentTypeUid") .entry() .except("fieldUID") .find(); ``` UID of the field to exclude ## find The find method retrieves the details of the specified entry. ``` Example: const result = await stack.contentType("contentTypeUid").entry().find(); ``` ## skip The skip method will skip a specific number of entries in the output. ``` Example: const result = await stack .contentType(contentType_uid) .entry() .skip(5) .find(); ``` Enter the number of entries to be skipped. ## limit The limit method will return a specific number of entries in the output. ``` Example: const result = await stack .contentType(contentType_uid) .entry() .limit(5) .find(); ``` Enter the maximum number of entries to be returned. ## includeCount The includeCount method retrieves the count and data of objects in the result. ``` Example: const result = await stack .contentType("contentTypeUid") .entry() .includeCount() .find(); ``` ## only The only method selects specific field(s) of an entry. ``` Example: const result = await stack .contentType("contentTypeUid") .entry() .only("fieldUID") .find(); ``` UID of the field to select ## orderByAscending The orderByAscending sorts the results in ascending order based on the specified field UID. ``` Example: const result = await stack .contentType("contentTypeUid") .entry() .orderByAscending() .find(); ``` Field UID to sort the results ## orderByDescending The orderByDescending sorts the results in descending order based on the specified field UID. ``` Example: const result = await stack .contentType("contentTypeUid") .entry() .orderByDescending() .find(); ``` Field UID to sort the results ## param The param method adds query parameters to the URL. ``` Example: const result = await stack .contentType("contentTypeUid") .entry() .param("key", "value") .find(); ``` Add any param to include in the response Add the corresponding value of the param key ## query The query method retrieves the details of the entry on the basis of the queries applied. ``` Example: const query = stack.contentType("contentTypeUid").entry().query({ "price_in_usd": { "$lt": 600 }}); const result = await query.whereIn("brand").find(); ``` Query in object format ## removeParam The removeParam method removes a query parameter from the query. ``` Example: const result = await stack .contentType("contentTypeUid") .entry() .removeParam("query_param_key") .find(); ``` Specify the param key you want to remove ## where The where method filters the results based on the specified criteria. ``` Example: const result = await stack .contentType(contentType_uid) .entry() .query() .where( "field_UID", QueryOperation.IS_LESS_THAN, ["field1", "field2"]) .find(); ``` Specify the field the comparison is made from Specify the comparison criteria Specify the field the comparison is made to ## includeMetadata The includeMetadata method includes the metadata for getting metadata content for the entry. ``` Example: const result = await stack .contentType('contentType_uid') .entry('entry_uid') .includeMetadata() .fetch(); ``` ## includeEmbeddedItems The includeEmbeddedItems method includes embedded objects (Entry and Assets) along with entry details ``` Example: const result = await stack .contentType(contentType_uid) .entry('entry_uid') .includeEmbeddedItems() .fetch(); ``` ## includeContentType The includeContentType method includes the details of the content type along with the Entry details. ``` Example: const result = await stack .contentType(contentType_uid) .entry('entry_uid') .includeContentType() .fetch(); ``` ## includeReference The includeReference method retrieves the content of the referred entries in your response. ``` Example: const query = stack.contentType(contentType_uid).entry(); const result = await query .includeReference("brand") .find();To retrieve all referred entries, use the following code snippet:const result = await query.addParams({ include_all: true, include_all_depth: 2 }).find();Note: The maximum supported value for include_all_depth is 100. ``` UID of the reference field to include ## Variants Variants are different versions of content designed to meet specific needs or target audiences. This feature allows content editors to create multiple variations of a single entry, each customized for a particular variant group or purpose. When Personalize creates a variant in the CMS, it assigns a "Variant Alias" to identify that specific variant. When fetching entry variants using the Delivery API, you can pass variant aliases in place of variant UIDs in the x-cs-variant-uid header. ``` Single Variant: This method retrieves the details of a specific entry variant. Example: import contentstack from '@contentstack/delivery-sdk'; const Stack = contentstack.stack ({'api_key': 'api_key', 'delivery_token': 'delivery_token', 'environment': 'environment'}); const result = await Stack .contentType('content_type_uid') .entry('entry_uid') .variants('variant_uid/variant_alias') .fetch(); Layering variants: This method retrieves the details of entry variants based on the applied query Example: import contentstack from '@contentstack/delivery-sdk'; const Stack = contentstack.stack ({'api_key': 'api_key', 'delivery_token': 'delivery_token', 'environment': 'environment'}); const result = await Stack .contentType('content_type_uid') .entry('entry_uid') .variants(['variant_uid1/variant_alias1','variant_uid2/variant_alias2']) .fetch(); Note: By default you can add up to 3 variant UIDs or aliases. The limit can vary based on your organization plan. The variant UID or alias added first takes priority and will be applied to the base entry fields. ``` ## assetFields The assetFields method specifies the optional asset field groups to include for assets returned with an entry. **Note:** The assetFields method is supported only in the North America (NA) region. **Response Behavior:** * Retrieves only the required asset metadata, keeping the entry payloads smaller when entries reference assets. * Applies to published assets referenced or embedded on the entry. It applies to both single-entry and multi-entry responses. * Adds optional metadata fields to each asset in the response. It does not filter assets or control file types. * Requests optional metadata groups in addition to standard asset fields such as file MIME type (content\_type) and folder flag (is\_dir). It does not replace or modify core asset fields. **Note:** On asset objects, content\_type represents the file’s MIME type, not a Contentstack CMS content type. **Supported field groups (values):** * user\_defined\_fields: Includes stack-defined custom fields on the asset (author-managed key-value data). * embedded\_metadata: Includes metadata extracted from the file (e.g, EXIF or IPTC). * ai\_generated\_metadata: Includes AI-generated data (e.g., tags, descriptions, classifications). * visual\_markups: Includes annotation data (e.g., regions, notes, overlays) ``` Note: The SDK forwards invalid or empty field group strings without validating them. The API handles the errors. Usage and Behavior: Chain on a single entry or on an entry query, for example:stack.contentType('').entry('').assetFields(...).fetch() or stack.contentType('').entry().assetFields(...).find(). Multiple calls overwrite prior values. Calling with no arguments omits asset_fields[] from the request.Examples: The following example fetches a single BlogEntry. Nested assets include the optional metadata. Asset fields and structure depend on your content type. import contentstack, { BaseAsset, BaseEntry } from '@contentstack/delivery-sdk'; interface HeroAsset extends BaseAsset { user_defined_fields?: { photographer?: string; license?: string; }; ai_generated_metadata?: { tags?: string[]; description?: string; }; // Visual annotation / overlay payload shape is app-specific; use `unknown` until you define a narrow interface. visual_markups?: unknown; // Binary-embedded file metadata (e.g. EXIF-style); structure varies by file type. Type narrowly or validate at runtime. embedded_metadata?: unknown; } interface BlogEntry extends BaseEntry { // Replace `hero_image` with your file-field UID; linked asset shape matches your stack. hero_image?: HeroAsset; } async function main() { try { const stack = contentstack.stack({ apiKey: '', deliveryToken: '', environment: '', }); const entryResponse = await stack .contentType('') .entry('') .assetFields( 'user_defined_fields', 'embedded_metadata', 'ai_generated_metadata', 'visual_markups' ) // Generic tells TypeScript the resolved entry shape (including nested asset field groups above). .fetch(); console.log(entryResponse); } catch (error) { console.error(error); } }This example runs an entry query with two asset field groups and reads results from entries on the find response. import contentstack from '@contentstack/delivery-sdk'; async function main() { try { const stack = contentstack.stack({ apiKey: '', deliveryToken: '', environment: '', }); const result = await stack .contentType('') .entry() .assetFields('ai_generated_metadata', 'visual_markups') .find(); // Collection responses use `entries` on FindResponse (not `items`). console.log(result.entries); } catch (error) { console.error(error); } }Data Retrieval Behavior: Typing dynamic responses: Optional blocks returned for assetFields on nested assets are not part of the SDK’s BaseAsset type and vary by stack and field. Extend and compose BaseAsset in types that match your entry’s file fields, pass the entry type to .fetch() or .find(), then validate or narrow the payload before use.Pagination and execution: Terminal methods (.fetch(), .find()) trigger a single HTTP request. Control page size and offset using query modifiers (e.g., limit, skip), or the system falls back to API defaults.Additional Resources: For detailed API payload schemas and default behaviors, refer to Contentstack Delivery API Documentation. ``` Keys that specify asset field groups to retrieve for assets in the entry response. Provide them as arguments before .fetch() or .find(). UID of the entry ## Entry | TypeScript Delivery SDK | Contentstack The Entry class in the TypeScript Delivery SDK retrieves a single content entry from your Contentstack stack, giving access to its fields and data. ## Query These methods allow you to refine entry queries by applying conditions, filters, and relational data. You can filter entries based on specific field values, include referenced entries, and limit the number of results. **Example:** ``` const query = stack.contentType("contentTypeUid").Entry().query(); ``` ## addParams The addParam method adds a query parameter to the query. ``` Example: import { BaseEntry, FindEntry } from '@contentstack/delivery-sdk' interface BlogPostEntry extends BaseEntry { // custom entry types } const query = stack.contentType(contentType_uid).entry().query(); const result = await query .addParams({"key": "value"}) .find(); ``` Add key-value pairs ## addQuery The addQuery method adds multiple query parameters to the query. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); const result = await query .addQuery("query_param_key", "query_param_value") .find(); ``` Add filter query key Add the corresponding value to the filter query key ## find The find method retrieves the details of the specified entry. ``` Example: const result = await stack .contentType("contentType1Uid") .entry() .query() .find(); ``` ## includeCount The includeCount method retrieves count and data of objects in the result. ``` Example: const query = stack.contentType(contentType_uid).entry().query(); const result = await query.includeCount().find(); ``` ## orderByAscending The orderByAscending method sorts the results in ascending order based on the specified field UID. ``` Example: const query = stack.contentType(contentType_uid).entry().query(); const result = await query .orderByAscending() .find(); ``` Field UID to sort the results ## orderByDescending The orderByDescending method sorts the results in descending order based on the specified key. ``` Example: const query = stack.contentType(contentType_uid).entry().query(); const result = await query .orderByDescending() .find(); ``` Field UID to sort the results ## param The param method adds query parameters to the URL. ``` Example: const query = stack.contentType(contentType_uid).entry().query(); const result = await query .param("key", "value") .find(); ``` Add any param to include in the response Add the corresponding value of the param key ## queryOperator The queryOperator method retrieves the entries as per the given operator. ``` Example: import contentstack, { QueryOperation, QueryOperator } from '@contentstack/delivery-sdk'; const stack = contentstack.stack('apiKey', 'deliveryToken', 'environment'); // Create main query const query = stack .contentType('contentType1Uid') .entry() .query(); // Create subquery 1 const subQuery1 = stack .contentType('contentType2Uid') .entry() .query() .where('price', QueryOperation.IS_LESS_THAN, 90); // Create subquery 2 const subQuery2 = stack .contentType('contentType3Uid') .entry() .query() .where('discount', QueryOperation.INCLUDES, [20, 45]); // Apply the query operator (AND/OR) query.queryOperator(QueryOperator.AND, subQuery1, subQuery2); // Execute the query const result = await query.find(); console.log('Result:', result); ``` Type of query operator to apply Query instances to apply the query to ## removeParam The removeParam method removes a query parameter from the query. ``` Example: const query = stack.contentType(contentType_uid).entry().query(); const result = await query .removeParam("query_param_key") .find(); ``` Specify the param key you want to remove ## where The where method filters the results based on the specified criteria. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); const result = await query .where( "field_UID", QueryOperation.IS_LESS_THAN, ["field1", "field2"]) .find(); ``` Specify the field the comparison is made from Specify the comparison criteria Specify the field the comparison is made to ## whereIn The whereIn method retrieves the entries that meet the query conditions made on referenced fields. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); query.whereIn("brand"); const result = await query.find(); ``` UID of the reference field to query Query instance to include in the where clause ## whereNotIn The whereNotIn method retrieves the entries that do not meet the query conditions made on referenced fields. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); query.whereNotIn("brand"); const result = await query.find(); ``` UID of the reference field to query Query instance to include in the where clause ## skip The skip method will skip a specific number of entries in the output. ``` Example: const result = await stack .contentType(contentType_uid) .entry() .query() .skip(5) .find(); ``` Enter the number of entries to be skipped. ## limit The limit method will return a specific number of entries in the output. ``` Example: const result = await stack .contentType(contentType_uid) .entry() .query() .limit(5) .find(); ``` Enter the maximum number of entries to be returned. ## or The or method retrieves the entries that meet either of the conditions specified. ``` Example: const query1 = stack.contentType('contenttype_uid').entry().query().containedIn('fieldUID', ['value']); const query2 = stack.contentType('contenttype_uid').entry().query().where('fieldUID', QueryOperation.EQUALS, 'value2'); const query = await stack.contentType('contenttype_uid').entry().query().or(query1, query2).find(); ``` Array of query objects or raw queries ## and The and method retrieves the entries that meet all the specified conditions. ``` Example: const query1 = stack.contentType('contenttype_uid').entry().query().containedIn('fieldUID', ['value']); const query2 = stack.contentType('contenttype_uid').entry().query().where('fieldUID', QueryOperation.EQUALS, 'value2'); const query = await stack.contentType('contenttype_uid').entry().query().and(query1, query2).find(); ``` Array of query objects or raw queries ## containedIn The containedIn method retrieves the entries that contain the conditions specified. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); const result = await query.containedIn('fieldUid', ['value1', 'value2']).find(); ``` UID of the field Array of values that are to be used to match or compare ## notContainedIn The notContainedIn method retrieves the entries where the specified conditions are absent. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); const result = await query.notContainedIn('fieldUid', ['value1', 'value2']).find(); ``` UID of the field Array of values that are to be used to match or compare ## equalTo The equalTo method retrieves entries that match the specified conditions exactly. ``` Example: const query = await stack.contentType('contenttype_uid').entry().query().equalTo('fieldUid', 'value').find(); ``` UID of the field Array of values that are to be used to match or compare ## exists The exists method retrieves the entries that satisfy the specified condition of existence. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); const result = await query.exists('fieldUid').find(); ``` UID of the field ## notExists The notExists method retrieves entries where the specified conditions are not met. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); const result = await query.notExists('fieldUid').find(); ``` UID of the field ## getQuery The getQuery method retrieves the entries as per the specified query. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); const result = await query.query({'brand': {'$nin_query': {'title': 'Apple Inc.'}}}).getQuery(); // OR const asset = await stack.asset().query({'brand': {'$nin_query': {'title': 'Apple Inc.'}}}).getQuery(); ``` UID of the field ## greaterThan The greaterThan method retrieves the entries that are greater than the specified condition. ``` Example: const query = stack.contentType('contenttype_uid').query().where('title', QueryOperation.EQUALS, 'value'); const entryQuery = await stack.contentType('contenttype_uid').query().greaterThan('fieldUid', 'value').find(); ``` UID of the field Array of values that are to be used to match or compare ## greaterThanOrEqualTo The greaterThanOrEqualTo method retrieves entries that meet the specified condition of being greater than or equal to a certain value. ``` Example: const query = stack.contentType('contenttype_uid').query().where('title', QueryOperation.EQUALS, 'value'); const entryQuery = await stack.contentType('contenttype_uid').query().greaterThanOrEqualTo('fieldUid', 'value').find(); ``` UID of the field Array of values that are to be used to match or compare ## lessThan The lessThan method retrieves the entries that are less than the specified condition. ``` Example: const query = stack.contentType('contenttype_uid').query().where('title', QueryOperation.EQUALS, 'value'); const entryQuery = await stack.contentType('contenttype_uid').query().lessThan('fieldUid', 'value').find(); ``` UID of the field Array of values that are to be used to match or compare ## lessThanOrEqualTo The lessThanOrEqualTo method retrieves entries that meet the specified condition of being less than or equal to a certain value. ``` Example: const query = stack.contentType('contenttype_uid').query().where('title', QueryOperation.EQUALS, 'value'); const entryQuery = await stack.contentType('contenttype_uid').query().lessThanOrEqualTo('fieldUid', 'value').find(); ``` UID of the field Array of values that are to be used to match or compare ## referenceIn The referenceIn method retrieves the entries that are referenced. ``` Example: const query = stack.contentType('contenttype_uid').query().where('title', QueryOperation.EQUALS, 'value'); const entryQuery = await stack.contentType('contenttype_uid').query().referenceIn('reference_uid', query).find(); ``` UID of the reference field RAW (JSON) queries ## referenceNotIn The referenceNotIn method retrieves the entries where the referenced items are not included. ``` Example: const query = stack.contentType('contenttype_uid').query().where('title', QueryOperation.EQUALS, 'value'); const entryQuery = await stack.contentType('contenttype_uid').query().referenceNotIn('reference_uid', query).find(); ``` UID of the reference field RAW (JSON) queries ## regex The regex method retrieves entries that match a specified regular expression pattern. ``` Example: const query = stack.contentType("contentTypeUid").entry().query(); const result = await query.regex('title','^Demo').find(); // OR const result = await query.regex('title','^Demo', 'i').find(); ``` UID of the field Array of values that are to be used to match or compare Match or compare value in entry ## search The search method retrieves the entries that match the specified search criteria. ``` Example: const entryQuery = await stack.contentType('contenttype_uid').query().search('key').find(); ``` UID of the field ## tags The tags method fetches the entries that are associated with specific tags. ``` Example: const query = stack.contentType('contenttype_uid').query().where('title', QueryOperation.EQUALS, 'value'); const entryQuery = await stack.contentType('contenttype_uid').query().tags(['tag1']).find(); ``` Array of tags ## Query | TypeScript Delivery SDK | Contentstack The Query class in the TypeScript Delivery SDK refines entry queries with conditions, filters, and referenced entries to retrieve content from Contentstack. ## Taxonomy [Taxonomy](/docs/headless-cms/about-taxonomy) helps you categorize pieces of content within your stack to facilitate easy navigation, search, and retrieval of information. **Note**: All methods in the Query section are applicable for taxonomy-based filtering as well. ## equalAndBelow The equalAndBelow operation retrieves all entries for a specific taxonomy that match a specific term and all its descendant terms, requiring only the target term. ``` Example: const data = await stack .taxonomy() .where( 'taxonomies.one', TaxonomyQueryOperation.EQ_BELOW, 'term_one', {"levels": 1} // optional ) .find() ``` Enter the UID of the taxonomy Enter the UID of the term Enter the level ## below The below operation retrieves all entries for a specific taxonomy that match all of their descendant terms by specifying only the target term and a specific level. **Note:** If you don't specify the level, the default behavior is to retrieve terms up to level **10**. ``` Example:const data = await stack .taxonomy() .where( 'taxonomies.one', TaxonomyQueryOperation.BELOW, 'term_one', {"levels": 1} // optional ) .find() ``` Enter the UID of the taxonomy Enter the UID of the term Enter the level ## equalAndAbove The equalAndAbove operation retrieves all entries for a specific taxonomy that match a specific term and all its ancestor terms, requiring only the target term and a specified level **Note:** If you don't specify the level, the default behavior is to retrieve terms up to level **10**. ``` Example:const data = await stack .taxonomy() .where( 'taxonomies.one', TaxonomyQueryOperation.EQ_ABOVE, 'term_one', {"levels": 1} // optional ) .find() ``` Enter the UID of the taxonomy Enter the UID of the term Enter the level ## above The equalAndAbove operation retrieves all entries for a specific The above operation retrieves all entries for a specific taxonomy that match only the parent terms of a specified target term, excluding the target term itself and a specified level. **Note:** If you don't specify the level, the default behavior is to retrieve terms up to level **10**. ``` Example:const data = await stack .taxonomy() .where( 'taxonomies.one', TaxonomyQueryOperation.ABOVE, 'term_one', {"levels": 1} // optional ) .find() ``` Enter the UID of the taxonomy Enter the UID of the term Enter the level ## fetch The fetch method retrieves the details of a specific published taxonomy by UID. ``` Validationlocale is an optional positional argument, not a chained setter. It must be passed directly to fetch(locale). There is no client-side validation of the locale code. An invalid or unpublished locale is rejected by the API. See Delivery API Errors. BehaviorMaps to a single GET request to /taxonomies/{taxonomy_uid}. The response is unwrapped from response.taxonomy. If that key is absent, the raw response is returned as-is. Exampleimport contentstack, {BaseTaxonomy} from '@contentstack/delivery-sdk' interface BlogTaxonomy extends BaseTaxonomy { uid: string name: string } const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" }) // Master locale const result = await stack .taxonomy(taxonomy_uid) .fetch() // Localized const localized = await stack .taxonomy(taxonomy_uid) .fetch('hi-in') ``` Locale code (for example, hi-in), passed positionally. Omit to retrieve the master locale. ## term The term method returns either a Term instance or a TermQuery instance, depending on whether a term UID is passed. Pass a UID to fetch a single term. Omit the UID to build a query across all terms in the taxonomy. ``` Instance StateThe TypeScript SDK exposes a single overloaded term() method for both call shapes. This differs from the .NET SDK, which splits the same behavior into two separate methods, Term(termUid) and Terms(). Calling term('term_uid') in TypeScript is equivalent to Term(termUid) in .NET. Calling term() with no argument is equivalent to Terms() in .NET. ValidationThere is no client-side validation of uid. An empty string is treated the same as an omitted argument because the method checks if (uid), so passing term('') returns a TermQuery, not a Term. An invalid or nonexistent term UID does not throw at this step. The API rejects it on the subsequent fetch() call. See Delivery API Errors. BehaviorClient-side only. Constructs a Term or TermQuery instance. No HTTP call is made until a terminal method (fetch(), locales(), ancestors(), descendants(), or find()) is called on the returned object. Exampleimport contentstack from '@contentstack/delivery-sdk' const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" }) // Get a specific term (returns a Term) const term = stack.taxonomy('taxonomy_uid').term('term_uid') // Get all terms (returns a TermQuery) const termQuery = stack.taxonomy('taxonomy_uid').term() ``` UID of the term. When passed, returns a Term. When omitted, returns a TermQuery. ## Taxonomy | TypeScript Delivery SDK | Contentstack The Taxonomy class in the TypeScript Delivery SDK helps you categorize content within your stack for easy navigation, search, and retrieval of information. ## Term Terms are the fundamental building blocks used to create hierarchical structures and to classify and categorize information systematically. Name Type Description taxonomyUid string UID of the taxonomy termUid string UID of the term **Note**: Term has no public constructor. Get an instance through stack.taxonomy(taxonomyUid).term(termUid). Calling term() without a UID returns a TermQuery instance instead, for listing multiple terms. ## fetch The fetch method retrieves the details of a specific published term. ``` Validationlocale is an optional positional argument, not a chained setter. It must be passed directly to fetch(locale). There is no client-side validation of the locale code. An invalid or unpublished locale is rejected by the API. See Delivery API Errors. BehaviorMaps to a single GET request to /taxonomies/{taxonomy_uid}/terms/{term_uid}. The response is unwrapped from response.term. If that key is absent, the raw response is returned as-is. Exampleimport contentstack, {BaseTerm} from '@contentstack/delivery-sdk' interface BlogTerms extends BaseTerm { taxonomy_uid: string uid: string } const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" }) // Master locale const result = await stack .taxonomy(taxonomy_uid) .term(term_uid) .fetch() // Localized const localized = await stack .taxonomy(taxonomy_uid) .term(term_uid) .fetch('mr-in') ``` Locale code (for example, mr-in), passed positionally. Omit to retrieve the master locale. ## locales The locales method fetches all published, localized versions of a single term. ``` ValidationThis method takes no parameters. There is no client-side validation. An invalid or nonexistent term UID (set earlier through taxonomy(uid).term(termUid)) is rejected by the API. See Delivery API Errors. BehaviorMaps to a single GET request to /taxonomies/{taxonomy_uid}/terms/{term_uid}/locales. The response is unwrapped from response.locales. If that key is absent, the raw response is returned as-is. Exampleconst result = await stack .taxonomy(taxonomy_uid) .term(term_uid) .locales() ``` ## ancestors The ancestors method fetches all ancestors of a single published term, up to the root. ``` ValidationThis method takes no parameters. There is no client-side validation. An invalid or nonexistent term UID (set earlier through taxonomy(uid).term(termUid)) is rejected by the API. See Delivery API Errors. BehaviorMaps to a single GET request to /taxonomies/{taxonomy_uid}/terms/{term_uid}/ancestors. The response is unwrapped from response.ancestors. If that key is absent, the raw response is returned as-is. Exampleconst result = await stack .taxonomy(taxonomy_uid) .term(term_uid) .ancestors() ``` ## descendants The descendants method fetches all descendants of a single published term. ``` ValidationThis method takes no parameters. There is no client-side validation. An invalid or nonexistent term UID (set earlier through taxonomy(uid).term(termUid)) is rejected by the API. See Delivery API Errors. BehaviorMaps to a single GET request to /taxonomies/{taxonomy_uid}/terms/{term_uid}/descendants. The response is unwrapped from response.descendants. If that key is absent, the raw response is returned as-is. Exampleconst result = await stack .taxonomy(taxonomy_uid) .term(term_uid) .descendants() ``` ## Term | TypeScript Delivery SDK | Contentstack Term represents a single published taxonomy term in the TypeScript Delivery SDK, with methods to fetch the term, its locales, ancestors, and descendants. ## TermQuery TermQuery lets you query and retrieve multiple published terms within a specific taxonomy. Name Type Description taxonomyUid string UID of the taxonomy **Note**: TermQuery has no public constructor. Get an instance through stack.taxonomy(taxonomyUid).term(), called with no term UID. Passing a term UID to term(termUid) instead returns a Term instance, for a single term. ## locale The locale method scopes the query to terms published in the specified locale. ``` ValidationThere is no client-side validation of the locale code. An invalid or unpublished locale is not rejected at this step because locale only stores the value on the query. The API rejects it on the subsequent find() call. See Delivery API Errors. BehaviorClient-side only. Sets the locale query parameter and returns the same TermQuery instance for chaining. No HTTP call is made until find() is called. Exampleconst result = await stack .taxonomy(taxonomy_uid) .term() .locale('hi-in') .find() ``` Locale code (for example, hi-in, en-us). ## includeFallback The includeFallback method falls back to the master locale for a term that is not localized in the requested locale. ``` ValidationThis method takes no parameters. There is no client-side validation. Calling includeFallback() without first calling locale() does not throw. The API applies its own default locale behavior in that case. BehaviorClient-side only. Sets the include_fallback query parameter to 'true' and returns the same TermQuery instance for chaining. No HTTP call is made until find() is called. Exampleconst result = await stack .taxonomy(taxonomy_uid) .term() .locale('hi-in') .includeFallback() .find() ``` ## find The find method retrieves a list of all published terms within a specific taxonomy. ``` ValidationThis method takes no parameters. There is no client-side validation. It sends the accumulated query parameters (locale, include_fallback) set by prior chained calls. See Delivery API Errors. BehaviorMaps to a single GET request to /taxonomies/{taxonomy_uid}/terms with the accumulated query parameters. The full response object is returned as-is (not unwrapped), matching the FindResponse shape used elsewhere in the SDK. Exampleconst result = await stack .taxonomy(taxonomy_uid) .term() .find() // With locale and fallback const localized = await stack .taxonomy(taxonomy_uid) .term() .locale('hi-in') .includeFallback() .find() ``` ## TermQuery | TypeScript Delivery SDK | Contentstack TermQuery represents a query for fetching multiple published terms in the TypeScript Delivery SDK, with locale filtering, locale fallback, and find. ## Global Fields A [Global field](/docs/headless-cms/about-global-field/) is a reusable field (or group of fields) that you can define once and reuse in any content type within your stack. This eliminates the need (and thereby time and efforts) to create the same set of fields repeatedly in multiple content types. **Example:** ``` const globalField = stack.globalField('global_field_uid'); // For a single globalField with uid 'global_field_uid' ``` ## find The find method retrieves all the global fields of the stack. ``` Example: import { BaseGlobalField, FindGlobalField } from '@contentstack/delivery-sdk' interface ImageField extends BaseGlobalField { format: string // other props } const result = await stack .globalField() .find(); ``` ## fetch The fetch method retrieves the global field data of the specified global field. ``` Example: import { BaseGlobalField } from '@contentstack/delivery-sdk' const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" }); interface ImageField extends BaseGlobalField { format: string // other props } const result = await stack .globalField('global_field_uid') .fetch(); ``` ## includeBranch The includeBranch method includes the branch details in the result for single or multiple global fields. ``` Example: const result = await stack .globalField('global_field_uid') .includeBranch() .find(); ``` UID of the Global field ## Global Fields | TypeScript Delivery SDK | Contentstack Global Fields in the TypeScript Delivery SDK are reusable fields defined once and reused across content types, saving time when modeling Contentstack content. ## Pagination In a single instance, a query will retrieve only the first 100 items in the response. You can paginate and retrieve the rest of the items in batches using the skip and limit parameters in subsequent requests. **Example:** ``` const query = stack.contentType("contentTypeUid").entry().query();const pagedResult = await query .paginate() .find(); // ORconst pagedResult = await query .paginate({ skip: 20, limit: 20 }) .find(); ``` ## next The next method retrieves the next set of response values and skips the current number of responses. ``` Example: const pagedResult = await query .paginate() .find(); const nextPageResult = await query.next().find(); ``` ## previous The previous method retrieves the previous set of response values and skips the current number of responses. ``` Example: const pagedResult = await query .paginate() .find(); const prevPageResult = await query .previous() .find(); ``` ## Pagination | TypeScript Delivery SDK | Contentstack The Pagination class in the TypeScript Delivery SDK manages paginated results, helping you navigate through large sets of Contentstack content. ## ImageTransform Image transformations can be performed on images by specifying the desired parameters. The parameters control the specific transformations that will be applied to the image. **Example:** ``` const url = 'www.example.com';const transformObj = new ImageTransform().bgColor('cccccc');const transformURL = url.transform(transformObj); ``` ## auto The auto method enables the functionality that automates certain image optimization features. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().auto(); const transformURL = url.transform(transformObj); ``` ## bgColor The bgColor method sets a background color for the given image. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().bgColor('cccccc'); const transformURL = url.transform(transformObj); ``` Color of the background ## blur The blur method allows you to decrease the focus and clarity of a given image. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().blur(10); const transformURL = url.transform(transformObj); ``` Set the blur intensity between 1 to 1000 ## brightness The brightness method enables the functionality that automates certain image optimization features. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().brightness(80.50); const transformURL = url.transform(transformObj); ``` Set the brightness of the image between -100 to 100 ## canvas The canvas method allows you to increase the size of the canvas that surrounds an image. ``` Example 1: const url = 'www.example.com'; const transformObj = new ImageTransform().canvas({ width: 100, height: 200 }); const transformURL = url.transform(transformObj);Example 2: const url = 'www.example.com'; const transformObj = new ImageTransform().canvas({ width: 200, height: 300, canvasBy: CanvasByEnum.OFFSET, xval: 100, yval: 150 }); const transformURL = url.transform(transformObj); ``` Specifies what params to use for creating canvas - DEFAULT, ASPECTRATIO, REGION, OFFSET Sets height of the canvas Sets width of the canvas Defines the X-axis position of the top left corner or horizontal offset Defines the Y-axis position of the top left corner or vertical offset ## contrast The contrast method enables the functionality that automates certain image optimization features. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().contrast(-80.99); const transformURL = url.transform(transformObj); ``` Set the contrast of the image between -100 to 100 ## crop The crop method allows you to remove pixels from an image by adjusting the height and width in the percentage value or aspect ratio. ``` Example 1: const url = 'www.example.com'; const transformObj = new ImageTransform().crop({ width: 100, height: 200 }); const transformURL = url.transform(transformObj);Example 2: const url = 'www.example.com'; const transformObj = new ImageTransform().crop({ width: 2, height: 3, cropBy: CropByEnum.ASPECTRATIO }); const transformURL = url.transform(transformObj);Example 3: const url = 'www.example.com'; const transformObj = new ImageTransform().crop({ width: 200, height: 300, cropBy: CropByEnum.REGION, xval: 100, yval: 150 }); const transformURL = url.transform(transformObj);Example 4: const url = 'www.example.com'; const transformObj = new ImageTransform().crop({ width: 200, height: 300, cropBy: CropByEnum.OFFSET, xval: 100, yval: 150 }); const transformURL = url.transform(transformObj); ``` Specify the CropBy type using values DEFAULT, ASPECTRATIO, REGION, or OFFSET. Specify the width to resize the image to. The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p') Specify the height to resize the image to. The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p') For the CropBy Region, specify the X-axis position of the top left corner of the crop. For CropBy Offset, specify the horizontal offset of the crop region. For CropBy Region, specify the Y-axis position of the top left corner of the crop. For CropBy Offset, specify the vertical offset of the crop region. Ensures that the output image never returns an error due to the specified crop area being out of bounds. The output image is returned as an intersection of the source image and the defined crop area. Ensures crop is done using content-aware algorithms. Content-aware image cropping returns a cropped image that automatically fits the defined dimensions while intelligently including the most important components of the image. ## dpr The dpr method lets you deliver images with appropriate size to devices that come with a defined device pixel ratio. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().resize({ width: 300, height: 500 }).dpr(10); const transformURL = url.transform(transformObj); ``` Specify the device pixel ratio. The value should range between 1-10000 or 0.0 to 9999.999 ## fit The fit method enables you to fit the given image properly within the specified height and width. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().resize({ width: 200, height: 200 }).fit(FitByEnum.BOUNDS); const transformURL = url.transform(transformObj); ``` Specifies fit type (Bounds or Crop) ## format The format method lets you convert a given image from one format to another. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().format(FormatEnum.PJPG); const transformURL = url.transform(transformObj); ``` Specify the format ## frame The frame method retrieves the first frame from an animated GIF (Graphics Interchange Format) file that comprises a sequence of moving images. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().frame(); const transformURL = url.transform(transformObj); ``` ## orient The orient method allows you to rotate or flip an image in any direction. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().orient(Orientation.FLIP_HORIZONTAL); const transformURL = url.transform(transformObj); ``` Type of Orientation. Values are DEFAULT, FLIP\_HORIZONTAL, FLIP\_HORIZONTAL\_VERTICAL, FLIP\_VERTICAL, FLIP\_HORIZONTAL\_LEFT, RIGHT, FLIP\_HORIZONTAL\_RIGHT, LEFT. ## overlay The overlay method lets you place one image over another by specifying the relative URL of the image. ``` Example 1: const url = 'www.example.com'; const transformObj = new ImageTransform().overlay({ relativeURL: overlayImgURL }); const transformURL = url.transform(transformObj);Example 2: const url = 'www.example.com'; const transformObj = new ImageTransform().overlay({ relativeURL: overlayImgURL, align: OverlayAlignEnum.BOTTOM }); const transformURL = url.transform(transformObj);Example 3: const url = 'www.example.com'; const transformObj = new ImageTransform().overlay({ relativeURL: overlayImgURL, align: OverlayAlignEnum.BOTTOM, repeat: OverlayRepeatEnum.Y, width: '50p', }); const transformURL = url.transform(transformObj); ``` URL of the image to overlay on base image Lets you define the position of the overlay image. Accepted values are TOP, BOTTOM, LEFT, RIGHT, MIDDLE, CENTER Lets you define how the overlay image will be repeated on the given image. Accepted values are X, Y, BOTH Lets you define the width of the overlay image. For pixels, use any whole number between 1 and 8192. For percentages, use any decimal number between 0.0 and 0.99 Lets you define the height of the overlay image. For pixels, use any whole number between 1 and 8192. For percentages, use any decimal number between 0.0 and 0.99 Lets you add extra pixels to the edges of an image. This is useful if you want to add whitespace or border to an image ## padding The padding method lets you add extra pixels to the edges of an image's border or add whitespace. ``` Example 1: const url = 'www.example.com'; const transformObj = new ImageTransform().padding([25, 50, 75, 90]); const transformURL = url.transform(transformObj);Example 2: const url = 'www.example.com'; const transformObj = new ImageTransform().padding(50); const transformURL = url.transform(transformObj); ``` padding value in pixels or percentages ## quality The quality method lets you control the compression level of images that have lossy file format. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().quality(50); const transformURL = url.transform(transformObj); ``` Quality range: 1 - 100 ## resize The resize method lets you resize the image in terms of width, height, upscaling the image. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().resize({ width: 200, height: 200, disable: 'upscale' }); const transformURL = url.transform(transformObj); ``` Specifies the width to resize the image to. The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p') Specifies the height to resize the image to.The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p') The disable parameter disables the functionality that is enabled by default. As of now, there is only one value, i.e., upscale, that you can use with the disable parameter. ## resizeFilter The resizeFilter method allows you to increase or decrease the number of pixels in a given image. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().resize({ width: 500, height: 550 }).resizeFilter(ResizeFilterEnum.NEAREST); const transformURL = url.transform(transformObj); ``` Types of Filter to apply. Values are NEAREST, BILINEAR, BICUBIC, LANCZOS2, LANCZOS3. ## saturation The saturation method allows you to increase or decrease the intensity of the colors in a given image. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().saturation(-80.99); const transformURL = url.transform(transformObj); ``` To set the saturation of image between -100 to 100 ## sharpen The sharpen method allows you to increase the definition of the edges of objects in an image. ``` Example: const url = 'www.example.com'; const transformObj = new ImageTransform().sharpen(5, 1000, 2); const transformURL = url.transform(transformObj); ``` Specifies the amount of contrast to be set for the image edges between the range \[0-10\] Specifies the radius of the image edges between the range \[1-1000\] Specifies the range of image edges that need to be ignored while sharpening between the range \[0-255\] ## trim The trim method lets you trim an image from the edges. ``` Example 1: const url = 'www.example.com'; const transformObj = new ImageTransform().trim([25, 50, 75, 90]); const transformURL = url.transform(transformObj);Example 2: const url = 'www.example.com'; const transformObj = new ImageTransform().trim([25, 50, 25]); const transformURL = url.transform(transformObj);Example 3: const url = 'www.example.com'; const transformObj = new ImageTransform().trim(50); const transformURL = url.transform(transformObj); ``` Specifies values for top, right, bottom, and left edges of an image. ## ImageTransform | TypeScript Delivery SDK | Contentstack The ImageTransform class in the TypeScript Delivery SDK applies transformations to images by specifying parameters that control how each image is rendered.