> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Media Data Types

## Article: Media Data Types

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/media-data-types.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Media Data Types
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.

<blockquote className="tip">

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

</blockquote>

## 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](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property
    name="category"
    type="ImageCategoryTypes"
    description="Controls which image picker the media manager opens."
  >
    <ExpandableSection name="ImageCategoryTypes values">
      <PropertyList>
        <Property name="IMAGE" description="General images." />
        <Property name="IMAGE_BACKGROUND" description="Background images." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Example

A hero image field:

In the manifest:

```typescript
editorElement: {
  data: {
    heroImage: {
      dataType: "image",
      displayName: "Hero Image",
      defaultValue: {
        uri: "wix:image://v1/abc123.jpg",
        url: "https://static.wixstatic.com/media/abc123.jpg",
        name: "hero-image.jpg",
        width: 1920,
        height: 1080,
        quality: 90,
      },
      image: {
        category: "IMAGE",
      },
    },
  },
}
```

In the component:

```tsx
import type { Image } from '@wix/editor-react-types';

interface HeroProps {
  heroImage?: Image;
}

const Hero = ({ heroImage }: HeroProps) => (
  <img src={heroImage?.url} alt={heroImage?.alt} />
);
```

## 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:

```typescript
editorElement: {
  data: {
    backgroundMusic: {
      dataType: "audio",
      displayName: "Background Music",
    },
  },
}
```

In the component:

```tsx
import type { Audio } from '@wix/editor-react-types';

interface PlayerProps {
  backgroundMusic?: Audio;
}

const Player = ({ backgroundMusic }: PlayerProps) => (
  <audio src={backgroundMusic?.url} title={backgroundMusic?.title} />
);
```

## 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](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property
    name="category"
    type="VideoCategoryTypes"
    description="Controls which video picker the media manager opens."
  >
    <ExpandableSection name="VideoCategoryTypes values">
      <PropertyList>
        <Property name="VIDEO" description="Standard video, including transparent videos." />
        <Property name="VIDEO_TRANSPARENT" description="Transparent videos only." />
        <Property name="VIDEO_OPAQUE" description="Videos without transparency." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Example

A background video field:

In the manifest:

```typescript
editorElement: {
  data: {
    backgroundVideo: {
      dataType: "video",
      displayName: "Background Video",
      defaultValue: {
        uri: "wix:video://v1/def456.mp4",
        hasAudio: true,
        fps: 30,
        sources: [
          {
            quality: "1080p",
            width: 1920,
            height: 1080,
            types: [{ format: "mp4", uri: "wix:video://v1/def456_1080p.mp4" }],
          }
        ],
        poster: {
          uri: "wix:image://v1/poster123.jpg",
          url: "https://static.wixstatic.com/media/poster123.jpg",
        },
      },
      video: {
        category: "VIDEO_OPAQUE",
      },
    },
  },
}
```

In the component:

```tsx
import type { Video } from '@wix/editor-react-types';

interface BackgroundProps {
  backgroundVideo?: Video;
}

const Background = ({ backgroundVideo }: BackgroundProps) => {
  const src = backgroundVideo?.sources[0]?.types[0]?.url;
  return <video src={src} poster={backgroundVideo?.poster?.url} autoPlay loop muted />;
};
```

## 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](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property
    name="category"
    type="VectorArtCategoryTypes"
    description="Controls which vector art picker the media manager opens."
  >
    <ExpandableSection name="VectorArtCategoryTypes values">
      <PropertyList>
        <Property name="SHAPE_ALL" description="All vector art and icons (includes every subcategory below)." />
        <Property name="SHAPE_BASIC" description="Simple geometric shapes (square, circle, triangle, etc.)." />
        <Property name="SHAPE_ART" description="Vector art shapes." />
        <Property name="SHAPE_LOCATION" description="Location icons." />
        <Property name="SHAPE_DOCUMENTS" description="Document icons." />
        <Property name="SHAPE_SOCIAL" description="Social icons." />
        <Property name="SHAPE_ARROWS" description="Arrow icons." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Example

An icon field with color customization:

In the manifest:

```typescript
editorElement: {
  data: {
    icon: {
      dataType: "vectorArt",
      displayName: "Icon",
      defaultValue: {
        uri: "wix:vector://v1/shape789.svg",
        viewBox: "0 0 100 100",
        contentBox: "10 10 80 80",
        contentType: "shape",
        colors: {
          "color-1": "#FF0000",
          "color-2": "#00FF00",
        },
        svgContent: "<svg>...</svg>",
      },
      vectorArt: {
        category: "SHAPE_ART",
      },
    },
  },
}
```

In the component:

```tsx
import type { VectorArt } from '@wix/editor-react-types';

interface IconProps {
  icon?: VectorArt;
}

const Icon = ({ icon }: IconProps) => (
  <span dangerouslySetInnerHTML={{ __html: icon?.svgContent ?? '' }} />
);
```

## See also

- [Data Overview](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md)