The official JavaScript SDK and CLI from Optimizely CMS. Build headless applications with a code-first approach, full TypeScript support, intelligent code completion, and an intuitive developer experience.
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 documentation and guides.
The easiest way to contribute is to join in with the discussions on GitHub issues or create new issues with questions, suggestions or any other feedback. If you want to contribute code or documentation, you are more than welcome to create pull-requests, but make sure that you read the contribution page first.
This project is licensed under the Apache License 2.0.
Built by the Optimizely CMS Team
