Build the site.
Let clients run it.
Define your content schema in TypeScript. Deploy once. Your clients get a beautiful dashboard to edit text, images, and collections — without calling you.
Free forever on your first site. See all plans →
// vard.config.ts
import { vard, v } from "@vard-app/sdk"
export default vard({
hero: {
title: v.string("Welcome"),
photo: v.image(),
},
team: v.collection({
name: v.string(),
role: v.string(),
photo: v.image(),
}),
})Content
hero
team
How it works.
From schema to deployed site in three steps.
Define your schema
Use @vard-app/sdk to declare exactly what clients can edit — strings, images, collections — in TypeScript.
export default vard({
hero: { title: v.string() },
team: v.collection({
name: v.string(),
photo: v.image(),
}),
});Deploy your site
Build and ship your static site as normal. Vard automatically provisions the client dashboard.
$ npm run build ✓ Vard dashboard provisioned
Clients take over
Clients edit content on their dashboard. No developer needed, no redeploy, no back-and-forth.
The Mapper
Your schema. Every page.
Define a field once in TypeScript. It flows to your client's dashboard — and out to every page on their site that uses it. Hover any line to trace where it lands.
hero
team
How it ships
What every deployment includes.
Type-safe schema
Define content with TypeScript. Get autocomplete, runtime defaults, and a synchronized client dashboard — all from one schema.
Client dashboard
Every deployment automatically gets a polished editing interface. Clients change text, upload images, and manage collections without touching code.
Granular permissions
Owner, developer, member, or viewer. Control exactly who can change what — down to individual fields.