Components
Available components for building player interfaces
Text
Display static text content.
{
"type": "Text",
"props": {
"text": "Sample Text",
"style": {
"color": "black",
"align": "center",
"background": "white",
"border": "4px solid black",
"width": "auto",
"fontSize": "16px",
"padding": "10px",
"margin": "10px 0px",
"borderRadius": "10px",
"fontFamily": "sans-serif"
}
}
}
TextInput
Text field that sends a custom value back to the host when submitted.
{
"type": "TextInput",
"props": {
"type": "text", // Can be set to "number" to limit input to numeric-only.
"min": undefined, // Minimum value for "number" type inputs.
"max": undefined, // Maximum value for "number" type inputs.
"step": 1, // Step value for "number" type inputs.
"event": "text",
"persistent": false, // If persistent, the field will allow multiple submissions.
"style": {
"color": "black",
"align": "left",
"background": "white",
"border": "2px solid black",
"width": "100%",
"fontSize": "30px",
"padding": "10px",
"margin": "10px 0",
"borderRadius": "0px",
"fontFamily": "sans-serif"
}
}
}
Button
Button that sends a predefined message back to the host when triggered.
{
"type": "Button",
"props": {
"label": "A: 42",
"value": "A",
"keys": ["A", "1"], // Keyboard keys that can be used to trigger the button.
"style": {
"color": "black",
"align": "center",
"background": "#AAAAAA",
"border": "2px solid black",
"width": "100%",
"fontSize": "20px",
"padding": "0 20px",
"margin": "10px 0px",
"borderRadius": "10px",
"fontFamily": "sans-serif",
"hover": {
"color": "black",
"background": "#AAAAAA"
}
}
}
}
Choices
Multiple buttons in a group, for multiple choice (single or multiple answer).
{
"type": "Choices",
"props": {
"event": "answer",
"multiSelect": false,
"choices": [
// Each choice is a Button component.
// See Button for customization options.
{
"label": "A: Helium",
"value": "A",
"keys": ["A", "1"]
},
{
"label": "B: Neon",
"value": "B",
"keys": ["B", "2"]
},
{
"label": "C: Krypton",
"value": "C",
"keys": ["C", "3"]
},
{
"label": "D: Boron",
"value": "D",
"keys": ["D", "4"]
}
],
// Options for the submit button.
// The "Enter" key can be used to submit. This prop is not customizable.
"submit": {
"label": "Submit",
"style": {
"margin": "50px 0px"
}
},
"style": {
"grid": false,
"gridColumns": 2,
"gridRowHeight": "1fr",
"gridGap": "10px"
}
}
}
Sort
Configurable identically to Choices, but the buttons are not individually selectable. Instead, players sort all the options from top to bottom, then submit.
Range
Allows players to submit a numeric answer using a draggable selector on a range, or with a text input.
{
"type": "Range",
"props": {
"event": "range",
"min": 0,
"max": 100,
"step": 1,
"style": {
"color": "black",
"align": "left",
"background": "white",
"border": "2px solid black",
"width": "100%",
"fontSize": "16px",
"padding": "10px",
"margin": "10px 0",
"borderRadius": "0px",
"fontFamily": "sans-serif"
}
}
}