deeleeramone/pywry/component-reference

PyWry Component Reference - MANDATORY SYNTAX

STOP. THIS IS THE AUTHORITATIVE REFERENCE FOR ALL COMPONENTS.

YOU MUST USE THE EXACT EVENT SIGNATURES DOCUMENTED HERE.

THERE ARE NO EXCEPTIONS. NO WORKAROUNDS. NO DEVIATIONS.

CRITICAL: System Events for Widget Updates

These are the ONLY events that work for updating widgets. Use send_event tool with these event types:

AG Grid Data Updates

AG Grid State Persistence

Response Event: grid:state-response with {"gridId": "...", "state": {...}}

State Object Contents:

• Column state (width, order, visibility, pinned, sort)
• Filter state (active filters per column)
• Sort state (sorted columns and direction)

Plotly Chart Updates

Plotly State Persistence

Response Event: plotly:state-response with {"chartId": "...", "data": [...], "layout": {...}}

Plotly Data Export

Response Event: plotly:export-response with {"data": [{"traceIndex": 0, "name": "...", "x": [...], "y": [...], "type": "..."}]}

DOM Content Updates

Theme Updates

Toast Notifications

Use show_toast tool instead, or:

Toolbar Component State (Get/Set Values)

Response Event: toolbar:state-response with {"componentId": "...", "value": ...} or {"values": {...}}

Supported Components for set-value:

• select: {"componentId": "id", "value": "option-value"}
• multiselect: {"componentId": "id", "value": ["a", "b"]}
• toggle: {"componentId": "id", "value": true}
• checkbox: {"componentId": "id", "value": true}
• text/textarea/search: {"componentId": "id", "value": "text"}
• number: {"componentId": "id", "value": 42}
• slider: {"componentId": "id", "value": 50}
• range: {"componentId": "id", "value": {"start": 10, "end": 90}}
• tabs/radio: {"componentId": "id", "value": "tab-value"}

Note: secret inputs cannot be set via toolbar:set-value for security.

Table of Contents

1. Button
2. Select
3. MultiSelect
4. Toggle
5. Checkbox
6. RadioGroup
7. TabGroup
8. TextInput
9. TextArea
10. SearchInput
11. NumberInput
12. DateInput
13. SliderInput
14. RangeInput
15. SecretInput
16. Div
17. Marquee
18. TickerItem

Button

A clickable button that emits an event.

Properties

Event Emitted

{
  componentId: "button-abc123",   // Auto-generated component ID
  ...data                         // Your custom data object spread in
}

Auto-Wired Actions

When event follows elementId:action pattern, these actions work automatically:

Example

{
  "type": "button",
  "label": "Submit",
  "event": "form:submit",
  "variant": "primary",
  "data": {"formId": "contact"}
}

Select

A single-select dropdown.

Properties

Event Emitted

{
  value: "selected_value",        // The selected option's value
  componentId: "select-abc123"
}

Example

{
  "type": "select",
  "label": "Theme:",
  "event": "theme:change",
  "options": [
    {"label": "Dark", "value": "dark"},
    {"label": "Light", "value": "light"},
    {"label": "System", "value": "system"}
  ],
  "selected": "dark"
}

MultiSelect

A multi-select dropdown with checkboxes.

Properties

Event Emitted

{
  values: ["value1", "value2"],   // Array of selected values
  componentId: "multiselect-abc123"
}

Example

{
  "type": "multiselect",
  "label": "Columns:",
  "event": "columns:filter",
  "options": [
    {"label": "Name", "value": "name"},
    {"label": "Age", "value": "age"},
    {"label": "City", "value": "city"}
  ],
  "selected": ["name", "age"]
}

Toggle

A toggle switch for boolean values.

Properties

Event Emitted

{
  value: true,                    // Boolean: true or false
  componentId: "toggle-abc123"
}

Example

{
  "type": "toggle",
  "label": "Dark Mode:",
  "event": "theme:toggle",
  "value": true
}

Checkbox

A single checkbox for boolean values.

Properties

Event Emitted

{
  value: true,                    // Boolean: true or false
  componentId: "checkbox-abc123"
}

Example

{
  "type": "checkbox",
  "label": "Enable notifications",
  "event": "settings:notify",
  "value": true
}

RadioGroup

A group of radio buttons for single selection.

Properties

Event Emitted

{
  value: "selected_value",        // The selected option's value
  componentId: "radio-abc123"
}

Example

{
  "type": "radio",
  "label": "View:",
  "event": "view:change",
  "options": [
    {"label": "List", "value": "list"},
    {"label": "Grid", "value": "grid"},
    {"label": "Card", "value": "card"}
  ],
  "selected": "list",
  "direction": "horizontal"
}

TabGroup

Tab-style buttons for single selection (visually different from RadioGroup).

Properties