TagoIO Custom Widget Template

A React + TypeScript + Vite + Tailwind starter for building TagoIO Custom Widgets.

Getting started

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:

   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