Block Schema & Field Types

All Field Types

Define a block's editable props with the fields.*() builder inside defineBlock. Each builder returns a field definition; the key you give it in props becomes the content key.

Builder	Description	Value Type
`fields.singleLine()`	Single-line text input	`string`
`fields.multiLine()`	Multi-line textarea	`string`
`fields.richText()`	WYSIWYG editor (Tiptap)	`string` (HTML)
`fields.numeric()`	Number input	`number`
`fields.boolean()`	Toggle switch	`boolean`
`fields.date()`	Date picker	`string` (ISO)
`fields.color()`	Color picker	`string` (hex)
`fields.media()`	Image/video upload	`string` (URL)
`fields.link()`	Internal/external URL	`string`
`fields.select()`	Dropdown (single)	`string`
`fields.multiselect()`	Multiple choice	`string[]`
`fields.repeater()`	Array of objects	`Array<object>`

Defining a Block

A block is declared with defineBlock. Its editable fields live under props:

import type { ComponentType } from "react";
import { defineBlock, fields } from "@cmssy/react";
import Component from "./src";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Component as unknown as ComponentType<{ content: Record<string, unknown> }>,
  props: {
    heading: fields.singleLine({ label: "Heading", required: true, defaultValue: "Welcome" }),
    description: fields.multiLine({ label: "Description" }),
  },
});

Field Options

Every fields.*() builder accepts the same base options:

fields.singleLine({
  label: "Heading",
  required: true,
  defaultValue: "Welcome",
  placeholder: "Enter text",
  helperText: "Main heading",
})

Available keys: label, required, defaultValue, placeholder, helperText. Select and repeater fields add a few more (below).

Select & Multiselect

Options are a plain array of strings:

props: {
  layout: fields.select({
    label: "Layout",
    options: ["grid", "list", "carousel"],
    defaultValue: "grid",
  }),
  tags: fields.multiselect({
    label: "Tags",
    options: ["featured", "new"],
  }),
}

Repeater (Arrays)

Use itemSchema — a map of nested fields.*() — to describe each row:

props: {
  features: fields.repeater({
    label: "Features",
    maxItems: 6,
    itemSchema: {
      icon: fields.singleLine({ label: "Icon Name", defaultValue: "Star" }),
      title: fields.singleLine({ label: "Title", required: true }),
      description: fields.multiLine({ label: "Description" }),
    },
  }),
}

In your component:

export default function Features({ content }) {
  return (
    <div className="grid grid-cols-3 gap-6">
      {(content.features ?? []).map((f, i) => (
        <div key={i}><h3>{f.title}</h3><p>{f.description}</p></div>
      ))}
    </div>
  );
}

Repeater also supports itemLabel, addButtonLabel, minItems, maxItems, and collapsible.