webiny-api-cms-content-models

Creates Webiny Headless CMS content models via the ModelFactory builder API.

8.0k|673|Updated Jan 9, 2018
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-api-cms-content-models
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webiny-api-cms-content-models
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/content-models
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-api-cms-content-models

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Defining Headless CMS content models through a UI is slow and hard to version-control. This Skill lets you create, modify, and understand Webiny content models entirely in TypeScript code using the ModelFactory pattern, with correct field types, renderers, validators, and layouts.

Core Features & Use Cases

  • ModelFactory Builder API: Define models with fields, layouts, validators, API names, tags, and singleton behavior, then register them as extensions in webiny.config.tsx.
  • Field Types & Renderers: Covers text, longText, richText, number, boolean, datetime, asset, file, ref, object, and dynamicZone fields, including the singular-vs-plural renderer rule for .list() fields and renderer settings.
  • Advanced Modeling: Nested layouts inside object and dynamicZone fields, layout-only UI fields (separators, alerts, tabs), field rules for access control and conditional visibility, and correct SDK fields projection syntax for ref vs object sub-fields.
  • Use Case: A developer needs a Product model with a reference to an Author model, a dynamic zone of content blocks, and SEO fields hidden from non-marketing teams — this Skill produces the complete, correctly-typed definition.

Quick Start

Create a Webiny content model called Product with a required name field, a slug, a rich text description, and a reference to an Author model, registered as an API extension.

Frequently Asked Questions about webiny-api-cms-content-models

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Webiny CMS content model in code?

Implement a class satisfying ModelFactory.Interface, use the fluent builder to declare fields, layout, and API names, then export it via ModelFactory.createImplementation(). Register the file in webiny.config.tsx with an Api.Extension src prop including the full .ts extension.

Which renderer should I use for a list field in Webiny CMS?

List fields created with .list() require the plural renderer variant, such as textInputs, lexicalEditors, files, or objectAccordionMultiple. Pairing .list() with a singular renderer renders the wrong component and the field fails to save values.

How do reference fields work between Webiny content models?

Use fields.ref() with .models([{ modelId: "..." }]) to restrict which models can be referenced, and pick a renderer family: dialog, autocomplete, or inline radio/checkboxes. When querying via the SDK, ref fields need double values. nesting like values.author.values.name.

Why does my Webiny model extension fail to build?

Build failures commonly occur when the Extension src prop omits the .ts file extension or when the file uses a named export instead of export default for createImplementation(). Both the full path and default export are required.

Can I hide or disable CMS fields based on user or entry data?

Yes, use .rules() with FieldRule objects. accessControl rules match the current identity or team, while condition rules reactively compare other field values using operators like ==, contains, or isEmpty, with hide or disable actions.

How do I query object and dynamicZone sub-fields with the Webiny SDK?

Object and dynamicZone sub-fields are inline and use a single values. prefix, such as values.author.name. Only ref fields use double values. nesting because they resolve to another entry; mixing these up silently returns null.