Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.
The Boilerplate

Universal Editor for developers

The Adobe Commerce boilerplate ships with the Universal Editor (UE) instrumentation for all content and commerce blocks (for example, Hero, Cards, Cart, and so on). This page covers how to activate it and how to instrument the custom blocks you add. The UE setup and block instrumentation are identical for Platform as a Service (PaaS), Adobe Commerce as a Cloud Service, and Adobe Commerce Optimizer—no backend-specific configuration. Your site’s configuration (backend connection via config.json) is covered in the Create a storefront and Architecture topics.

Enable Universal Editor for your DA.live site

Add the editor.path key-value to your Document Authoring (DA) org config at https://da.live/config#/{your-org}/ . See the Setup Universal Editor guide on DA.live for the exact format, placeholders, and behavior.

Built-in block instrumentation

All content and commerce blocks in the Commerce boilerplate include the three JSON files the Universal Editor requires:

Table: JSON files for UE block instrumentation.

FilePurpose
component-definition.jsonRegisters blocks and their table structure
component-models.jsonDefines the fields shown in the UE properties panel
component-filters.jsonControls which child components a container block accepts

No additional setup is needed for these blocks. They are ready to edit in context out of the box.

Instrument custom blocks

When you add a new block to your project, create a JSON file in the folder for that block so the Universal Editor can recognize and edit it. The Commerce boilerplate uses blocks/{block-name}/_{block-name}.json (for example, blocks/product-recommendations/_product-recommendations.json) with definitions, models, and filters objects.

  1. Create blocks/{your-block}/_{your-block}.json with definitions, models, and filters. Reference the product-recommendations block for key-value blocks or the accordion block for container blocks.

  2. Commerce blocks (for example, commerce-myblock) and product blocks (for example, product-myblock) are picked up automatically by the models/_component-definition.json globs ../blocks/commerce-*/_*.json#/definitions and ../blocks/product-*/_*.json#/definitions. For other blocks, add an entry to the Blocks group in models/_component-definition.json:

    { "...": "../blocks/your-block/_*.json#/definitions" }

  3. Run the bundler to regenerate the root-level JSON files:

    npm run build:json

For detailed syntax, see the Universal Editor developer reference on DA.live.

Resources