https://github.com/contentstack/contentstack-typescript
Typescript Content Delivery SDK for Contentstack
https://github.com/contentstack/contentstack-typescript
Last synced: 13 days ago
JSON representation
Typescript Content Delivery SDK for Contentstack
- Host: GitHub
- URL: https://github.com/contentstack/contentstack-typescript
- Owner: contentstack
- License: mit
- Created: 2024-04-19T13:28:42.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-09T12:39:44.000Z (about 2 months ago)
- Last Synced: 2026-02-09T16:38:53.969Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.99 MB
- Stars: 4
- Watchers: 8
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://www.contentstack.com/)
## Typescript Content Delivery SDK for Contentstack
Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest. [Read More](https://www.contentstack.com/).
Contentstack provides Typescript SDK to build application on top of Typescript. Given below is the detailed guide and helpful resources to get started with our Typescript SDK.
The Typescript SDK can also be used to create Node.js and React native applications.
### Prerequisite
You need Node.js version 18 or later installed to use the Contentstack TypeScript SDK.
### Setup and Installation
Node.js uses the Typescript SDK to create apps. To use the Typescript SDK, install it via npm:
```bash
npm i @contentstack/delivery-sdk
```
To import the SDK in your project, use the following command:
```typescript
import contentstack from '@contentstack/delivery-sdk'
```
To initialize the SDK, you will need to specify the API Key, Delivery Token, and Environment Name of your stack.
```typescript
import contentstack from '@contentstack/delivery-sdk'
const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" });
```
### Key Concepts for using Contentstack
#### Stack
A stack is like a container that holds the content of your app. Learn more about [Stacks](https://www.contentstack.com/docs/guide/stack).
#### Content Type
Content type lets you define the structure or blueprint of a page or a section of your digital property. It is a form-like page that gives Content Managers an interface to input and upload content. [Read more](https://www.contentstack.com/docs/guide/content-types).
#### Entry
An entry is the actual piece of content created using one of the defined content types. Learn more about [Entries](https://www.contentstack.com/docs/guide/content-management#working-with-entries).
#### Asset
Assets refer to all the media files (images, videos, PDFs, audio files, and so on) uploaded to Contentstack. These files can be used in multiple entries. Read more about [Assets](https://www.contentstack.com/docs/guide/content-management#working-with-assets).
#### Environment
A publishing environment corresponds to one or more deployment servers or a content delivery destination where the entries need to be published. Learn how to work with [Environments](https://www.contentstack.com/docs/guide/environments).
### Contentstack Typescript SDK
#### Initializing your SDK
You will need to specify the API key, Delivery Token, and Environment Name of your stack to initialize the SDK:
```typescript
const stack = contentstack.stack({ apiKey: "apiKey", deliveryToken: "deliveryToken", environment: "environment" });
```
Once you have initialized the SDK, you can start getting content in your app.
#### Region and Host Configuration
The SDK supports region and custom host configuration to connect to different Contentstack data centers or custom endpoints.
**Region Support**
You can specify a region to connect to the appropriate Contentstack data center. Available regions are:
- `US` (default) - Uses `cdn.contentstack.io`
- `EU` - Uses `eu-cdn.contentstack.com`
- `AU` - Uses `au-cdn.contentstack.com`
- `AZURE_NA` - Uses `azure-na-cdn.contentstack.com`
- `AZURE_EU` - Uses `azure-eu-cdn.contentstack.com`
- `GCP_NA` - Uses `gcp-na-cdn.contentstack.com`
- `GCP_EU` - Uses `gcp-eu-cdn.contentstack.com`
```typescript
import contentstack, { Region } from '@contentstack/delivery-sdk'
// Using region enum
const stack = contentstack.stack({
apiKey: "apiKey",
deliveryToken: "deliveryToken",
environment: "environment",
region: Region.EU
});
// Using region string
const stack = contentstack.stack({
apiKey: "apiKey",
deliveryToken: "deliveryToken",
environment: "environment",
region: "eu"
});
```
**Custom Host Support**
You can specify a custom host to connect to a custom endpoint. If a custom host is provided, it takes priority over the region-based host.
```typescript
const stack = contentstack.stack({
apiKey: "apiKey",
deliveryToken: "deliveryToken",
environment: "environment",
host: "custom-cdn.example.com"
});
// Custom host with region (host takes priority)
const stack = contentstack.stack({
apiKey: "apiKey",
deliveryToken: "deliveryToken",
environment: "environment",
region: Region.EU,
host: "custom-cdn.example.com"
});
```
#### Querying content from your stack
To get a single entry, you need to specify the content type as well as the ID of the entry.
```typescript
import { BaseEntry } from '@contentstack/delivery-sdk'
interface BlogPostEntry extends BaseEntry {
// custom entry types
}
const result = await stack
.contentType(contentType_uid)
.entry(entry_uid)
.fetch();
```
To retrieve multiple entries of a content type, you need to specify the content type uid. You can also specify search parameters to filter results.
```typescript
import { BaseEntry, FindEntry } from '@contentstack/delivery-sdk'
interface BlogPostEntry extends BaseEntry {
// custom entry types
}
const result = await stack.contentType("contentType1Uid").entry()
.query()
.find()
```
### Advanced Queries
You can query for content types, entries, assets and more using our Typescript API Reference.
[Typescript API Reference Doc](https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/typescript/reference#contentstack)
### Working with Images
We have introduced Image Delivery APIs that let you retrieve images and then manipulate and optimize them for your digital properties. It lets you perform a host of other actions such as crop, trim, resize, rotate, overlay, and so on.
For example, if you want to crop an image (with width as 300 and height as 400), you simply need to append query parameters at the end of the image URL, such as, https://images.contentstack.io/owl.jpg?crop=300,400. There are several more parameters that you can use for your images.
[Read Image Delivery API documentation](https://www.contentstack.com/docs/developers/apis/image-delivery-api/).
Following are Image Delivery API examples.
```typescript
const url = 'www.example.com';
const transformObj = new imageTransform().bgColor('cccccc');
const transformURL = url.transform(transformObj);
```
### Pagination
If the result of the initial sync (or subsequent sync) contains more than 100 records, the response would be paginated. It provides pagination token in the response. You will need to use this token to get the next batch of data.
```typescript
const query = stack.contentType("contentTypeUid").entry().query();
const pagedResult = await query
.paginate()
.find();
// OR
const pagedResult = await query
.paginate({ skip: 20, limit: 20 })
.find();
```
### Caching
To use cache policies (`CACHE_THEN_NETWORK`, `CACHE_ELSE_NETWORK`, `NETWORK_ELSE_CACHE`), you must provide a persistence store via `cacheOptions.persistenceStore`. Install the optional persistence plugin and pass a `PersistenceStore` instance:
```bash
npm install @contentstack/persistence-plugin
```
```typescript
import contentstack, { Policy } from '@contentstack/delivery-sdk';
import { PersistenceStore } from '@contentstack/persistence-plugin';
const stack = contentstack.stack({
apiKey: 'your-api-key',
deliveryToken: 'your-delivery-token',
environment: 'your-environment',
cacheOptions: {
policy: Policy.CACHE_THEN_NETWORK,
persistenceStore: new PersistenceStore({ storeType: 'localStorage', maxAge: 86400000 }),
},
});
```
See [@contentstack/persistence-plugin](https://www.npmjs.com/package/@contentstack/persistence-plugin) for options (`storeType`, `maxAge`, custom storage).
### Development
When contributing or running tests from the repository, run `npm run build` before running tests. The published package includes a pre-built `dist/` directory.
### Helpful Links
- [Contentstack Website](https://www.contentstack.com)
- [Official Documentation](https://contentstack.com/docs)
- [Content Delivery API Docs](https://contentstack.com/docs/apis/content-delivery-api/)
### The MIT License (MIT)
Copyright © 2012-2026 [Contentstack](https://www.contentstack.com). All Rights Reserved
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.