# Development
Pages are developed, maintained, and deployed by Ubidots **users** to create fully custom visualizations that meet requirements not addressed natively by the platform.
A Page uses a specific set of files. These files define the Page settings, such as references to local files or CDN-hosted CSS and JavaScript (JS) libraries. They also define the Page logic and overall functionality. The file structure is shown below:
```
├── manifest.toml
├── script.js
├── body.html
├── style.css
├── static
│ ├── some_files_or_folders
```
{% hint style="warning" %}
This file structure is required. Include all listed files so the Page works correctly and can be deployed.
{% endhint %}
{% hint style="info" %}
**Allowed file extensions in the static folder**
.csv, .css, .gif, .html, .ini, .jpeg, .jpg, .js, .json, .jsx, .log, .md, .mjs, .png, .rst, .svg, .ts, .tsv, .tsx, .toml, .txt, .webp, .xml, .yaml, .yml
{% endhint %}
## manifest.toml
The manifest file defines the Page settings and references to local or external CSS and JS resources. It includes:
* Name of the page.
* Keywords.
* Description.
* Path to local files.
* Local and third-party JS libraries.
* Local and third-party CSS stylesheets.
A typical Page manifest includes the following keys and values.
| Key | Type | Description |
| --------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | String | Name of the page |
| keywords | Comma-separated strings | Added in a `` tag within the HTML document's ``. |
| description | String | Added to the HTML document's `` within a `` tag. |
| static\_paths | List of strings | Paths to folders containing local files. |
| js\_libraries | List of sets | References local JS files. These files are included with a `
```
## script.js
This file contains the Page JS logic. It can:
* Use the `js_libraries` and `js_thirdparty_libraries` specified in the `manifest.toml` file.
* Access the [Ubidots built-in JS library](/dashboards-and-widgets/html-canvas/built-in-library.md).
## body.html
This file defines the HTML body of the page. Include only the contents of ``. Ubidots then inserts that content into the actual Page body. For example:
Your code:
```html
```
Loaded in the page:
```html
```
{% hint style="danger" %}
Do not include `` in `body.html`. Ubidots creates it from `manifest.toml`.
{% endhint %}
## style.css
This is the main stylesheet for your page. You can also import more styles from local files in the `static_paths` folder or from external resources.
## static folder
In this folder, you can upload additional CSS or JS files, nested folders, or other file types. Use it to include proprietary libraries or resources such as fonts, icons, and images needed to render the page.\
You can use these files in two ways within the Page:
1. Reference them in the `manifest.toml` file. Ubidots then imports them as described in the [Libraries syntax](#libraries-syntax) section.
2. Access them through the page's public `staticUrl`. See below.
To access files in the `/static` folder — or another folder referenced in `manifest.toml` — from `script.js`, use:
```
const staticPageUrl = window.staticUrl;
const imageUrl = `${staticPageUrl}//.`;
```
Here, `` is the path referenced in `manifest.toml`, such as `static`. Then `` and `` point to the specific file inside that folder.
{% hint style="info" %}
**Allowed file extensions**
.csv, .css, .gif, .html, .ini, .jpeg, .jpg, .js, .json, .jsx, .log, .md, .mjs, .png, .rst, .svg, .ts, .tsv, .tsx, .toml, .txt, .webp, .xml, .yaml, .yml
{% endhint %}
---
# 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://dev.ubidots.com/apps/pages/development.md?ask=
```
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.