streamsync reference

streamsnc_reference.md

This list is automatically generated from the framework's source code.

Layout

Components to organise the app's layout. Not meaningful by themselves; their objective is to enhance how other components are presented.

Sidebar

A container component that organises its children in a sidebar. Its parent must be a Page component.

Fields

• Start collapsed : Text · Yes / No
• Background : Color
• Accent : Color
• Primary text : Color
• Secondary text : Color
• Container background : Color
• Container shadow : Shadow
• Separator : Color
• Button : Color
• Button text : Color
• Button shadow : Shadow
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Section

A container component that divides the layout into sections, with an optional title.

Fields

• Title : Text · Leave blank to hide.
• Accent : Color
• Primary text : Color
• Secondary text : Color
• Container background : Color
• Container shadow : Shadow
• Separator : Color
• Button : Color
• Button text : Color
• Button shadow : Shadow
• Snap mode : Text · No / Yes · Use as much space as possible without altering the size of the container.
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Header

A container component that typically contains the main navigation elements.

Fields

• Text : Text
• Accent : Color
• Emptiness : Color · Page background color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Column

A layout component that organises its child components in columns. Must be inside a Column Container component.

Fields

• Title : Text
• Width (factor) : Number · Relative size when compared to other columns in the same container. A column of width 2 will be double the width of one with width 1.
• Sticky : Text · No / Yes
• Collapsible : Text · No / Yes
• Start collapsed : Text · Yes / No · Only applied when the column is collapsible.
• Horizontal alignment : Text · Normal / Left / Center / Right
• Vertical alignment : Text · Normal / Left / Center / Right
• Separator : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Column Container

Serves as container for Column components

Fields

• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Tab

A container component that displays its child components as a tab inside a Tab Container.

Fields

• Name : Text
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Tab Container

A container component for organising and displaying Tab components in a tabbed interface.

Fields

• Accent : Color
• Primary text : Color
• Secondary text : Color
• Container background : Color
• Container shadow : Shadow
• Separator : Color
• Button : Color
• Button text : Color
• Button shadow : Shadow
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Horizontal Stack

A layout component that stacks its child components horizontally, wrapping them to the next row if necessary.

Fields

• Alignment : Text · Left / Center / Right
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Separator

A visual component to create a separation between adjacent elements.

Fields

• Separator : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Content

Components that present content and are meaningful by themselves. For example, charts, images or text.

Text

A component to display plain text or formatted text using Markdown syntax.

Fields

• Text : Text
• Use Markdown : Text · Yes / No · The Markdown output will be sanitised; unsafe elements will be removed.
• Alignment : Text · Left / Center / Right
• Primary text : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-click · Capture single clicks.

Heading

A text component used to display headings or titles in different sizes and styles.

Fields

• Text : Text
• Heading type : Text · h1 (Big) / h2 (Normal) / h3 (Small) / h4 (Smallest)
• Alignment : Text · Left / Center / Right
• Primary text : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

DataFrame

A component to display Pandas DataFrames.

Fields

• Data : Text · Must be a state reference to a Pandas dataframe or PyArrow table. Alternatively, a URL for an Arrow IPC file.
• Show index : Text · yes / no · Shows the dataframe's index. If an Arrow table is used, shows the zero-based integer index.
• Enable search : Text · yes / no
• Enable download : Text · yes / no · Allows the user to download the data as CSV.
• Display row count : Number · Specifies how many rows to show simultaneously.
• Wrap text : Text · yes / no · Not wrapping text allows for an uniform grid, but may be inconvenient if your data contains longer text fields.
• Primary text : Color
• Secondary text : Color
• Separator : Color
• Background : Color
• Header row background : Color
• Font style : Text · normal / monospace
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Image

A component to display images.

Fields

• Source : Text · A valid URL. Alternatively, you can provide a state reference to a Matplotlib figure or a packed file.
• Caption : Text · Leave blank to hide.
• Max width (px) : Number
• Max height (px) : Number
• Secondary text : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-click · Capture single clicks.

Vega Lite Chart

A component that displays Vega-Lite/Altair charts.

Fields

• Chart specification : Object · Vega-Lite chart specification. Pass a Vega Altair chart using state or paste a JSON specification.
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Plotly Graph

A component that displays Plotly graphs.

Fields

• Graph specification : Object · Plotly graph specification. Pass it using state, e.g. @{fig}, or paste a JSON specification.
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• plotly-click · Sends a list with the clicked points.
• plotly-selected · Sends a list with the selected points.
• plotly-deselect · Triggered when points are deselected.

Metric

A component that prominently displays a metric value and associated information.

Fields

• Name : Text
• Value : Text · The main value to be displayed. It's not limited to numbers.
• Description : Text
• Note : Text · Prefix with '+' for a positive message, with '-' for a negative message.
• Primary text : Color
• Secondary text : Color
• Positive : Color
• Neutral : Color
• Negative : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Message

A component that displays a message in various styles, including success, error, warning, and informational.

Fields

• Message : Text · Prefix with '+' for a success message, with '-' for error, '!' for warning, '%' for loading. No prefix for info. Leave empty to hide.
• Success : Color
• Error : Color
• Warning : Color
• Info : Color
• Loading : Color
• Primary text : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Video Player

A video player component that can play various video formats.

Fields

• Source : Text · The URL of the video file. Alternatively, you can pass a file via state.
• Controls : Text · Yes / No · Display video player controls.
• Autoplay : Text · Yes / No · Autoplay the video when the component is loaded.
• Loop : Text · Yes / No · Loop the video when it reaches the end.
• Muted : Text · Yes / No · Mute the video by default.
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Input

Components whose main objective is to allow the user to input data into the app.

Text Input

A user input component that allows users to enter single-line text values.

Fields

• Label : Text
• Placeholder : Text
• Password mode : Text · No / Yes
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-change · Capture changes as they happen.
• ss-change-finish · Capture changes once this control has lost focus.

Textarea Input

A user input component that allows users to enter multi-line text values.

Fields

• Label : Text
• Placeholder : Text
• Rows : Number
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-change · Capture changes as they happen.
• ss-change-finish · Capture changes once this control has lost focus.

Number Input

A user input component that allows users to enter numeric values.

Fields

• Label : Text
• Placeholder : Text
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-number-change · Capture changes as they happen.
• ss-number-change-finish · Capture changes once this control has lost focus.

Slider Input

A user input component that allows users to select numeric values using a slider with optional constraints like min, max, and step.

Fields

• Label : Text
• Minimum value : Number
• Maximum value : Number
• Step size : Number
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-number-change · Capture changes to this control.

Date Input

A user input component that allows users to select a date using a date picker interface.

Fields

• Label : Text
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-date-change · Capture changes to this control.

Radio Input

A user input component that allows users to choose a single value from a list of options using radio buttons.

Fields

• Label : Text
• Options : Key-Value · Key-value object with options. Must be a JSON string or a state reference to a dictionary.
• Orientation : Text · Vertical / Horizontal · Specify how to lay out the options.
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-option-change · Sent when the selected option changes.

Checkbox Input

A user input component that allows users to choose multiple values from a list of options using checkboxes.

Fields

• Label : Text
• Options : Key-Value · Key-value object with options. Must be a JSON string or a state reference to a dictionary.
• Orientation : Text · Vertical / Horizontal · Specify how to lay out the options.
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-options-change · Sent when the selected options change.

Dropdown Input

A user input component that allows users to select a single value from a list of options using a dropdown menu.

Fields

• Label : Text
• Options : Key-Value · Key-value object with options. Must be a JSON string or a state reference to a dictionary.
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-option-change · Sent when the selected option changes.

Select Input

A user input component that allows users to select a single value from a list of options with autocomplete.

Fields

• Label : Text
• Options : Key-Value · Key-value object with options. Must be a JSON string or a state reference to a dictionary.
• Maximum count : Number · The maximum allowable number of selected options. Set to zero for unlimited.
• Accent : Color
• Chip text : Color · The color of the text in the chips.
• Selected : Color
• Primary text : Color
• Secondary text : Color
• Container background : Color
• Separator : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-option-change · Sent when the selected option changes.

Multiselect Input

A user input component that allows users to select multiple values from a list of options with autocomplete.

Fields

• Label : Text
• Options : Key-Value · Key-value object with options. Must be a JSON string or a state reference to a dictionary.
• Maximum count : Number · The maximum allowable number of selected options. Set to zero for unlimited.
• Accent : Color · The colour of the chips created for each selected option.
• Chip text : Color · The colour of the text in the chips.
• Selected : Color · The colour of the highlighted item in the list.
• Primary text : Color
• Secondary text : Color
• Container background : Color
• Separator : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-options-change · Sent when the selected options change.

File Input

A user input component that allows users to upload files.

Fields

• Label : Text
• Allow multiple files : Text · Yes / No
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-file-change · Capture changes to this control.

Other

These components occupy a special role and are amongst the most powerful in the framework.

Button

A standalone button component that can be linked to a click event handler.

Fields

• Text : Text
• Disabled : Text · Yes / No · Disables all event handlers.
• Button : Color
• Button text : Color
• Icon : Text · A RemixIcon id, such as "arrow-up".
• Button shadow : Shadow
• Separator : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-click · Capture single clicks.

HTML Element

A generic component that creates customisable HTML elements, which can serve as containers for other components.

Fields

• Element : Text · Set the type of HTML element to create, e.g., 'div', 'section', 'span', etc.
• Styles : Object · Define the CSS styles to apply to the HTML element using a JSON object or a state reference to a dictionary.
• Attributes : Object · Set additional HTML attributes for the element using a JSON object or a dictionary via a state reference.
• HTML inside : Text · Define custom HTML to be used inside the element. It will be wrapped in a div and rendered after children components.
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Repeater

A container component that repeats its child components based on a dictionary.

Fields

• Repeater object : Object · Include a state reference to the dictionary used for repeating the child components. Alternatively, specify a JSON object.
• Key variable name : Text · Set the name of the variable that will store the key of the current repeater object entry.
• Value variable name : Text · Set the name of the variable that will store the value of the current repeater object entry.

Timer

A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.

Fields

• Interval (ms) : Number · How much time to wait between ticks. A tick is considered finished when its event is handled.
• Active : Text · Yes / No · Whether the timer should trigger tick events.
• Accent : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-tick · Emitted when the timer ticks.

Webcam Capture

A user input component that allows users to capture images using their webcam.

Fields

• Refresh rate (ms) : Number · Set to 0 for manual capture.
• Button : Color
• Button text : Color
• Button shadow : Shadow
• Separator : Color
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

• ss-webcam · Sent when a frame is captured. Its payload contains the captured frame in PNG format.

Root

These components are the top-level containers.

Root

The root component of the application, which serves as the starting point of the component hierarchy.

Fields

• App name : Text · The app name will be shown in the browser's title bar.
• Accent : Color
• Button : Color
• Button shadow : Shadow
• Button text : Color
• Container background : Color
• Container shadow : Shadow
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.
• Emptiness : Color · Page background color
• Primary text : Color
• Secondary text : Color
• Selected : Color
• Separator : Color

Events

• ss-hashchange · Capture changes to the URL hash, including page key and route vars.

Page

A container component representing a single page within the application.

Fields

• Page key : Identifying Key · Unique identifier. It's needed to enable navigation to this Page.
• Page mode : Text · Compact / Wide
• Accent : Color
• Button : Color
• Button shadow : Shadow
• Button text : Color
• Container background : Color
• Container shadow : Shadow
• Custom CSS classes : Text · CSS classes, separated by spaces. You can define classes in custom stylesheets.
• Emptiness : Color · Page background color
• Primary text : Color
• Secondary text : Color
• Selected : Color
• Separator : Color

Events

• ss-keydown · Captures all key activity while this page is open.
• ss-page-open · Emitted when the page is opened.