Skip to main content

​
Template Syntax

Widget templates use a JSX-like syntax that gets compiled server-side into JSON structures for rendering.

​
Basic Syntax

​
Self-Closing Tags

<Text value="Hello" />
<Image src={imageUrl} width={100} height={100} />

​
Nested Components

<Card padding="lg">
  <Title level={2} value="Card Title" />
  <Text value="Card content" />
</Card>

​
Data Binding

​
Simple Values

<Text value={userName} />
<Image src={profilePicture} />

​
Template Literals

<Title value={`Hello, ${userName}!`} />
<Text value={`You have ${count} notifications`} />

​
Expressions

<Text value={user.firstName + " " + user.lastName} />
<Badge color={status === "active" ? "green" : "gray"} />

​
Conditional Rendering

​
Logical AND

{isLoggedIn && <Text value="Welcome back!" />}
{hasNotifications && <Badge value={notificationCount} />}

​
Ternary Operator

{isLoading ? (
  <Text value="Loading..." />
) : (
  <Text value={data} />
)}

​
Lists and Iteration

​
Basic Map

{items.map((item) => (
  <Text key={item.id} value={item.name} />
))}

​
Complex List Items

{tasks.map((task) => (
  <Row key={task.id} gap="md" align="center">
    <Checkbox checked={task.completed} />
    <Text value={task.title} flex={1} />
    <Badge value={task.priority} />
  </Row>
))}

​
With Index

{items.map((item, index) => (
  <Text key={index} value={`${index + 1}. ${item.name}`} />
))}

​
Prop Types

​
Strings

<Text value="Static string" />
<Text value={dynamicString} />

​
Numbers

<Box padding={16} />
<Text size={14} />

​
Booleans

<Button disabled={true} />
<Checkbox checked={isCompleted} />

​
Objects

<Button onPress={{ type: "sendMessage", payload: { text: "Hi" } }} />

​
Best Practices

  1. Always use keys in lists
{items.map((item) => (
  <Text key={item.id} value={item.name} />
))}
  1. Keep expressions simple
// Good
<Text value={userName} />

// Avoid complex logic
<Text value={users.filter(u => u.active).map(u => u.name).join(", ")} />
  1. Use meaningful prop names
// Good
<Image src={profilePicture} alt="User profile" />

// Avoid
<Image src={img1} alt={alt1} />
  1. Proper nesting
// Good
<Card>
  <Row>
    <Text value="Name" />
  </Row>
</Card>

// Avoid deep nesting when possible