> For the complete documentation index, see [llms.txt](https://platform.intelie.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://platform.intelie.com/data-visualization/pipes-widgets/js-widgets.md).

# JSX Widgets

HTML/JSX widgets is a type of widgets that enables the creation of any kind of visualization.

![](https://3214244039-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lov7jZs3pzHFyAcuuli%2F-Ly8g4DOfWaqwNlgT2Ci%2F-Ly8iff8ccUz5vclu8l6%2Fimage.png?alt=media\&token=9cbea548-7385-4c16-b477-0eb02e597ee9)

The **JSX Markup** is a javascript module definition. This module can evaluate or export  the desired value.\
\
It accepts a [React.Node](https://reactjs.org/docs/react-component.html#render) or a **React Component** as return value. \
\
The Widget [props](https://reactjs.org/docs/components-and-props.html):

```
type Props = {
  mode: 'view' | 'edit' | 'editor', // dashboard's view/edit mode or editor
  event: Object, // the last event
  batch: Object[], // the last event batch
  widget: Object, // the saved widget configuration
  height: number, // the current height of the widget
  width: number, // the current width of the widget
}
```

**Simple example**

```
// query
=> random() every min

// JSX Markup
export default function MyWidget (props) {
	return <pre>{JSON.stringify(props, null, 2)}</pre>
}
```

**Recommended Boilerplate**

There is a recommended structure provided by the editor, it has event handling and rendering optimizations.

![](https://3214244039-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lov7jZs3pzHFyAcuuli%2F-Ly8g4DOfWaqwNlgT2Ci%2F-Ly8hz98RzMa8GVJSLdK%2Fimage.png?alt=media\&token=d80038b7-d540-43ac-9145-a6bd665b7379)

See <https://platform.intelie.com/developers/exposed-javascript-modules> to check which libraries are available to use on JSX Widget code.