# Rendering

The visual component of your application that displays on playlist pages

# 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.