Sanity Page Builder

The most complete open-source page builder for Sanity + Next.js. 26 content blocks, 16 custom studio inputs, 9 grid layouts, visual style controls, blog system, and seed script.

By ognjen

Loading Preview

README

The most complete open-source page builder template for Sanity + Next.js.

26 content blocks, 16 custom studio inputs, drag-and-drop grid layout, full visual editing.

Custom Studio Inputs

Visual layout picker, spacing controls, color pickers, and live previews — all built as custom Sanity inputs.

Structure

├── studio/       Sanity Studio (standalone, port 3333)
├── frontend/     Next.js app (port 3000)
└── package.json  root workspace orchestrator

1. Install dependencies

npm install

2. Set up environment variables

cp studio/.env.example studio/.env
cp frontend/.env.example frontend/.env

Fill in your Sanity project ID and dataset in both .env files.

3. Seed demo data (optional)

npm run seed

4. Start development

npm run dev

Frontend: http://localhost:3000
Studio: http://localhost:3333

Hero Section, Grid Row, Call to Action, Rich Text, Image, Image Gallery, FAQ, Form, Feature Card Grid, Testimonial Carousel, Testimonial Quote, Accordion, Tabbed Content, Button Group, Icon Text, Stat Metric, Pricing Card, Alert Notice, Code Block, Data Table, Social Embed, Logo Row, Map Embed, Countdown Timer, Lottie Animation, Spacer/Divider, Table of Contents.

Type Safety

GROQ query results are fully typed via Sanity TypeGen. Regenerate after schema changes:

npm run typegen

Types are generated to frontend/src/sanity/types.ts with aliases in frontend/src/types/sanity.ts.

Deployment

Studio

npm run deploy:studio

Frontend

Deploy the frontend/ directory to Vercel, Netlify, or any Node.js host.

Set the Root Directory to frontend in your hosting provider.

Validate Template

npm run validate

Ensures the Sanity CLI can properly read your template configuration.

Content Revalidation

Pages use ISR with a 24-hour revalidation window. For instant updates when editors publish in Sanity, set up the on-demand webhook:

Generate a secret: openssl rand -hex 32
Add SANITY_REVALIDATE_SECRET to your hosting env vars with the generated secret
In Sanity Manage → API → Webhooks, create a webhook:
- URL: https://your-domain.com/api/revalidate
- Secret: same secret from step 1
- Filter: _type in ["homePage", "page", "blogPost", "siteSettings"]
- Projection: {_type, slug}

Published changes will reflect on the site within seconds.

More Info

License

MIT