> ## 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 Guide

> Learn the JSX-like template syntax for building widgets

# Template Syntax

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

## Basic Syntax

### Self-Closing Tags

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

### Nested Components

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

## Data Binding

### Simple Values

```jsx theme={null}
<Text value={userName} />
<Image src={profilePicture} />
```

### Template Literals

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

### Expressions

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

## Conditional Rendering

### Logical AND

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

### Ternary Operator

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

## Lists and Iteration

### Basic Map

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

### Complex List Items

```jsx theme={null}
{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

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

## Prop Types

### Strings

```jsx theme={null}
<Text value="Static string" />
<Text value={dynamicString} />
```

### Numbers

```jsx theme={null}
<Box padding={16} />
<Text size={14} />
```

### Booleans

```jsx theme={null}
<Button disabled={true} />
<Checkbox checked={isCompleted} />
```

### Objects

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

## Best Practices

1. **Always use keys in lists**

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

2. **Keep expressions simple**

```jsx theme={null}
// Good
<Text value={userName} />

// Avoid complex logic
<Text value={users.filter(u => u.active).map(u => u.name).join(", ")} />
```

3. **Use meaningful prop names**

```jsx theme={null}
// Good
<Image src={profilePicture} alt="User profile" />

// Avoid
<Image src={img1} alt={alt1} />
```

4. **Proper nesting**

```jsx theme={null}
// Good
<Card>
  <Row>
    <Text value="Name" />
  </Row>
</Card>

// Avoid deep nesting when possible
```