canvas-component-definition

To define a React component for the Drupal Canvas workbench, you need an index.jsx entry point, a component.yml metadata file, and associated mocks. The component folder name must match the machineName specified in your component.yml file.

The required top-level keys in component.yml for Canvas components are name, machineName, status, required, props, and slots. These keys enforce the standardized component contract needed for consistent previews and validation.

You validate naming conventions for Canvas components by ensuring the folder name matches the machineName and consulting the references/naming.md file. This structural rule enforces the canonical component contract during creation and review.

The canonical Canvas component contract provides a standardized interface for React components. It enables consistent previews, validation, and integration with the Workbench environment across Drupal Canvas workflows.

Yes, you can use this to migrate existing React components into Canvas workflows. It supports component evolution from creation to migration by enforcing structural rules and generating required Workbench mocks and references.

Canvas component validation fails without mocks.json because the canonical contract requires associated mocks alongside the component folder. These mocks enable consistent previews and integration with the Workbench environment.