custom-widget-template — Vite Admin dashboard Template

SHA-256: 36e65855ecfcb3d7602da2e17e156f75abcda43f5366e3cf4bfa045668b23fef

2026-10-15T08:57:48.525Z

<br/>
<p align="center">
  <img src="https://assets.tago.io/tagoio/tagoio.png" width="200px" alt="TagoIO"></img>
</p>

# TagoIO Custom Widget Template

A React + TypeScript + Vite + Tailwind starter for building [TagoIO Custom Widgets](https://docs.tago.io/docs/tagoio/widgets/custom-widget/).

## Getting started

```bash
npm install
npm run dev
```

The dev server runs on `http://localhost:5173`. In TagoIO, create a Custom Widget and set the URL to your forwarded local address to test in real time.

## Deploying

1. Run the build:
   ```bash
   npm run build
   ```
2. Upload the contents of the `_dist/` folder to your folder in **TagoIO Files**.
3. In the Custom Widget settings, set the URL to point to `index.html` in that folder.

## Project structure

```
src/
├── main.tsx                 — TagoIOProvider wraps the app
├── App.tsx                  — root component
└── components/
    ├── DataDisplay.tsx      — real-time variable table
    └── SendDataForm.tsx     — send data back to TagoIO
```

## SDK hooks used

| Hook | Purpose |
|---|---|
| `useWidget()` | Widget config and configured variables |
| `useRealtimeData()` | Live data records from connected devices |
| `useSendData()` | Write data back to a TagoIO device |