Skip to main content

EDL

EDL (Evlop Design Language) is a declarative UI framework that allows you to build user interfaces using JSX-like syntax with dynamic data binding capabilities. It combines the simplicity of markup with powerful reactive programming features.

Key Features​

  • JSX-like syntax for component composition
  • Dynamic data binding and expressions
  • Built-in control flow directives
  • Rich set of pre-built components
  • Theme system integration
  • Styled-system props support

Basic Example​

<Container>
  <Heading>Welcome to EDL</Heading>
  <Text>This is a simple example showing EDL syntax</Text>
  <Button 
    action={() => setState('counter', state.counter + 1)}
    variant="filled"
  >
    Click me
  </Button>
  <Text>Counter: {state.counter}</Text>
</Container>

Core Concepts​

  • Components: EDL provides a rich set of UI components for building interfaces
  • Props: Customize components using various props
  • Control Flow: Use :if and :forEach for conditional rendering and loops
  • State Management: Use state and setState for reactive state
  • Data Sources: Connect to external data using the DataSource component