Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

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


# Resources
The `resources` property declares the code and assets that make up your component.

## Where to define

You can only define `resources` at the [root level of your manifest](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/root-properties/root-properties), alongside properties like `type` and `editorElement`. The `resources` property is required, and at minimum, you need `client.componentUrl`.

## Resources properties

The `resources` object supports the following properties:

<PropertyList bordered>
  <Property
    name="client"
    type="Client"
    required
    description="Component bundle and assets for the live site."
  >
    <ExpandableSection name="Client properties">
      <PropertyList>
        <Property
          name="componentUrl"
          type="string"
          required
          description="URL to the ESM component bundle. Must have a default export."
        />
        <Property
          name="cssUrl"
          type="string"
          description="URL to the component's default CSS file. Rendered once per page for all instances."
        />
        <Property
          name="moduleSpecifier"
          type="string"
          description="Module specifier for the component's React code. Maximum 100 characters."
        />
        <Property
          name="dependencies"
          type="Dependencies"
          description="Service dependencies your component needs at runtime."
        >
          <ExpandableSection name="Dependencies properties">
            <PropertyList>
              <Property
                name="serviceDependencies"
                type="string[]"
                description="Service identifiers to load. Use 'viewer-core/translations' so your component can read its translations with useService."
              />
            </PropertyList>
          </ExpandableSection>
        </Property>
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="editor"
    type="Editor"
    description="Component bundle and assets for the editor. Use when your component needs editor-specific behaviors like displaying hover states, showing expanded views, or rendering mock data."
  >
    <ExpandableSection name="Editor properties">
      <PropertyList>
        <Property
          name="componentUrl"
          type="string"
          description="URL to the ESM editor component bundle. Must have a default export."
        />
        <Property
          name="cssUrl"
          type="string"
          description="URL to the editor component's CSS file. Required if cssUrl is defined in client."
        />
        <Property
          name="moduleSpecifier"
          type="string"
          description="Module specifier for the editor component. Maximum 100 characters."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="server"
    type="Server"
    description="Component bundle for server-side rendering (SSR), improving initial load performance and SEO."
  >
    <ExpandableSection name="Server properties">
      <PropertyList>
        <Property
          name="url"
          type="string"
          description="URL to the ESM component bundle for server rendering. Must have a default export."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="sdk"
    type="SDK"
    description="SDK bundle that exposes your component's API for programmatic interaction."
  >
    <ExpandableSection name="SDK properties">
      <PropertyList>
        <Property
          name="url"
          type="string"
          description="URL to the SDK bundle. Must have a default export as the constructor."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="translations"
    type="Translations"
    description="Base path and languages for your component's translation JSON files."
  >
    <ExpandableSection name="Translations properties">
      <PropertyList>
        <Property
          name="basePath"
          type="string"
          description="Base URL for the translation files. The viewer appends '{language}.json' to fetch each file."
        />
        <Property
          name="languages"
          type="string[]"
          description="ISO-639-1 language codes your component supports."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

<br />

<blockquote className="important">

__Important:__ Your server bundle must avoid browser-specific APIs like `window` and `document`. If your component relies on these APIs, provide a fallback that renders static content on the server.

</blockquote>

## Examples

### Minimal resources

The simplest configuration, with only the required `client.componentUrl`:

```typescript
import componentUrl from './component.tsx?url';

resources: {
  client: {
    componentUrl,
  },
}
```

### Client with default CSS

A client bundle with a CSS file. The CSS is rendered once per page, regardless of how many instances of the component exist:

```typescript
import componentUrl from './component.tsx?url';
import cssUrl from './styles.module.css?url';

resources: {
  client: {
    componentUrl,
    cssUrl,
  },
}
```

### Client and editor bundles

Separate bundles for the live site and the editor:

```typescript
import componentUrl from './component.tsx?url';
import cssUrl from './styles.module.css?url';
import editorComponentUrl from './editor-component.tsx?url';
import editorCssUrl from './editor-styles.module.css?url';

resources: {
  client: {
    componentUrl,
    cssUrl,
  },
  editor: {
    componentUrl: editorComponentUrl,
    cssUrl: editorCssUrl,
  },
}
```

### Full resources configuration

A complete `resources` object with all supported properties:

```typescript
import componentUrl from './component.tsx?url';
import cssUrl from './styles.module.css?url';
import editorComponentUrl from './editor-component.tsx?url';
import editorCssUrl from './editor-styles.module.css?url';
import serverUrl from './server.tsx?url';
import sdkUrl from './sdk.ts?url';

resources: {
  client: {
    componentUrl,
    cssUrl,
    moduleSpecifier: '@wix/my-component',
  },
  editor: {
    componentUrl: editorComponentUrl,
    cssUrl: editorCssUrl,
    moduleSpecifier: '@wix/my-component-editor',
  },
  server: {
    url: serverUrl,
  },
  sdk: {
    url: sdkUrl,
  },
}
```

### Client with translations

Declare translation files and the service dependency your component needs to read them:

```typescript
import componentUrl from './component.tsx?url';

resources: {
  client: {
    componentUrl,
    dependencies: {
      serviceDependencies: ['viewer-core/translations'],
    },
  },
  translations: {
    basePath: 'https://mycdn.com/my-component/translations/',
    languages: ['en', 'es', 'fr'],
  },
}
```

## See also

- [About the Editor React Component Manifest](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest)
- [About Editor React Components](fallback::https://dev.wix.com/docs/overview/extensions-framework/site-extensions/editor-react-components)
- [States](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/states)