# JavaScript component

## What is a JavaScript Component?

You can create your Custom JS components and pass values to them from anywhere else in the application via parameters. Here is a short demo of how to do this:

1. Add an HTML component to your design
2. Add a Text Field to your design
3. From the Right Menu, change the parameter
4. Choose the correct parameter
5. Rename the parameter
6. Change the value of the HTML
7. Add a test value in the text field

## Create a JavaScript Component

A Custom Component uses [Web Component](https://www.webcomponents.org/introduction) specification to integrate any **JS-based** component to **Jet Admin** – this allows you to use any **Frameworks** and **Libraries** you like as long as you create them as custom **Web Components**. So it can be **React**, **Angular**, or **Vue. js-based** components, or any other.

{% content-ref url="/pages/0irNLwDyGeCqXwjw6rmL" %}
[Create a JavaScript Component](/user-guide/design-and-structure/components/custom-component/create-a-javascript-component.md)
{% endcontent-ref %}

## Set JavaScript Component Inputs

You can specify **Inputs** to pass data inside **the** Custom Component from **Jet Admin** if you have defined custom attributes for your Custom Component (Examples from GitHub include them already).

{% content-ref url="/pages/mANjyKuQYW01kzmB2eKz" %}
[Set JavaScript Component Inputs](/user-guide/design-and-structure/components/custom-component/set-javascript-component-inputs.md)
{% endcontent-ref %}

## Use JavaScript Component Outputs

You can specify **Outputs** to take from your Custom Component and use their values in other **Jet Admin** components**.** For such cases, you should set **Outputs** inside your Custom Component by sending **CustomEvent** with **Output** name and its value in the **detail** field (Examples from GitHub include it already).

{% content-ref url="/pages/oCn0iSyVLiGLeSpP2Xt8" %}
[Use JavaScript Component Outputs](/user-guide/design-and-structure/components/custom-component/use-javascript-component-outputs.md)
{% endcontent-ref %}


---

# 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.jetadmin.io/user-guide/design-and-structure/components/custom-component.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.