How to convert an existing Composition into a Composition Pattern

Currently, there is no built-in way to convert an existing Composition into a Composition Pattern through the dashboard UI. However, you can perform this conversion using the Uniform API. You can perform this action using any REST API client (including the built-in Swagger UI that our API docs ship with), or create a Node.js script using our SDK.

Converting via API

To convert a Composition to a Pattern using the API, follow these steps:

1. Disconnect the composition from any project map node if it's connected, or duplicate it to create a new composition with the same content in an unattached state.

2. Fetch the existing composition JSON via API

3. Set pattern: true on the root level

4. Update the composition with the updated pattern-flag payload via the API.

After the conversion, you'll want to re-create the original composition from the new pattern after configuring slot sections and overrides and publishing the pattern.

Code Example

Here's a JavaScript example showing how to perform the conversion:

import { CanvasClient, CANVAS_DRAFT_STATE, CANVAS_PUBLISHED_STATE } from '@uniformdev/canvas';

const canvasClient = new CanvasClient({
  apiKey: 'your-api-key',
  projectId: 'your-project-id',
});

// 1. First, fetch the existing composition
const existingComposition = await canvasClient.getCompositionById({
  compositionId: 'your-composition-id',
  state: CANVAS_DRAFT_STATE,
});

// 2. Create the pattern by updating with pattern: true
await canvasClient.updateComposition({
  composition: existingComposition.composition,
  state: CANVAS_DRAFT_STATE, // 0 = draft
  pattern: true, // This is the magic flag
});

// 3. Optionally publish the pattern
await canvasClient.updateComposition({
  composition: existingComposition.composition,
  state: CANVAS_PUBLISHED_STATE, // 64 = published
  pattern: true,
});

Replace your-api-key, your-project-id, and your-composition-id with your actual values.