Streamsync

Appearance

Component list ​

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.
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.
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 / Top / Center / Bottom
  • 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
  • Minimum value : Number
  • Max value : Number
  • Step : Number
  • 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.
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 searchable list of options.
Fields
  • Label : Text
  • Options : Key-Value · Key-value object with options. Must be a JSON string or a state reference to a dictionary.
  • Placeholder : Text · Text to show when no options are selected.
  • 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 searchable list of options.
Fields
  • Label : Text
  • Options : Key-Value · Key-value object with options. Must be a JSON string or a state reference to a dictionary.
  • Placeholder : Text · Text to show when no options are selected.
  • 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.