BlueprintsLast updated July 29, 2026

Your first Blueprint

Set up a blueprint, run a plan, and deploy your first resource (a CORS origin) to a real Sanity stack.

You'll set up a blueprint, run a plan, and deploy your first resource (a CORS origin) to a real Sanity stack. By the end you'll have run the full edit, plan, deploy loop you use for everything else.

Before you begin

Node.js and npm installed.
A Sanity account, logged in. If you're not sure, run npx sanity@latest login.
An existing Sanity project, and its project ID (from the project's settings).

New to the ideas behind this? Read the Blueprints introduction first. Otherwise, start in an empty directory.

Step 1: Initialize a blueprint

Run init and follow the prompts:

The interactive setup walks you through a few choices:

Confirm the directory to create the blueprint in.
Choose your organization as the scope.
Name the new stack production.
Choose TypeScript as the format.

When it finishes, you'll have:

sanity.blueprint.ts, the blueprint file you'll edit.
.sanity/blueprint.config.json, which links the file to the new stack (gitignored by default).
@sanity/blueprints added to your package.json.

Step 2: Install dependencies

The blueprint file is real TypeScript, so install the package it imports:

Step 3: Look at the empty stack

init created a stack with no resources yet. Confirm that:

You'll see the stack you just created, with zero resources. info shows what's live and which stack you're connected to.

Step 4: Declare a resource

Open sanity.blueprint.ts and replace its contents with the blueprint file below. It declares one CORS origin so a hosted Studio can call your project's API. Swap in your own project ID:

import { defineBlueprint, defineCorsOrigin } from '@sanity/blueprints'

export default defineBlueprint({
  resources: [
    defineCorsOrigin({
      name: 'studio-cors',
      project: 'your-project-id',
      origin: 'https://my-studio.sanity.studio',
      allowCredentials: true,
    }),
  ],
})

What you just wrote:

defineCorsOrigin is a definer, a typed function that checks your input as you write it.
name is the resource's identity in the stack.
project is the project the CORS origin belongs to.
allowCredentials: true lets authenticated requests through, which a Studio needs.

Step 5: Run a plan

Before changing anything, see what a deploy would do. plan is read-only:

The output shows a single create action for studio-cors. Nothing has been created yet:

Step 6: Deploy

Apply the plan:

deploy applies the change and streams progress until the stack finishes updating. When it's done, your CORS origin is live.

Step 7: Confirm it's live

This time studio-cors appears under the stack's resources. The deployed state matches your file.

What you did

You ran the core Blueprints loop end to end:

Initialized a stack with init.
Declared a resource in the blueprint file.
Ran plan (read-only) to see the change.
Applied it with deploy and confirmed with info.

Every future change is a variation on this loop: edit the file, plan, deploy. Ready to deploy the same file to more than one environment? See Manage environments with Blueprints.

Manage environments with Blueprints

Deploy one blueprint file to staging, production, and other stacks.

Blueprints introduction

Learn what Blueprints are, how they work, and how to get started.

Deploy Blueprints from CI

How to deploy your Blueprint automatically from any CI system using a deploy token and environment variables.

Was this page helpful?