# Custom Dependencies

**Custom Dependencies** allow users to upload and manage **external JavaScript and CSS files** directly within an application using **Page Designer**.\
This feature makes it easy to integrate third‑party libraries or custom styling without embedding scripts directly inside pages.

Custom Dependencies are configured **at the application level**, meaning they are available for use across all pages within the application.

***

### Why Use Custom Dependencies

Custom Dependencies are useful when you need to:

* Use third‑party JavaScript libraries
* Apply shared custom CSS styles
* Reuse utility JavaScript functions across pages
* Extend UI behavior beyond built‑in features
* Maintain clean separation between UI layout and external logic

This approach avoids duplication and improves maintainability.

***

### Add Custom Dependencies to an Application

#### Step 1: Open Resources in Page Designer

1. Open **Page Designer Home**
2. Go to the **RESOURCES** tab

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FNdXGSY2WNOuBqKmRtLMI%2Fimage.png?alt=media&#x26;token=4c409e57-365e-4262-b14a-5d8730fbc83c" alt=""><figcaption></figcaption></figure>

***

#### Step 2: Add Dependency Resource

1. Open the **Dependencies** sub‑tab
2. Click the **Add Resource** button
3. Choose the dependent file to upload:
   * `.js` for JavaScript
   * `.css` for stylesheets

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F6Do1OIxwE63GYPFYl42O%2Fimage.png?alt=media&#x26;token=0f584db3-dda8-4ee5-bdf7-278c4716f308" alt=""><figcaption></figcaption></figure>

***

#### Step 3: Verify Dependency Registration

After uploading:

* The file is listed in the **Dependencies** section
* The dependency becomes available to all pages in the application
* The file is automatically loaded at runtime

No additional manual linking is required per page.

***

### Using Custom Dependencies in Pages

Once added, users can:

#### Use JavaScript Functions

* Call functions defined in uploaded `.js` files
* Integrate custom logic with page actions, events, or scripts

#### Use CSS Classes

* Apply CSS classes from uploaded `.css` files
* Style components consistently across pages

Custom Dependencies behave like native resources within the application.

***

### Common Use Cases

Typical scenarios include:

* Adding charting or utility JS libraries
* Applying corporate‑standard CSS themes
* Including animation or UI helper libraries
* Supporting legacy or proprietary scripts

***

### Design Perspective

As part of **Page Designer best practices**:

* Use Custom Dependencies for shared logic and styles
* Avoid embedding large scripts directly in pages
* Keep dependency files versioned and well‑documented
* Remove unused dependencies to reduce payload size
* Test dependencies thoroughly across environments

Custom Dependencies help keep applications **clean, modular, and enterprise‑ready**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/building-apps/ui-page-designer/ux-ui-components/pages/page-features/custom-dependencies.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.