# HTML Canvas

### Introduction:

Ubidots offers off-the-shelf widgets for most visualization needs. However, some projects require more specific or fully custom widgets. For those cases, use the HTML Canvas widget to build custom visualizations with your own code.

### Definition:

HTML Canvas is a widget for building custom widgets. It lets you write custom code with the following languages, along with Ubidots built-in methods and third-party libraries described later:

* HTML
* CSS
* JavaScript

This widget features a code editor composed of three tabs, one for each language.

### When to use the HTML Canvas?

Use HTML Canvas when other widgets do not meet your functionality or styling requirements.

### How to create an HTML Canvas?

Go to a dashboard, click the *Add new widget* button (+), scroll to the *Advanced* section, and select *HTML Canvas*.

<figure><img src="/files/2dChTFxn1cYdvFTxheJB" alt="" width="375"><figcaption></figcaption></figure>

### Widget settings:

The widget offers the following settings:

* Code editor
* Third-party libraries
* Enable lazy loading
* Preload dashboard data

### Widget appearance tab:

The appearance of the widget can be customized further with these options:

* Name
* Custom Style

### Custom Style:

See [**Custom Style**](/dashboards-and-widgets/custom-ui.md) to learn how to customize your HTML Canvas styles.


---

# 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/dashboards-and-widgets/html-canvas.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.