SDK Overview

The @vard-app/sdk package exports two things: a client factory (createVardNext for Next.js, createVard for everything else) and the field builder v.

Creating a client

lib/vard.ts


import { createVardNext } from "@vard-app/sdk/next";
 
export const vard = createVardNext({
  apiKey: process.env.VARD_API_KEY,
  revalidate: 60,
});

Create one client per project and export it. Import from this file everywhere else.

Defining content

vard.define(schema) takes a schema object and returns a typed content object. Call it in Server Components — it reads from the prefetched content store synchronously.


import { vard } from "@/lib/vard";
import { v } from "@vard-app/sdk";
 
const content = vard.define({
  hero: {
    title: v.string("Default title"),
    photo: v.image(),
  },
});
 
content.hero.title // string
content.hero.photo // string (URL)

Fetching asynchronously

For fully dynamic pages, use vard.get() which returns a promise:


const content = await vard.get();

Co-locating schema with pages

Use v.schema() to define a schema fragment next to the component that uses it, then merge it in with vard.extend():

app/team/schema.ts


import { v } from "@vard-app/sdk";
 
export const teamSchema = v.schema({
  team: v.collection({
    name: v.string(),
    role: v.string(),
    photo: v.image(),
  }),
});

app/team/page.tsx


import { vard } from "@/lib/vard";
import { teamSchema } from "./schema";
 
const { team } = await vard.extend(teamSchema).get();
// team → Array<{ name: string, role: string, photo: string }>

Field options

Every field builder accepts an optional options object as its last argument:


v.string("Default", {
  label: "Hero Title",           // shown in the dashboard
  description: "The main H1",   // hint text below the field
  editableBy: "member",         // minimum role to edit ("owner" | "developer" | "member" | "viewer")
  group: "Hero Section",        // groups related fields in the dashboard sidebar
})

See Field Types for the full reference.