---
title: Client resources
slug: cms-11/dev-docs/client-resources
docTags: 
createdAt: 2026-07-22T19:45:18.655Z
---

You can do this through the `EPiServer.Framework.Web.Resources.ClientResource` class and interfaces, to render or inject client resources into content without modifying the templates.

## Define client resource definitions in module.config

The client resource provider finds and returns definitions of client resources, defined in manifests of public and protected modules and apps. You can request the definition by name and add it to the page. You do not need a custom client resource provider if you define the resources in [module.config](docId\:RZVSXXKVRj26ep5OsAUB-). The following example shows client resource definitions in a module manifest:

```xml
<?xml version="1.0" encoding="utf-8" ?>
    <module>
      <clientResources>
        <add name="epi.samples.Module.Styles" 
             path="ClientResources/Styles.css" 
             resourceType="Style"/>
      </clientResources> 
    </module>
```

## Implement the custom client resource provider

The client provider class must implement the `EPiServer.Framework.Web.Resources.IClientResourceProvider` interface, and you should decorate it with `EPiServer.Framework.Web.Resources.ClientResourceProviderAttribute` to register this implementation automatically. In the following example, the sample client resource provider returns one script resource that depends on another client resource provider. The provider resolves the full path to the script file in the module directory by module name.

```csharp
[ClientResourceProvider]
public class ClientResourceProvider: IClientResourceProvider {
  public IEnumerable<ClientResource> GetClientResources() {
    return new [] {
      new ClientResource {
        Name = "epi.samples.Module.FormHandler",
          Path = Paths.ToClientResource("SampleModuleName", "ClientResources/FormHandler.js"),
          ResourceType = ClientResourceType.Script,
          Dependencies = new List<string> {
            "OtherResourceName"
          }
      }
    };
  }
}
```

## Require client resources

You can require client resources (often when developing an add-on or plug-in) to render on the page without accessing and changing page templates.

### Implement client resource register

You can implement the `EPiServer.Framework.Web.Resources.IClientResourceRegistrator` interface to register client resources for specific rendering areas, which depends on the current context.

You must execute client resource registers before rendering a page. The code calls register automatically if templates inherit base classes for Razor pages or controllers that are defined in CMS (`EPiServer.Web.Mvc.RazorPageModel` and `EPiServer.Web.Mvc.ContentController`). Also, when you request resources for CMS page templates, the resources can inherit the base register class. You should decorate the register implementation class with `EPiServer.Framework.Web.Resources.RequireClientResourcesAttribute` to make it discoverable automatically.

In the following code example,

- `RegisterResources` method takes one argument: the list of required client resources.
- Information from the current HTTP context can decide on the required resources for this context. An implementation that needs access to the current HTTP context should take a dependency to `Microsoft.AspNetCore.Http.IHttpContextAccessor`.
- The list of required client resources provides the number of `Require` methods to register required client resources.
- You can require a client resource by name if you know the resource in any module manifest, or a custom resource provider returns it. The example register requires two resources by name, defined in a sample module manifest, and a sample client resource provider.

```csharp
[ClientResourceRegistrator]
public class ClientResourceRegister: IClientResourceRegistrator {
  public void RegisterResources(IRequiredClientResourceList requiredResources) {
    requiredResources.Require("epi.samples.Module.Styles");
    requiredResources.Require("epi.samples.Module.FormHandler").AtFooter();
    requiredResources.RequireScript("http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js").AtFooter();
  }
}
```

:::hint{type="info"}
**Note**
The third resource was not defined in `module.config` or provider and this resource is required using its URL in sample register implementation.
:::

You can require a JavaScript, CSS, or HTML resource by specifying the URL or inline content you should inject on the page.

See also: `EPiServer.Framework.Web.Resources.IRequiredClientResourceList` members.

### Client resource settings

Each `Require` method returns settings for required client resource to specify an area where you render a resource and filter resources by type.

**Rendering area**

The rendering area is a string that identifies the place where you render a resource in templates.

CMS requires two default rendering areas for templates:

- **Header** for resources that you should add inside the `<head>` tag. You should require styles for this area.
- **Footer** for resources that you should add at the bottom of the page before closing `</body>` tag. You should put scripts in this area.

You can set the rendering area for `resource` by using `AtArea(areaName)`, `AtHeader()`, `AtFooter()` methods of client resource settings.

The **Header** is the default option if you do not specify rendering area explicitly. The sample register requires a style resource without setting the area, so this style is rendered in the Header area. **Footer** area explicitly requires two other script resources.

**Filter Resources by Type**

Several resources of different types are sometimes grouped and have the same name. You can request only resources of a certain type when you request resources by name. For example, you can define jQuery UI scripts and CSS files using the one name `jquery.ui`. Then require jQuery UI style resource in the header area and require scripts in the Footer:

```javascript
requiredResources.Require("jquery.ui").StylesOnly().AtHeader();
requiredResources.Require("jquery.ui").ScriptsOnly().AtFooter();
```

### Request client resources using the ClientResources class

Client resource register requires implementation typically when you develop a module and add-on that needs injections.

You can require client resources with the `EPiServer.Framework.Web.Resources.ClientResources` static class, which provides `Require` methods with the same signatures as methods in `IRequiredClientResourceList` interface, if you need to request client resources in code behind or directly in templates. Request `resource` before you render required resources for the corresponding area.

## Render the required client resources

Use HTML helper to render required client resources for a corresponding area. A template must render the required client resources for at least two default areas. Render resources for header area inside the`<head>` tag. Render resources for the footer area at the bottom of the page before the closing `</body>` tag.

### Web Forms control

Use `EPiServer.Framework.Web.WebControls.RequiredClientResources` control to render required resources in Web Forms templates. The following code renders client resources required for header area:

```xml
<head runat="server">
    ...
    <EPiServer:RequiredClientResources RenderingArea="Header" 
                                       ID="RequiredResourcesHeader" 
                                       runat="server" />
</head>
```

### MVC Helper

Use HTML helper extension to render required resources in MVC templates. The following code renders client resources required for the **Footer** area:

```xml
<html>
    ...
    <%= Html.RequiredClientResources(RenderingArea.Footerbody>
</html>
```