Block Development Guide

Block Architecture

Every Cmssy block consists of three layers:

1. config.ts — defines schema (editable fields), metadata, and requirements
2. Component.tsx — React component that receives content and context
3. block.d.ts — auto-generated TypeScript types from your schema

When a user adds your block to a page, the admin panel renders an editor form based on your schema. The content values are passed to your component as content prop.

---

BlockProps & PlatformContext

BlockProps

interface BlockProps<T = Record<string, unknown>> {
  content: T;
  context?: PlatformContext | null;
}

PlatformContext

interface PlatformContext {
  language: string;
  isPreview?: boolean;
  isDraftMode?: boolean;
  workspace?: { id: string; name?: string };
  auth?: BlockAuthContext;
  i18n?: BlockI18nContext;
  pages?: { items: PageItem[]; total: number; hasMore: boolean };
  localizeHref?: (href: string) => string;
}

Usage Example

import type { PlatformContext } from "@cmssy/cli/config";

export default function MyBlock({ content, context }: {
  content: { heading: string };
  context?: PlatformContext;
}) {
  const lang = context?.language ?? "en";
  const href = context?.localizeHref?.("/about") ?? "/about";
  return (
    <section>
      <h1>{content.heading}</h1>
      <a href={href}>About</a>
    </section>
  );
}

---

Next Steps

• Schema & Field Types — All field types, repeaters, conditional fields, groups
• Advanced Features — Requirements, layout blocks, styling, SSR, GraphQL