Rendering

In TelemetryOS applications, rendering refers to the visual component that displays when your application appears on a playlist page. This is the HTML/CSS/JavaScript code (typically a React app) that users see on connected screens and in the Studio page editor.

When you add an application to a playlist in TelemetryOS, the application's render component is what actually shows on the display during that playlist item's time slot.

Usage

1. File: /index.html (the "Render" component).
2. Tech: standard web stack (HTML5/CSS3/JS/React); developers use npm, webpack, etc.
3. Execution: runs in a secure sandboxed iframe on TelemetryOS Edge/TOS Player.
4. Capabilities: full SDK access to cameras, sensors, serial/GPIO, media library, playlist control, emergency overrides.
5. Communication: message-based SDK with validated structured messages and a 30s request timeout.
6. Offline: intelligent caching + device storage; UI stays functional offline and syncs when online.
7. Lifecycle: visible render + optional background workers (for continuous tasks) + settings UI (admin config) + serverless functions (secure cloud logic).

Best Practices

Keep heavy computation in background workers or serverless functions, use SDK subscriptions for real-time updates, minimize main-thread work for smooth rendering, and respect declared device permissions.

Use the SDK (npm install @telemetryos/sdk) and declare components in telemetry.config.json to enable the Render component and its integrations.