Documentation Index
Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
Use this file to discover all available pages before exploring further.
Template Syntax
Widget templates use a JSX-like syntax that gets compiled server-side into JSON structures for rendering.
Basic Syntax
<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
- Always use keys in lists
{items.map((item) => (
<Text key={item.id} value={item.name} />
))}
- Keep expressions simple
// Good
<Text value={userName} />
// Avoid complex logic
<Text value={users.filter(u => u.active).map(u => u.name).join(", ")} />
- Use meaningful prop names
// Good
<Image src={profilePicture} alt="User profile" />
// Avoid
<Image src={img1} alt={alt1} />
- Proper nesting
// Good
<Card>
<Row>
<Text value="Name" />
</Row>
</Card>
// Avoid deep nesting when possible
