Skip to main content
The root component of the application, which serves as the starting point of the component hierarchy.

​
Fields

NameTypeDescriptionOptions
App nameTextThe app name will be shown in the browser’s title bar.-
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.-
ButtonColor--
Button shadowShadow--
AccentColor--
PaddingPadding--
Primary textColor--
Button textColor--
EmptinessColorPage background color-
Container shadowShadow--
Secondary textColor--
SeparatorColor--
Content alignment (V)Align (V)--
Content alignment (H)Align (H)--
Content widthWidthConfigure content width using CSS units, e.g. 100px, 50%, 10vw, etc.-

​
Events

Captures the first application load, including page key and route vars.
def handle_app_open(state):
# The payload is a dictionary with the page key and all the route variables in the URL hash.
# For example, if the current URL is http://localhost:3000/#/animal=duck&colour=yellow
# you will get the following dictionary
# {
#   "page_key": "main",
#	  "route_vars": {
#		  "animal": "duck",
#		  "colour": "yellow"
#	  }
# }

page_key = payload.get("page_key")
route_vars = payload.get("route_vars")
Capture changes to the URL hash, including page key and route vars.
def handle_hashchange(state, payload):
# The payload is a dictionary with the page key and all the route variables in the URL hash.
# For example, if the current URL is http://localhost:3000/#main/animal=duck&colour=yellow
# you will get the following dictionary
# {
#	  "page_key": "main",
#	  "route_vars": {
#		  "animal": "duck",
#		  "colour": "yellow"
#	  }
# }

page_key = payload.get("page_key")
route_vars = payload.get("route_vars")

if not route_vars:
	return

if route_vars.get("animal") == "duck":
	state["message"] = "You've navigated to the Duck zone."
else:
	state["message"] = "You're not in the Duck zone.