vtex-io-react-apps

To build VTEX IO React components for the Site Editor, you coordinate React blocks with interfaces.json declarations and contentSchemas.json. This wiring connects storefront components to the Store Framework, enabling prop editing directly within the admin Site Editor.

Interfaces.json in a VTEX IO storefront app declares the interface schemas that connect React components to the Store Framework. It maps block definitions, allowing the Site Editor to recognize and render custom storefront components and their editable properties.

You apply CSS Handles to style VTEX IO storefront components by using the vtex.css-handles package. This enforces standardized styling, allowing users to safely customize storefront blocks via CSS without altering the underlying React component structure.

Yes, you must follow the VTEX Styleguide when building admin panel React apps. Adhering to styleguide rules ensures your admin UIs maintain consistent design, accessibility, and standardized component wiring across the VTEX IO ecosystem.

Yes, you can reuse React components across both storefront blocks and admin apps. Coordinating interfaces.json and contentSchemas.json allows developers to accelerate development by sharing component logic across different VTEX IO app surfaces.

VTEX IO custom blocks may not appear in the Site Editor if their interface declarations are missing from store/interfaces.json or lack proper contentSchemas.json definitions. Properly wiring root-level React exports to the Store Framework resolves this visibility issue.