About the Manifest

The manifest is a TypeScript configuration object that you write alongside your React component. It tells the editor what parts of your component are customizable, such as editable text, styling options, layout behavior, and visual variants. Then, the editor uses that information to generate all the panels, controls, and interactions that Wix users need to configure your component.

You build your React component first: the markup, styles, and behavior. Then you write a manifest that describes its structure to the editor. The manifest references your component's CSS selectors, declares which data Wix users can edit, and specifies which CSS properties they can customize. From that declaration, the editor handles everything else so that you don't need to build settings UI yourself.

To learn by building, see Tutorial | Build a Manifest Step by Step.

Structure

The manifest separates component configuration into 5 distinct concerns:

  • type: A unique identifier for the component.
  • description: A short description of the component's purpose.
  • resources: Declares the code and assets for your component.
  • installation: Controls initial sizing and placement when a Wix user first adds the component.
  • editorElement: Defines what Wix users can edit and how the editor UI is configured.

For the full property reference, see Root Properties.

How editorElement works

Most of your work happens inside editorElement. Each property you define there automatically generates editor UI:

  • data: Settings panel with inputs matching each data type, such as text fields, dropdowns, and toggles. If media types like image or video are included, there's a media button that opens the Wix Media Manager.
  • cssProperties and cssCustomProperties: Design panel with controls for colors, borders, corners, shadows, spacing, and more.
  • layout: Resize handles and stretch and positioning behavior on the canvas.
  • elements: Independent selection and configuration for inner parts of your component.
  • presets: A presets panel for switching between visual variations.
  • states: A state selector in the design panel for styling conditions like hover or disabled.
  • actions and customActions: Buttons in the action bar that appears when a Wix user selects the component.
  • interactions: An animation panel for entrance effects, scroll triggers, and other declarative interactions.

For the full property reference, see Editor Element.

See also

Did this help?