Media Data Types

Alpha: Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.

Media data types let Wix users select and configure images, videos, and vector graphics in your component. When a Wix user edits a media field, the editor opens the Wix media manager, which is the standard dialog for browsing, uploading, and choosing media.

The category you set on each media field controls which picker the media manager opens. For example, setting the category to IMAGE_BACKGROUND opens the background images picker, while SHAPE_SOCIAL opens the social icons picker. If you omit the category, a default picker opens for that media type.

Tip: You can also control which folder the media manager opens to by setting mediaManagerInitialPath in your display group options.

Image

The image data type provides an interface for Wix users to select and configure images.

Note: Specify these additional configurations under an image field in your data item.

categoryImageCategoryTypes

Controls which image picker the media manager opens.

Example

A hero image field:

In the manifest:

Copy

In the component:

Copy

Audio

The audio data type provides an interface for Wix users to select and configure audio tracks.

Example

An audio track field:

In the manifest:

Copy

In the component:

Copy

Video

The video data type provides an interface for Wix users to select and configure videos.

Note: Specify these additional configurations under a video field in your data item.

categoryVideoCategoryTypes

Controls which video picker the media manager opens.

Example

A background video field:

In the manifest:

Copy

In the component:

Copy

VectorArt

The vectorArt data type provides an interface for Wix users to select and configure SVG vector graphics.

Note: Specify these additional configurations under a vectorArt field in your data item.

categoryVectorArtCategoryTypes

Controls which vector art picker the media manager opens.

Example

An icon field with color customization:

In the manifest:

Copy

In the component:

Copy

See also

Last updated: 17 May 2026

Did this help?