Field Types

All field builders are available on the v export from @vard-app/sdk.

import { v } from "@vard-app/sdk";

v.string()

A plain text field. Use for headlines, labels, short copy, email addresses, URLs.

v.string()                        // no default
v.string("Welcome")               // with default
v.string("Welcome", {
  label: "Hero Headline",
  description: "Shown at the top of the page",
  editableBy: "member",
})

Returns: string

v.richtext()

A rich text field rendered as Markdown. The client gets a basic rich text editor. The stored value is a Markdown string.

v.richtext()
v.richtext("## About us\n\nWe've been doing this since 2010.")

Returns: string (Markdown)

To render in JSX, use dangerouslySetInnerHTML or a Markdown renderer — rendering the raw string directly will output escaped HTML tags:

<div dangerouslySetInnerHTML={{ __html: content.bio }} />

v.image()

An image upload field. The client can upload any image file; the stored value is a URL pointing to the uploaded asset.

v.image()
v.image("https://example.com/default.jpg")

Returns: string (URL)

v.boolean()

A toggle field. Use for show/hide flags, feature switches, on/off settings.

v.boolean()           // default: false
v.boolean(true)       // default: true
v.boolean(false, {
  label: "Show testimonials section",
})

Returns: boolean

v.color()

A color picker field. The stored value is a CSS color string (hex, hsl, rgb — whatever the client picks).

v.color()
v.color("#1a1a1a")
v.color("#1a1a1a", {
  label: "Brand primary color",
})

Returns: string (CSS color)

v.collection()

A collection of typed objects. The client can add, reorder, and delete items. Each item’s fields are defined by the schema you pass in.

v.collection({
  name: v.string(),
  role: v.string(),
  photo: v.image(),
  bio: v.richtext(),
})

Returns: Array<{ name: string, role: string, photo: string, bio: string }>

Collections can be nested inside a named key:

vard.define({
  team: v.collection({
    name: v.string(),
    photo: v.image(),
  }),
});
// content.team → Array<{ name: string, photo: string }>

Field options

All field builders accept a shared options object:

v.string("Default", {
  label: "Page Title",
  description: "Shown in the browser tab and og:title",
  editableBy: "developer",
  group: "SEO",
})

v.seo()

A convenience helper that returns a pre-built set of SEO fields: metaTitle, metaDescription, and ogImage.

vard.define({
  seo: v.seo(),
});
// content.seo.metaTitle    → string
// content.seo.metaDescription → string
// content.seo.ogImage      → string (URL)

v.schema()

Creates a reusable schema fragment for use with vard.extend(). See SDK Overview for usage.

export const heroSchema = v.schema({
  hero: {
    title: v.string("Welcome"),
    photo: v.image(),
  },
});

v.merge()

Merges multiple schema fragments into a single schema object. Useful for combining fragments from different files.

import { v } from "@vard-app/sdk";
import { heroSchema } from "./hero";
import { teamSchema } from "./team";
 
export const schema = v.merge(heroSchema, teamSchema);