This Studio Template

Start here

This Studio Template

A starter, not a product. The steps below take you from a fresh clone to something you can ship. When you're ready, replace this page with your own.

  1. 01

    Run it

    Install dependencies, then start the dev server. It runs on localhost:3000.

    bun install
bun dev
  2. 02

    Make it yours

    Point the site at your domain: copy .env.example to .env and configure your Sanity and Cloudinary credentials.

    The site title, SEO, and favicons live in src/lib/config/site.ts. Fonts are in src/scss/base/fonts.scss, colors and theme tokens in src/scss/utils/variables.scss.

    Swap in your own favicons in public/ and public/opengraph-image.png.

    cp .env.example .env
  3. 03

    Launch Sanity Studio

    Manage content, creative projects, and site settings with the embedded Sanity Studio v3. Run the studio server on localhost:3333 or access the rewritten proxy at localhost:3000/studio.

    bun run studio:dev
  4. 04

    Motion & 3D ready

    Equipped with GSAP timelines, Lenis smooth scrolling, and Three.js / OGL for creative WebGL shader canvases. The canvas styling lives in src/scss/components/_scene.scss.

    gsaplenisthreeoglsass
  5. 05

    Check & format

    Maintain high code quality with blazing-fast Biome linting, formatting, and strict TypeScript checks.

    bun run check
bun run format
  6. 06

    Ship

    Run the checks and build both the frontend and studio bundles, then test the production preview.

    bun run build
bun run preview

    Ready for continuous deployment to Netlify via the configured netlify.toml.

Done here? Replace src/routes/index.tsx with your homepage and update src/scss/pages/home.scss. That's the only cleanup.