How It Works

Vard has three moving parts: your schema, the build pipeline, and the content API.

The schema

You define your content structure in TypeScript using the v helpers. Every field you declare becomes an editable input in the client dashboard.

import { v } from "@vard-app/sdk";
 
// This schema...
const schema = {
  hero: {
    title: v.string("Welcome"),
    photo: v.image(),
  },
  team: v.collection({
    name: v.string(),
    role: v.string(),
    photo: v.image(),
  }),
};
 
// ...produces these dashboard fields:
// hero.title   → text input, default "Welcome"
// hero.photo   → image upload
// team         → collection: add/reorder/delete members

The schema is the source of truth. Rename a field in code → it’s renamed in the dashboard. Delete a field → it’s hidden (but its value is preserved).

The build pipeline

When you deploy your site, the SDK’s build scanner reads your schema and calls the Vard API to sync your field definitions. This is what provisions (or updates) the client dashboard.

npm run build
  → SDK scans vard.define() calls
  → Sends definitions to Vard API
  → Vard updates the dashboard fields
  → Your site is deployed

You don’t run any extra commands. The sync happens as part of your normal build.

The content API

At runtime, your app fetches content from Vard’s content API using your API key. The response is a structured object that matches your schema — fully typed.

const content = vard.define({
  hero: { title: v.string("Welcome") },
});
// content.hero.title → whatever the client last saved, or "Welcome" if unset

Default values in your schema are returned when a field has no saved value. This means your site works correctly the moment it’s deployed — no waiting for the client to fill anything in.

The client dashboard

Once deployed, your client logs into their Vard workspace and sees only the fields you’ve defined. They edit, hit Publish, and the changes are reflected on your site within the next revalidation interval (or immediately for dynamic pages).

Your client never touches the codebase. You never touch the content.

Summary