Tooling

What runs in CI and what each tool does. The repo's tooling is unusually deep for a frontend monorepo because Studio enforces a number of project-specific guardrails.

Build orchestration — Turborepo

turbo.jsonc defines a small set of pipelines: build, dev, lint, typecheck, test, clean. dependsOn: ["^build"] ensures dependent packages are built first. Caching is on with cacheMaxAge: "14d".

Turbo filters most-used in scripts: --filter=studio, --filter=docs, --filter=design-system, --filter=ui, --filter=ui-patterns.

Package management — pnpm

• pnpm-workspace.yaml declares apps/*, packages/*, blocks/*, e2e/*.
• catalog: entries pin shared library versions (react, next, @supabase/*, tailwindcss, vitest, etc.) across the workspace.
• overrides: patches transitive dependencies (most are security pins for tar, serialize-javascript, prismjs, dompurify).
• patches/react-data-grid.patch is applied to the Studio table editor.

preinstall enforces pnpm via npx only-allow pnpm.

Linting — ESLint v9

Each app and package has its own eslint.config.cjs (flat config). Shared rules come from packages/eslint-config-supabase.

Studio's eslint setup is the most elaborate:

• apps/studio/eslint.config.cjs is the main config.
• apps/studio/eslint.type-checks.config.cjs is a heavier "type-aware" config that runs as a separate CI job.
• apps/studio/eslint-rules/ defines a custom plugin including the studio/require-safe-sql-fragment rule (enforces safe SQL generation via packages/pg-meta).

Lint ratchet

apps/studio/scripts/ratchet-eslint-rules.ts is a custom safeguard. It counts violations of specific rules and asserts the count never increases:

• react-hooks/exhaustive-deps
• import/no-anonymous-default-export
• @tanstack/query/exhaustive-deps
• @typescript-eslint/no-explicit-any
• no-restricted-imports
• no-restricted-exports
• react/no-unstable-nested-components

Plus a type-checked variant for studio/require-safe-sql-fragment.

CI runs pnpm --filter studio lint:ratchet and studio-lint-ratchet.yml / studio-lint-ratchet-decrease.yml enforce the constraint on PRs and reward decreases.

Type checking

• pnpm typecheck runs tsc --noEmit for every workspace via Turborepo with --continue.
• Pre-typecheck step in Studio: next typegen to materialize Next.js generated types.
• typecheck.yml runs the full pass on PRs.

Formatting — Prettier

• Root prettier.config.mjs plus prettier-plugin-sql-cst and @ianvs/prettier-plugin-sort-imports.
• pnpm format rewrites; pnpm test:prettier only checks. CI uses the check variant in prettier.yml.

Code quality — Knip

pnpx knip (config in knip.jsonc) finds unused exports and unused dependencies.

Bundle and asset tooling

• Next.js Bundle Analyzer is wired into Studio (@next/bundle-analyzer); set ANALYZE=1 to inspect.
• scripts/upload-static-assets.sh is invoked at the end of Studio's build to push static assets to a CDN.

Testing

• Vitest with @vitest/coverage-v8. Each app/package has a vitest.config.ts.
• Playwright for e2e/studio (run via pnpm e2e).
• MSW (msw) for HTTP mocking.
• Braintrust for AI evals.

See Testing for the full layout.

Code generation

• pnpm generate:types runs supabase gen types typescript --local, used by edge function code in supabase/functions/common/.
• pnpm api:codegen (in packages/api-types) regenerates platform API types from the OpenAPI spec via Redocly.
• Studio's pnpm build:graphql-types downloads the GraphQL schema and runs graphql-codegen.
• Studio's pnpm build:deno-types generates Deno-compatible types for Edge Function authoring.
• i18n/ contains generated localization snippets.

Sentry

Every Next.js app has Sentry wiring (sentry.edge.config.ts, sentry.server.config.ts, instrumentation-client.ts). The release pipeline uploads source maps via the bundled @sentry/cli.

Feature flag / analytics tooling

• ConfigCat (packages/common/configcat.ts) — server-side flag evaluation.
• PostHog (packages/common/posthog-client.ts) — product analytics.
• hCaptcha (@hcaptcha/react-hcaptcha) — bot protection on form-heavy flows.

Misspell + grammar

• .misspell-fixer.ignore and fix-typos.yml / avoid-typos.yml workflows perform automated typo cleanup.

Markdown linting

• supa-mdx-lint (custom) with supa-mdx-lint.config.toml. Run as part of docs-lint-v2.yml.

CI workflows worth knowing

Workflow	Purpose
validate-pr.yml	Validates PR title format.
prettier.yml	Enforces Prettier across the diff.
typecheck.yml	Runs tsc --noEmit for every workspace.
studio-unit-tests.yml	Studio Vitest.
studio-e2e-test.yml	Studio Playwright e2e.
studio-lint-ratchet.yml	Enforces the ratcheted-rule counts on PRs.
studio-lint-ratchet-decrease.yml	Encourages downward movement of ratchet counts.
studio-master-alert.yml	Posts alerts when Studio's master build breaks.
studio-docker-build.yml	Publishes the supabase/studio Docker image used by self-host.
docs-lint-v2.yml, docs-tests.yml, docs-tests-smoke.yml	Docs site checks.
ui-tests.yml, ui-patterns-tests.yml, ai-tests.yml, pg-meta-tests.yml	Per-package test workflows.
braintrust-evals.yml	Runs Braintrust evals when Assistant code changes.
og_images.yml	Deploys the OG-image generation Edge Function.
mirror.yml	Mirrors the repo to internal infrastructure.

Deno types and edge

Edge Function code authored against Supabase's edge runtime gets Deno-shaped types from Studio's pnpm build:deno-types. The generated types are committed under apps/studio/types/.