The official JavaScript SDK and CLI from the Optimizely CMS team. Build headless applications with Optimizely CMS the right way—with full TypeScript support, intelligent code completion, and end-to-end type safety so you can ship faster with confidence.
A comprehensive JavaScript/TypeScript library for fetching, rendering, and managing content from Optimizely CMS in your applications.
Key Capabilities:
- Type-safe content modeling with full TypeScript definitions
- First-class React and Next.js integration
- Real-time live preview and editing
- Advanced rich text rendering with extensibility
- Seamless digital asset management (DAM)
A command-line tool that syncs your TypeScript content type definitions to Optimizely CMS, enabling code-first content modeling.
Key Capabilities:
- Push TypeScript definitions to Optimizely CMS
- Simple, intuitive command-line interface
- Streamlined developer workflow
Framework Support: While the SDK is designed to be framework-agnostic, this version currently includes first-class support for React and Next.js. Support for additional frameworks is coming soon.
Before you begin, ensure you have the following:
| Requirement | Version | Notes |
|---|---|---|
| Node.js | 22+ | Download |
| Git | Latest | Version control |
| Package Manager | npm/pnpm/yarn | npm comes with Node.js |
| Optimizely CMS | Latest | Access to a CMS instance |
Get up and running in minutes:
# Install the SDK
npm install @optimizely/cms-sdk
# Install the CLI (for type syncing)
npm install -D @optimizely/cms-cliFor a complete walkthrough from scratch, see the Documentation section below.
Comprehensive step-by-step guides to build your headless application:
| Step | Guide | Description |
|---|---|---|
| 1 | Installation | Set up your development environment |
| 2 | Setup | Configure the SDK and CLI |
| 3 | Modelling | Define your content types with TypeScript |
| 4 | Create Content | Add content in Optimizely CMS |
| 5 | Fetching Content | Query and retrieve content in your app |
| 6 | Rendering (React) | Display content in React components |
| 7 | Live Preview | Enable real-time content editing |
| 8 | Experience | Work with experiences and variations |
| 9 | Display Settings | Configure content display options |
| 10 | RichText Component (React) | Render rich text content |
| 11 | DAM Assets | Manage digital assets |
| 12 | Client Utils | Utility functions and helpers |
We're here to help you succeed with Optimizely CMS:
- Community Slack - Join the Optimizely Community Slack for real-time discussions
- GitHub Issues - Report bugs or request features on GitHub
- Documentation - Browse our comprehensive guides above
This project is licensed under the Apache License 2.0.
Built by the Optimizely CMS Team