Skip to main content
Telemetry provides a set of components that you can drag and drop onto your canvas to build apps. Components come in two varieties based on how they’re configured:

​
Basic Mode vs Code Mode

Some components support two configuration modes:
  • Basic Mode — Configure the component using the visual settings panel. Best for straightforward use cases where you don’t need custom logic.
  • Code Mode — Write TypeScript transform functions to customize the component’s behavior. Best for dynamic data transformations and complex logic.

​
Component Mode Support

ComponentBasic ModeCode ModeNotes
ButtonYes—Fixed configuration
InputYes—Fixed configuration, stores user text input
Table—YesAlways uses code mode for data transformation
SelectYesYesToggle between modes in the settings panel

​
How Code Mode Works

In code mode, you write a transform function that has access to:
  • query(slug) — Access data from any query by its slug. Returns { columns, rows, count, executedAt }.
  • input(slug) — Access values from input components. Returns { value, displayName }.
The transform function runs in a sandboxed environment whenever query results or input values change. Your function must return data in the format expected by the component. 
// Example transform function for a Table
function transform(): { headers: string[]; rows: RowObject[] } {
  const data = query('users-query');
  const search = input('simple-input-abc');

  const filtered = data.rows.filter(row =>
    String(row.name).includes(search.value)
  );

  return {
    headers: ['Name', 'Email', 'Status'],
    rows: filtered,
  };
}

​
Component Slugs

Each component has a slug used to reference it in code mode. The format is {type}-{first-3-chars-of-id}:
  • simple-button-abc
  • simple-input-def
  • simple-select-ghi
  • simple-table-jkl
You can find a component’s slug in the “State” tab in the editor.

​
State

Components interact with the app’s state system:
  • Input and Select components store user values in state
  • Table and Select (code mode) can read from state via input() and query()
See the State page for details on how data flows through your app.