SDC Extras
SDC Extras enhances the Drupal Canvas editing experience for Single Directory Components (SDCs). It allows you to control how component props appear in the Canvas UI directly within your component definition files, eliminating the need for JavaScript or custom form modifications. This provides granular control over prop visibility and behavior, such as hiding props from editors or conditionally displaying them based on other prop values.
SDC Extras adds declarative directives to your Single Directory Component (SDC) definitions that control how each prop is presented in the Drupal Canvas editing UI, with no JavaScript and no per-component form alters.
Canvas automatically builds an editing form from a component's prop schema. SDC Extras lets you refine that form directly in your *.component.yml file by adding custom x-* keys to individual props:
- x-no-ui hides a prop from the Canvas UI while keeping its stored value and default, so the value still renders in your template. Ideal for developer-controlled or derived props that authors shouldn't edit.
- x-visible-when shows a prop only when another prop has a given value, e.g. reveal "CTA label" and "CTA URL" only when a "Show call to action" toggle is on. Built on Drupal's Form API #states.
Because these keys live on the prop schema (which SDC validates against the full JSON Schema meta-schema, permitting custom x-* keywords), they require no patches and follow the same convention Canvas core already uses for keys like x-translation-context and x-formatting-context.
Example
props:
type: object
properties:
internal_ref:
type: string
x-no-ui: true
show_cta:
type: boolean
title: 'Show call to action'
cta_label:
type: string
title: 'CTA label'
x-visible-when: show_ctaRequirements: Drupal 11.2+ and the Canvas module.