Quick Start

Get from zero to live content in under 5 minutes.

1. Install the SDK

npm install @vard-app/sdk

2. Create your Vard client

Create a single file that exports your configured client. All pages in your app import from here.

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

3. Add your API key

Get your API key from the Vard dashboard under Settings → API Key, then add it to your environment:

VARD_API_KEY=vard_live_xxxxxxxxxxxx

4. Define your schema and fetch content

Use vard.define() in a Server Component to declare what fields exist and get their values back in one call. The return type is fully inferred from your schema.

import { vard } from "@/lib/vard";
import { v } from "@vard-app/sdk";
 
export default async function Page() {
  const content = vard.define({
    hero: {
      title: v.string("Welcome"),
      subtitle: v.string("We help people."),
    },
  });
 
  return (
    <main>
      <h1>{content.hero.title}</h1>
      <p>{content.hero.subtitle}</p>
    </main>
  );
}

5. Deploy

Push your code. On the first deploy, Vard automatically syncs your schema and provisions your client’s dashboard. Your client can now edit hero.title and hero.subtitle without touching code.

Next: Field Types — learn about all available field types (v.string, v.image, v.collection, and more).