Skip to main content

​
Widget System

The LyznFlow widget system allows you to create dynamic, reusable UI components using a JSX-like template syntax. Widgets are compiled server-side and rendered on both web and mobile platforms.

​
Quick Start

<Card padding="lg" radius="lg">
  <Title level={1} value="Hello World" />
  <Text value="This is a simple widget" />
  <Button label="Click Me" variant="primary" />
</Card>

​
Key Features

  • Cross-Platform: Write once, render on web and React Native
  • Data Binding: Dynamic templates with JavaScript expressions
  • Type-Safe: Full TypeScript support
  • Themeable: Built-in light/dark mode support
  • Composable: Nest components to build complex UIs

​
Component Categories

​
Layout Components

  • Box - Flexible container with styling
  • Row - Horizontal flex layout
  • Col - Vertical flex layout
  • Card - Styled card with shadow and gradients
  • Spacer - Flexible spacing
  • Divider - Visual separator

​
Typography

  • Text - Basic text with styling
  • Title - Headings (h1-h6)
  • Caption - Small descriptive text
  • Label - Form labels
  • Markdown - Render markdown content

​
Form Components

​
Media Components

​
Template Syntax

​
Basic Usage

<Text value="Static text" />

​
Data Binding

<Text value={userName} />
<Title level={2} value={`Hello, ${userName}!`} />

​
Conditional Rendering

{isLoggedIn && <Text value="Welcome back!" />}
{status === "active" ? <Badge color="green" /> : <Badge color="gray" />}

​
Lists and Iteration

{tasks.map((task) => (
  <Row key={task.id}>
    <Checkbox checked={task.completed} />
    <Text value={task.title} />
  </Row>
))}

​
Next Steps