SveltyCMS widgets are built on a strict 3-Pillar pattern — a Valibot-validated definition (index.ts), an input component (Input.svelte), and a display component (Display.svelte) — composed via createWidget() from the widget factory.

Guides

• Widget Development — Quick start, lifecycle, and Input/Display component contracts.
• Widget Marketplace — Packaging widgets for marketplace.sveltycms.com.
• Widget System Overview — Widget store, runtime integration, and lazy loading.
• Widget Development Guide — Step-by-step walkthrough for building custom widgets.

Core Pattern

import { createWidget } from "@widgets/widgetFactory";
import * as v from "valibot";

export default createWidget<{ maxLength?: number }>({
  Name: "myWidget",
  validationSchema: (field) => v.string([v.maxLength(field.maxLength ?? 100)]),
  GuiSchema: { maxLength: { widget: "number", label: "Max Length" } },
});