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.

• 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.

Run init and follow the prompts:

npx sanity@latest blueprints init

pnpm dlx sanity@latest blueprints init

yarn dlx sanity@latest blueprints init

bunx sanity@latest blueprints init

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.

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

npm install

pnpm install

yarn install

bun install

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

npx sanity@latest blueprints info

pnpm dlx sanity@latest blueprints info

yarn dlx sanity@latest blueprints info

bunx sanity@latest blueprints info

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

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.

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

npx sanity@latest blueprints plan

pnpm dlx sanity@latest blueprints plan

yarn dlx sanity@latest blueprints plan

bunx sanity@latest blueprints plan

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

Deployment Plan
  + create  studio-cors  sanity.project.cors

  1 create

Apply the plan:

npx sanity@latest blueprints deploy

pnpm dlx sanity@latest blueprints deploy

yarn dlx sanity@latest blueprints deploy

bunx sanity@latest blueprints deploy

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

npx sanity@latest blueprints info

pnpm dlx sanity@latest blueprints info

yarn dlx sanity@latest blueprints info

bunx sanity@latest blueprints info

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

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.