Content SDK 1.1: Design Library Enablers, Cursor Rules, Optimized Editing & Preview, and More

Sitecore has released Content SDK 1.1 few days back, a powerful update that brings major improvements for developers building with XM Cloud and Next.js.

This new version introduces:

  • Design library enablers including import map and code generation support
  • Cursor rules for AI-powered development assistance
  • Editing & preview optimizations for smoother authoring experiences
  • Display name-based routing with UTF-8 encoding
  • Upgrade to ESLint 9 with flat config support
  • Cache-busting improvements in the Design Library
  • Numerous bug fixes and stability enhancements

With a fresh start or upgrading from Content SDK 1.0.0, this release boosts productivity, enhances design-to-code workflows, and ensures smoother integration with Next.js apps.

Upgrade Guide: Content SDK 1.0.0 → 1.1.0

1. Update Application Dependencies

To update your dependencies, In your existing application's package.json file, update every @sitecore-content-sdk package to version 1.1.0, In your existing application's package.json file by running the following command:

npm install

2. Update Next.js Template Files

After updating your dependencies, you must synchronize files in your existing application

In sitecore.cli.config.ts find and replace following imports

- import config from './sitecore.config';

+ import scConfig from './sitecore.config';

- import { generateSites, generateMetadata, extractFiles }

-   from '@sitecore-content-sdk/nextjs/tools';

+ import { generateSites, generateMetadata, extractFiles, writeImportMap }

+   from '@sitecore-content-sdk/nextjs/tools';

Update the build section to include writeImportMap  as below:

export default defineCliConfig({

  build: {

    commands: [

      ...

      writeImportMap({

        paths: ['src/components'],

        scConfig,

      }),

    ],

  },

});

In src/Layout.tsx file

1. Find the following line

const mainClassPageEditing = mode.isEditing ? 'editing-mode' : 'prod-mode';

2. Add an import map loader just after above line

const importMapDynamic = () => import('.sitecore/import-map');

3. Update the DesignLibrary element, by adding loadImportMap prop as below

<DesignLibrary loadImportMap={importMapDynamic} />

 .sitecore/import-map.ts file

Create a new file .sitecore/import-map.ts with following command

import { combineImportEntries, defaultImportEntries } from '@sitecore-content-sdk/nextjs/codegen';

export default combineImportEntries(defaultImportEntries, []);

.gitignore

In your existing application's .gitignore file, add the import-map.ts entry after component-map.ts

!.sitecore/component-map.ts:

!.sitecore/import-map.ts

With these updates, the app will get:

  • Fully support Design Library import maps
  • Run on ESLint 9 with streamlined configs
  • Deliver smoother editing and preview experiences
  • Provide AI-guided development with Cursor rules
  • Handle localized display name-based routing more effectively

The Content SDK 1.1 release delivers a big step forward in developer productivity, platform stability, and AI-assisted workflows.

Hope this helps!

 

Comments

Post a Comment

Popular posts from this blog

Setting Up Sitecore Headless with Next.js in Disconnected Mode

Image
Sitecore Headless CMS offers a flexible way to integrate with different frontend technologies. For developers working with frameworks like Next.js, Sitecore provides various ways to set up the environment, including four distinct modes: Disconnected Mode , Connected Mode , Integrated Mode , and API Mode . Each mode offers unique features for different stages of development and production needs. What Is Disconnected Mode? Disconnected Mode is designed for local development and testing without requiring a direct connection to the Sitecore platform. In this mode, data is typically retrieved from static files (like YAML or JSON), and content updates are done manually. This mode is ideal for frontend developers who want to focus on building the user interface and the site’s functionality without waiting for backend integration. In Disconnected Mode , the data flow is not dependent on the Sitecore CMS. Instead, content is stored locally in static files, which are easier to manage and qu...
Read more

Beginner’s Guide: Step-by-Step Local Installation for Sitecore XM Cloud

Image
Many times, we want to accomplish a task but aren’t sure where to start—the same applies to Sitecore XM Cloud local setup and installation. In this guide, I’ll Walk you through the process of setting up a Sitecore XM Cloud environment locally, step by step. Sitecore XM Cloud is the cloud-native, headless version of Sitecore Experience Manager (XM), designed for modern, omnichannel digital experiences. It separates content management (authoring) from content delivery, enabling fast, API-driven, and scalable architectures. Developers can deliver content to web, mobile, and other channels via GraphQL APIs and Experience Edge, while content authors manage items in a cloud-first environment. Even though XM Cloud is cloud-first, a local environment is essential for: Experimenting safely with content, templates, and workflows. Testing headless frontends like Angular, React, or Next.js. Debugging GraphQL queries and APIs efficiently. Validating scheduled tasks...
Read more

Migrating from Sitecore JSS SDK to Content SDK – Best Practices and Pitfalls

Image
The Sitecore JSS SDK has been a staple for building modern headless websites with XM Cloud and Sitecore XP. It offers deep integration with the Sitecore Layout Service, letting frontend developers render content directly based on Sitecore-managed components. Now, with the introduction of the Sitecore Content SDK, teams have a lightweight, REST-first way to fetch clean JSON data, leaving rendering entirely to the frontend. For projects focused on performance, composable architectures, or custom rendering logic, the Content SDK can be a compelling choice. If you’re considering a switch from JSS SDK to Content SDK, this guide walks you through how to migrate, best practices, and the pitfalls to avoid. Why Migrate to Content SDK? Lightweight: No dependency on Layout Service rendering. Faster payloads: Returns only the requested fields, reducing over-fetching. Flexible rendering: Total control of frontend presentation. Better for static generation: Idea...
Read more