SveltyCMS uses a 3-Pillar Widget System for content field types. Each widget is composed of three parts: a Definition (schema + validation), an Input component (editor), and a Display component (renderer).

The 3 Pillars

Pillar	File	Purpose
Definition	index.ts	createWidget() with Valibot schema, GUI config, and validation rules
Input	Input.svelte	Entry editor component rendered in the collection form
Display	Display.svelte	Read-only render component for public-facing views

Widget Factory

All widgets are registered via the createWidget() factory from @widgets/widgetFactory:

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

// Folder: src/widgets/custom/my-widget/  →  Name: "MyWidget"
export default createWidget<{ maxLength?: number }>({
  Name: "MyWidget",
  validationSchema: (field) => v.string([v.maxLength(field.maxLength ?? 100)]),
  GuiSchema: { maxLength: { widget: "number", label: "Max Length" } },
});

Naming: folder kebab-case, factory Name PascalCase, widgetNameToFolder(Name) === folder. See Marketplace naming.

Widget Locations

Type	Location	Discovery
Core Widgets	src/widgets/core/{kebab}/	import.meta.glob + naming gate
Custom Widgets	src/widgets/custom/{kebab}/	Same glob; invalid names refused
Marketplace	src/widgets/marketplace/{kebab}/	Vite glob + boot scan; invalid packages skipped

Related

• Widget Architecture
• Widget Development Guide
• Widget Factory