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

## Article: Resources

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/root-properties/resources.md

## Article Content:

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](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/root-properties/root-properties.md), 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](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md)
- [About Editor React Components](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/editor-react-components.md)
- [States](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/states.md)