> 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 Table

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

## Article Content:

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


# Resources
<blockquote className="caution">

__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.

</blockquote>


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

When you build with the [CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/about-the-wix-cli.md), it handles resource management automatically: bundling your code, uploading assets, and generating the resource URLs.

## Where to define

You can only define `resources` at the [root level of your manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/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."
        />
      </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>
</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,
  },
}
```

## See also

- [About the Manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md)
- [About Editor React Components](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/about-editor-react-components.md)
- [States](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/states.md)