# HTML Canvas

### Introduction:

Ubidots offers off-the-shelf widgets to cover most visualization needs. However, some projects may require more specific and custom widgets. That's why we offer the HTML Canvas widget, which supports your own code to deliver custom visualizations.

### Definition: 

HTML Canvas is a widget that enables the creation of custom widgets. It accomplishes this by letting the user write their own custom code using the following languages (as well as some Ubidots' built-in methods and third-party libraries which will be 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?

Whenever the other available widgets don't meet a specific requirement in terms of functionality and/or style.

### How to create an HTML Canvas?

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

![](https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FcKxphRmRleACNAUPihT9%2FGroup%2021.png?alt=media\&token=c700d916-6089-4e42-82a9-8eba2acf7d2e)

### Widget settings:

The widget offers the following settings:

* Code editor
* 3rd party libraries
* Enable lazy loading
* Preload Dashboard data

### Widget appearance tab:

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

* Name
* Custom Style

### Custom Style:

Check the [**Custom Style**](https://dev.ubidots.com/dashboards-and-widgets/custom-ui) documentation here in order to know 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.