# Dashboards & Widgets

- [HTML Canvas](/dashboards-and-widgets/html-canvas.md): Build your own custom widgets with the HTML Canvas
- [3rd party packages](/dashboards-and-widgets/html-canvas/3rd-party-packages.md)
- [Preload Dashboard data](/dashboards-and-widgets/html-canvas/preload-dashboard-data.md): This feature makes the Dashboard data available for the user at load time.
- [Built-in library](/dashboards-and-widgets/html-canvas/built-in-library.md)
- [Properties](/dashboards-and-widgets/html-canvas/built-in-library/properties.md): This page describes the HTML Canvas class properties.
- [Methods](/dashboards-and-widgets/html-canvas/built-in-library/methods.md): This page describes the available methods within the HTML Canvas class
- [Listening events](/dashboards-and-widgets/html-canvas/built-in-library/listening-events.md): Access dashboard settings via event handlers
- [API](/dashboards-and-widgets/html-canvas/built-in-library/api.md): Access Ubidots Javascript SDK from the HTML canvas
- [Examples](/dashboards-and-widgets/html-canvas/examples.md)
- [Basics](/dashboards-and-widgets/html-canvas/examples/basics.md)
- [Create an LCD screen with the HTML Canvas](/dashboards-and-widgets/html-canvas/examples/create-an-lcd-screen-with-the-html-canvas.md)
- [Interacting with dashboard data](/dashboards-and-widgets/html-canvas/examples/interacting-with-dashboard-data.md)
- [Change header's custom style](/dashboards-and-widgets/html-canvas/examples/change-headers-custom-style.md): The following example shows how to dynamically change a widget's header style upon clicking a button by using the HTML Canvas widget.
- [Adding real time using Socket.IO](/dashboards-and-widgets/html-canvas/examples/adding-real-time-using-socket.io.md): Using the socket.IO library, create a simple real-time widget with Ubidots and the HTML Canvas.
- [Delete Variable data from a Device](/dashboards-and-widgets/html-canvas/examples/delete-variable-data-from-a-device.md): The following shows how to implement HTML Canvas Widget to delete variable data in a time window in Dynamic Dashboards
- [Delete Variable data from Groups or Types of Devices](/dashboards-and-widgets/html-canvas/examples/delete-variable-data-from-groups-or-types-of-devices.md): The following example shows HTML Canvas Widget implemented such that you can either, select or type a variable label, select a time window and then delete said data
- [Navigation through Dashboard](/dashboards-and-widgets/html-canvas/examples/navigation-through-dashboard.md): This example uses HTML Canvas newest feature "Preload dashboard data" to easily implement navigation through dashboards.
- [Using a React library](/dashboards-and-widgets/html-canvas/examples/using-a-react-library.md): This example showcases how to import and use MaterialUI.
- [Code editor](/dashboards-and-widgets/html-canvas/code-editor.md)
- [HTML Tab](/dashboards-and-widgets/html-canvas/code-editor/html-tab.md)
- [CSS Tab](/dashboards-and-widgets/html-canvas/code-editor/css-tab.md)
- [JavaScript Tab](/dashboards-and-widgets/html-canvas/code-editor/javascript-tab.md)
- [Custom UI](/dashboards-and-widgets/custom-ui.md): This article goes through the Custom UI widget, its features and how to use it.
- [Paragraph](/dashboards-and-widgets/custom-ui/paragraph.md): Displays headings/paragraphs depending on the type of property.
- [Input combo](/dashboards-and-widgets/custom-ui/input-combo.md): Displays an input field depending on the type property.
- [Text](/dashboards-and-widgets/custom-ui/input-combo/text.md): Use text inputs within Custom UI widget
- [Numeric](/dashboards-and-widgets/custom-ui/input-combo/numeric.md): Use numeric input fields within Custom UI Widget
- [Numeric with buttons](/dashboards-and-widgets/custom-ui/input-combo/numeric-with-buttons.md): Use numeric input fields featuring buttons within Custom UI Widget
- [Date](/dashboards-and-widgets/custom-ui/input-combo/date.md): Use Date input fields within Custom UI Widget
- [Time](/dashboards-and-widgets/custom-ui/input-combo/time.md): Use time input fields within Custom UI Widget
- [Toggle](/dashboards-and-widgets/custom-ui/input-combo/toggle.md): Use toggle buttons in Custom UI widget
- [Dropdown](/dashboards-and-widgets/custom-ui/input-combo/dropdown.md): Use dropdown lists in Custom UI Widget
- [Multiple selection dropdown](/dashboards-and-widgets/custom-ui/input-combo/multiple-selection-dropdown.md): Use multiple selection dropdown list in Custom UI Widget
- [Button](/dashboards-and-widgets/custom-ui/button.md): This element will display a button that, according to its type, will have a color meaning different status
- [Custom Style](/dashboards-and-widgets/custom-style.md): Customize your App beyond the branding level with the Custom Style editor for Dashboards and Widgets
- [Dashboards](/dashboards-and-widgets/custom-style/dashboards.md)
- [Widgets](/dashboards-and-widgets/custom-style/widgets.md)
- [Line chart](/dashboards-and-widgets/line-chart.md): Visualize time series data in Ubidots in the form of Line charts
- [Gauge](/dashboards-and-widgets/gauge.md): Visualize single-value data in Ubidots in the form of Gauge charts