I’m hoping to use Sanity as an earlier part of our design and prototyping workflow. Are there any techniques or plugins folks would recommend to – 1. Create Sanity schemas...

7 replies

Last updated: Dec 15, 2020

I’m hoping to use Sanity as an earlier part of our design and prototyping workflow.
Are there any techniques or plugins folks would recommend to –

1. Create Sanity schemas via a GUI?
2. Populate a Sanity instance with example content based on the schema (similar to using Faker.js directives)?
Wish #1 would definitely be helpful in some circumstances, although not critical.

Wish #2 would be vital to exemplify a model, to better design against it.

How are others faking or mocking realistic dummy data in Sanity?

AI Update

Great questions! Using Sanity early in design/prototyping is smart. Let me address both of your needs:

1. Creating Schemas via GUI

There isn't an official GUI schema builder in Sanity Studio. Schemas are typically defined in TypeScript/JavaScript code, which gives you version control, collaboration benefits, and type safety. However, there are a couple of approaches:

@sanity-typed/schema-builder - This plugin provides a TypeScript-based schema builder with full type inference. While still code-based, it offers better developer experience with autocomplete and type safety.
Visual planning tools - Some teams use flowchart makers or diagramming tools for initial content modeling, then translate those to code. This can help with stakeholder communication during prototyping.

The code-first approach actually works well for prototyping since you can iterate quickly, commit changes, and share schemas with your team through version control.

2. Generating Mock/Seed Data (Critical for your workflow!)

This is where Sanity has you covered! There are several excellent options:

Best option: @sanity-typed/faker plugin

The @sanity-typed/faker plugin generates realistic mock data directly from your schemas using Faker.js under the hood. It infers data types from your schema and creates appropriate fake content automatically.

import { sanityConfigToFaker } from "@sanity-typed/faker";
import { defineConfig } from "sanity";

// Generate mock data based on your schema
const mockData = sanityConfigToFaker(yourConfig);

Official approach: CLI + custom scripts

Sanity has official documentation on generating demo content. You can write scripts using Faker.js to generate NDJSON files, then import them using the Sanity CLI:

Create a script that generates fake data matching your schema
Output to NDJSON format or use transactions to create documents directly
Import with sanity dataset import data.ndjson or execute with sanity exec

The official guide walks through creating sophisticated seed scripts that handle:

References between documents
Image uploads with client.assets.upload()
Converting HTML to Portable Text using @sanity/block-tools
Batching with p-limit to avoid rate limits
Repeatable seed data for different environments

Template example

The Sanity + Remix template includes a working example of a seed script using Faker to populate a fresh Studio with content - you can examine this for implementation patterns.

Prototyping Workflow Recommendation

For your design/prototyping workflow, I'd suggest:

Define schemas in code (iterate quickly with hot reloading in Studio)
Use @sanity-typed/faker or a custom seed script to instantly populate with realistic data
Share the seeded Studio with designers/stakeholders for feedback
Iterate on both schema and frontend design together

This gives you the "exemplified model" you need while keeping everything version-controlled and reproducible across environments. You can even add a fake: true boolean field to all generated content, making it easy to delete and regenerate seed data whenever you update your schema during prototyping.

The combination of Sanity's auto-generated editing interface from your schema + rich mock data means you can get realistic prototypes in front of stakeholders very quickly!

user Y

is pre-populating a Sanity database with mock content something you’ve run into before (e.g. to support a content-first design/dev process)?

Hey there! 🙂
As far as I know there does not exist a GUI tool for creating schemas. That would be lovely though! So if you find one let me know
😄
In regards to 2: Faker.js looks very unassuming on what you do with it. So I picture you can easily make a node script that creates objects for your schema with Faker.js data and either saves it to an

ndjson

file that you later can import into Sanity via the CLI or directly by using the JS client so you don't have to temporaily store the data on local disk.

☝️ Right on!
I'd also add that when I worked with Sanity back in the agency days, we also strived to get real project content in as early as possible (we actually pretty much banned

lorem ipsum

because real content always brings surprises).

user S

has made a schema generator that takes you one step closer to that GUI experience. https://sanity-schema.simeongriggs.dev/ You could also check out the Sanity Snippets for VS Code if you want to make'em quicker.

☝️ Right on!
I'd also add that when I worked with Sanity back in the agency days, we also strived to get real project content in as early as possible (we actually pretty much banned

lorem ipsum

because real content always brings surprises).

user S

user A

user Y

Thanks!
Using Faker to emulate realistic content would be great.

I picture you can easily make a node script that creates objects for your schema with Faker.js data and either saves it to an
ndjson
file that you later can import into Sanity via the CLI or directly by using the JS client

Are there any analogous code samples you code point me for sorting out how to build a pipeline like this 👆?

Say you want to generate 10 000 random users. I imagine the Faker.js script can look something like this:

// file: generate_data.js
const faker = require("faker");

const noUsersToGenerate = 10000; // 10 000

for (let i = 0; i < noUsersToGenerate; i++) {
  const newUser = {
    _id: faker.random.uuid(),
    _type: "user",
    name: faker.name.findName(),
    email: faker.internet.email(),
  };

  console.log(JSON.stringify(newUser));
}

Which will output

ndjson

directly that you can re-route to a file:

$ node generate_data.js > my_fake_data.ndjson

Which you can then import to Sanity with the CLI:

$ sanity dataset import my_fake_data.ndjson name-of-my-dataset

I'm sure you can do this a lot of fancy ways where the generate script'll parse your Sanity schema so you don't have to write it manually. But it doesn't have to be more complex than this to get you started I think
🙂
Hope it helps! Please share in
i-made-this if you make something cool 😄

Thanks so much Benedicte. 🙌
I’ll play with this to see what results I can possibly build out.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo