# Jet UI

{% embed url="<https://www.youtube.com/watch?v=IzoNmMnZ_kE&list=PLSkzi9eq0vBnUGMnwXrRRVo9TXUjZ7uSj&index=9&ab_channel=JetAdmin>" %}

{% embed url="<https://www.youtube.com/watch?v=ZuKlkslvZSs&list=PLSkzi9eq0vBnUGMnwXrRRVo9TXUjZ7uSj&ab_channel=JetAdmin>" %}

Jet Admin allows you to build custom business apps such as CRMs, admin panels, and internal tools using templates

<figure><img src="https://lh4.googleusercontent.com/KNBV63NUJR6jvlLeT_8U3Z9DrHEnTNXiKljDmFWTMOv7SMcgSbzRRRreewLv_kjcrkEVDsOTS_5yxHHjKyMgeuZXD5WBrQ_xHuA9-b46ObAGbIW05Dsxzppg9VxovTRGUh6bzDffKGQCYeKZHL79sDk1U32u_XYkn7qD4Z6-DXXnPIIB38Jt4mHIuA" alt=""><figcaption></figcaption></figure>

Or create the app from scratch using drag-and-drop UI components

<figure><img src="https://lh5.googleusercontent.com/ctfjrYaT261oWaQV-YQAU5pC-la-xo9f4V9t6tm-KVgD34pH7DQ-lOQnl0BeU3YJNzaueg7odi6Iz4dihJaGpnsP6c39RS6p04EhqkZ51HXoRgWyMqco-CkIxxpP3PIlNJcmZx2KzsQoW62rztjpeOuXjbxrtmmK5ZqV1PZIMfzSuF5SdRJVMqTZSg" alt=""><figcaption></figcaption></figure>

After creating a new app, you'll automatically get into the intuitive **App Builder**, where you can design, build, and deploy an app with drag-and-drop components, integrate resources, manage User & Team permissions, and customize the app appearance.

<figure><img src="https://lh6.googleusercontent.com/MzZu_6_l4u9FhgHgjbFfP7i0-BRSuoykrMY9R1dSoxFH9ymCnC6c7y4wB_Xpw7h6DK71wK--0_A_L6FLITki4ZZZQpeqBOXkVAiZ48GnNq1ClKvFpqjGH6nlVbNa4S_2u4kbBGUlu3D_YOLjy7fl79Crm5FBSBnPMMR_dDhLi8Yt87Ko03xkvK_Y0A" alt=""><figcaption></figcaption></figure>

Here we’ll go over all the key elements and sections that will allow you to navigate Jet much more efficiently:

* Canvas&#x20;
* Workspace
* Components&#x20;
* Pages&#x20;
* Data&#x20;
* App Settings&#x20;
* Sign in/Sign up&#x20;
* Automation
* Preview & Share

### Canvas&#x20;

The canvas is the main element of the App Builder, the mode you'll use to create the application.

<figure><img src="https://lh5.googleusercontent.com/CVvv6P7pl1JchdLz_8EJn_1MFlUAMI5z1njCZJ7cJSaPYkI6_wQcHKUFaS5K2AaYepJKkwZugiNrXJVDYKGVj7ww5S1-oOPyRjMx27ymR7uYXwzoCmZgM2PWxkKlnaqh1TUi1VPw1Bb5I0ktgFMPI3c9X5_6sHCKHbT6rj8wZ4RFLUw5FParLeCAiw" alt=""><figcaption></figcaption></figure>

### Workspace

If you need to create a new app or return to a previously created one, you can get back to the workspace from the App Builder by clicking on the button "My Apps" in the top left corner.

<figure><img src="https://lh3.googleusercontent.com/TrSp7nt887dwgZCzzOCblFWjcHT9xgy3tU459wpVA31gGCeFb_BN2qdSy8aj9vsGGFVsL4U_nI-nLetCZrRgQKXwdurqU5B5LRZdTttXQmXA8do4XljwtKN1Wqouvd-Ar34deQ0FniClOyf1Or3yB-6iLs1OsOsOHkRMaOlu7K-tzmAJAjyzLuR6BA" alt=""><figcaption></figcaption></figure>

### **Components**

[**Components**](https://docs.jetadmin.io/user-guide/components) are UI elements that allow you to display and interact with data and, eventually, build a custom business app. In the UI Library, you can find pre-built UI types such as:

* [**Layout**](https://docs.jetadmin.io/user-guide/components/layouts) to organize the page structure

![](https://lh4.googleusercontent.com/eqNFV09pEOcRI3_cOcdeH8fQ2D7NrZWabIB-S-ReqOod9llt_hR2-qfeQRUsrgFw6jdfLlH7WRhOJjkxhzxsTkSC0OneLS98e9ALPGfF8GgF1OfoV4QrqxawXG4__n4p3AtSg9zd2ETX7h9njGg1cMGD5aLrwbRIB6_cRcjA4w4S78F-YrqSGTUxeg)

* **Basic** components to work with Titles, Text, Images, Button, etс

![](https://lh6.googleusercontent.com/TpxVHcTL6OALO-tlg2Bijn9u9oEgc0XEm_Z4A72X6jW8D986xDJ5crU99M9shj9br1KQkSl5SS0-iNKSSKnJS-IwO6UdbmKZWfTu05xJh6mZaXN5Lhv0N_m7UCzZAyKzvCKkFFzHn8hakRUkepxVKMU-nQeoLq_hGlnVw71nUrOqRrMDCg1VyRFmHg)

* [**Lists**](https://docs.jetadmin.io/user-guide/components/lists) to display data from your collections (tables)

![](https://lh4.googleusercontent.com/3D7V7YIM9_aRQKain8no5_5yLumTAHcdRKPQzL2u00DKqY3DbirymvOTAn5dXfBEg3zMgEoDM2QgmOuVTcqx6QJcjHEtrXSpkYuq7va3choYGtkrqndr6MKo8jaEPYLGrklB7JWXhrr9leFU70-UT2m9N-R7ASQvKAtNJSY2RIxytInPEvz0GeZ4_w)

* [**Charts** ](https://docs.jetadmin.io/user-guide/components/charts)to visualize your data in up to 4 dimensions. It's the fastest way to create analytical reports on your data

![](https://lh5.googleusercontent.com/2z0P4XhoZakpxRg3a3O5gYOtI6Ql6BfJs7CQdG08TpPaNfNVVpsJ73tzhstyad9b8S6IRybDQIwM_ncXjMo0i8GN0zsBlcCLJtV-jGHu76Pk2_coWtYaty2oZNGg5GXDOpCKH_VgLfiyj2hhnXuBO25sC_-cCoFic_YZNIbboF4KHiV2bsFM3_gCVw)

* [**Forms**](https://docs.jetadmin.io/user-guide/components/form) to make your app interactive. Whether you need a user to enter an email or select an item from a dropdown, forms will get you covered.

![](https://lh4.googleusercontent.com/Be1B3sEpYI1fDoJ2IzvKr3p7DzZID_jKMGGDOd2whATyacE2TIQPOtsCvJzjylAdPT5XLDtSAxSi0y6cF7AmIPl43ch0kcknZ0zAuHlzL8CQ03ROmJ4QoFP4oDxdCmBdcv2pJmpTVEAHOtkfG5I22uBkowCt31xUiyfK56eF0c9mj8dYO68q9nTOjg)

**Advanced** tools to create even more custom solutions using:

* [**A Modal**](https://docs.jetadmin.io/user-guide/components/modal?q=Modal) - a pop-up that appears on the screen when an action is performed. An open modal acts like a Page, meaning you can assemble it by drag and dropping other components into it.

<figure><img src="https://lh3.googleusercontent.com/4bmu1aRNu5lUYY-RiT4cu_qTEyle22BkdDy2RInNYX5FTYA8ccdGG9_btp_rcpQdK5BpvM6r4JpmZPIBfBlu1S9OAZOS5zUm1z6lqaN9Z45gGBBZIMQbbPf_A92sFPO7cbna43I1o8dBQfhxFicPjn51LPDef3NxFsoHAOtxuhjXcahWSh9OMSZzIA" alt=""><figcaption></figcaption></figure>

* **iFrame** - a way to embed another webpage inside of your Jet app

<figure><img src="/files/7gA42GuJLU56WCBsu13N" alt=""><figcaption></figcaption></figure>

* [**Custom components**](https://docs.jetadmin.io/user-guide/components/custom-component) to build any component that’s not in the UI Library based on React, Angular, or any other framework and integrate it into the Jet Admin interface.

### Pages

A [**page**](https://docs.jetadmin.io/user-guide/design-and-structure/pages#create-page-values) is an interface element that is a constituent of an app. On the left menu in the App Builder, you can find all the Pages of the app or create a new one.

<figure><img src="https://lh6.googleusercontent.com/YUezoMRXGRBpgGfWpgJAxCmlN1copNQnKKtQGVHpNrnjMuKegaZ_wY6ijuKZOAtKw_vDVtndxf7abeWo8WIRFKkZP172uZbLkOWkkMT_GqfW8q9EQlSUol_4GLGdjY4SN0KkyzciayhyVXlZP3w0JTbMcXU9WFRGtq_Ikexu9nc_bxV0ngOYhxCCRw" alt=""><figcaption></figcaption></figure>

From the top menu of the App Builder, you can duplicate, edit the current page, or manage page settings, parameters, and queries in **Page settings**.

<figure><img src="https://lh4.googleusercontent.com/Psy2_zFddCWH5w24N3E2b8B1rgbV7Mo3AxvLucf5qJLyVllYPPZWNuo_yXXlbJYjGeMlW0wivo07Cu9Gzk37jzvyAuX89dXEuJJ4w0kvm3awpCY1A7Z3L9xqbvZD_m_F3na_jJahoQM7sUvZ-maixTFQcu_4K76irfH3p7vnwvy7eXgFu1jG5Fb34g" alt=""><figcaption></figcaption></figure>

### Data

In the [**Data**](https://docs.jetadmin.io/user-guide/jet-ui/data) section of the sidebar, you can add data sources you’ll need to build your app:

<figure><img src="https://lh6.googleusercontent.com/xfjV7Jf6wszW8HfWxVy1pPTNr2cnNWJV7IhNJsPQ-mzW6dVyiQ9EnHcEMk5o68qv84Bjs1ZJ60zdozYMkvzQA2_zVLuCS8HkhWGF6hWz6FN87YFZZKmwsXHW1xF2O14RAai89yjGKDOwko8Zqn5cfcQREQ8KVtXyul24X0UvziJ2OozNro6NT7Es2w" alt=""><figcaption></figcaption></figure>

Or you can work with already connected resources — manage the integration, configure the field types, edit, delete, or create records, import and export data and create virtual collections (functionality varies based on the data source):

<figure><img src="/files/7fwwxTw4Fi5CkMLPBJ0X" alt=""><figcaption></figcaption></figure>

You can build apps with your data from pretty much **Any Data Source**: Firebase, Sheets, Airtable, Stripe, REST API, and so on.

### Users & Teams management system

From the Data section, you can go to the [**Users & Teams management system**](https://docs.jetadmin.io/user-guide/security-and-privacy)

<figure><img src="https://lh6.googleusercontent.com/N3jFmPyT9Va4R7ZPyOkVgJAUKuEtA_HGhGwew1mxJdRMHw_WxYB0RbCG1ab6a3lGxSaPNSk7ChwmweYEJbaQ8S9eRMs-Hdimhs-YCrySLPwzW6TQnPaWmqxVg1HcHdPkSfjHbSUhHeYVjiEjVlHrsY-RjNLYpft705cb5U3Xx9Tc6LwP0ChG9ZvkSQ" alt=""><figcaption></figcaption></figure>

Here you can set permissions, define user roles, and manage members.

{% hint style="info" %}
You can also use Properties to set up data separation (multi-tenancy) for **Client Portal** use-cases
{% endhint %}

<figure><img src="/files/FUDqB93NWivAHS1yKIP9" alt=""><figcaption></figcaption></figure>

### App Settings

You can customize the app’s appearance in the [**User Mode**](https://docs.jetadmin.io/user-guide/preview-and-publish#user-mode) by going to App Settings.

<figure><img src="https://lh4.googleusercontent.com/tNfC7Jb9LjCf9R4KdlldvkJSHD8SDrJwqqAZwLHODhyUbMt4QgVlh9sVrc7mOjjZFL9ZWhZjSpeT0frViaK_AH4e2GyiGLRK3bqSNZy8VwDeeLn5-AxChhk4H3FS7kyJqrJBn6p7WHdWeVfyGKtIhbiTS4aJ9mMLarfSnCNusWfOPkixMEQXLJPwbQ" alt=""><figcaption></figcaption></figure>

[**App settings**](https://docs.jetadmin.io/user-guide/jet-ui/layouts-and-branding) allow you to adjust your business app’s appearance by the following settings:

<figure><img src="/files/94T4PDI5BNNOD6HPpsYL" alt=""><figcaption></figcaption></figure>

* **Appearance** - customize colors and theme for your app&#x20;
* **Menu** - customize your app's menu in user mode&#x20;
* **Custom domain** - set up a custom domain for your app&#x20;
* **Features** - additional features&#x20;
* **Sharing** - set up the app's name and service&#x20;
* **Scripts & Styles** - set up global JavaScript and customCSS

### Sign in/Sign up

[**Sign-in/Sign-up page**](https://docs.jetadmin.io/user-guide/security-and-privacy/sign-in-sign-up) builder allows you to configure the appearance of sign-in, and sign-up pages separately as well as customize the title, terms of service URL, and customer sign-up flow

<figure><img src="https://lh6.googleusercontent.com/OCoslX9xqZ0DfATiqtRUcJKPhrnAqc1Ml0mo9qgoZX9UMz90SnwMOMYkCWnUKxUVkFaDi-EDEpwq2SuTnSaTD7EZ8fq9g0N9p1qr5XPRLq5nwipm9rDyG2BVJZdZBv5htlK5uVOqwhhVxReQ10DO0DmXZQbgdTty_qHWxs-ZbcelEAZzXUDkcSDuRA" alt=""><figcaption></figcaption></figure>

### Preview & Share

There are three operational modes in Jet Admin:&#x20;

* **Builder mode**, where you add data sources, drag-and-drop UI components, and so on
* **User mode** - this is the option that end users see after the app is published
* **Preview mode** that allows you to see the app preview in a user mode without having to publish an app.

The [**Preview button**](https://docs.jetadmin.io/user-guide/preview-and-publish) on the top menu of the app builder allows you to switch between modes and eventually publish your app.

<figure><img src="https://lh6.googleusercontent.com/iED94v1CaPJv-NJ3zUT0IDtodePrbqkd1I-ULuBrp-dmtacZ5xvXDqMWMtd76rXExm48KAuqLiWB7alumsRaYKAAc13tnmlXr8CPZgUIEl0PM19VuW4rLz_T3IhjthwJVPJz0tl2hVMJgBmKMAT7xlyPtUintmHz5BF_JPsHfsBgPHbvEO_kdQu4nw" alt=""><figcaption></figcaption></figure>

With the [**Share**](https://docs.jetadmin.io/getting-started/creating-a-customer-portal/invite-users#invite-users) button you can choose how users will access your application.

<figure><img src="https://lh3.googleusercontent.com/xnbo_CipG-M7cjKqTliWjDmi4F-8eamU_rjTeQ3sOAaz2H4kK87liamsk3L5xN-MEQvff6LL4F9hJuV2HQENyi6a1XfgemVm1RUOqY8e7x-sUPcng224r_HdeFUTITb3kDDIiwECoMerd2irbw3Cl84qpxKBR1RuIxXb9OFeo1E0B1G1oSTblEUPtw" alt=""><figcaption></figcaption></figure>

**Invite** members via **email** or **Public Access**, and set permissions for already invited users.

<figure><img src="/files/NWALv5yZPr3Ynlnmv10B" alt=""><figcaption></figcaption></figure>

You can always look through the **documentation** and **video tutorials**, or get **expert support** if you find it difficult to understand some issues. We are happy to help:)

![](https://lh3.googleusercontent.com/jUuyIwJHJfG9eumeQAGZgEy3gAbIUEwy81Bd2onm_dNUIifR-_j3Cw_iV-dHeHNdtCyX46UQK8xEdezhipl9p0RoclAL8J2ao8pqA2nLY6sF3pD0ArOiQ90O_ywmCiz-2DWomQZtV8iMI4gb99_uxb3SQC4jCSSr274O8QqE2Mayoz9NXcnZu0X-nA)

{% content-ref url="/pages/-M9tUts43WZfjEDtAdHQ" %}
[App settings](/user-guide/core-concept/jet-ui/layouts-and-branding.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/core-concept/jet-ui.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.