📝 Code Examples

# Simple Hello World in Nixi
let
  app = div { 
    class: "container"; 
    text: "Hello Nixi World!" 
  };
in
  saveHTML(app, "hello.html", "Hello World App")

# Basic arithmetic with built-in functions
let
  x = 42;
  y = 23;
  sum = add(x, y);
  message = "The sum is: " + sum;
  
  app = div {
    class: "container";
    children: [
      h1 { text: "Math Demo" };
      p { text: message }
    ]
  };
in
  saveHTML(app, "math.html", "Math Demo")

# Define styles first
style "app" {
  max-width: "600px";
  margin: "0 auto";
  padding: "20px";
  font-family: "Arial, sans-serif";
}

style "btn" {
  background: "#007bff";
  color: "white";
  border: "none";
  padding: "10px 20px";
  border-radius: "5px";
  cursor: "pointer";
}

# Main application
let
  app = div {
    class: "app";
    children: [
      h1 { text: "Styled App" };
      button {
        class: "btn";
        text: "Click Me!";
        onClick: echo "Button clicked!"
      }
    ]
  };
in
  saveHTML(app, "styled.html", "Styled App")

# Professional dashboard with statistics
let
  appName = "Nixi Dashboard";
  version = "v1.0.0";
  
  # Statistics cards
  usersStat = div {
    class: "stat-card";
    children: [
      div { class: "stat-number"; text: "1,234" };
      div { class: "stat-label"; text: "Total Users" }
    ]
  };
  
  # Dashboard header
  Header = div {
    class: "dashboard-header";
    children: [
      h1 { text: appName };
      p { text: "Functional Programming Dashboard " + version }
    ]
  };
  
  # Complete dashboard
  Dashboard = div {
    class: "dashboard";
    children: [ Header; usersStat ]
  };
in
  saveHTML(Dashboard, "dashboard.html", "Nixi Dashboard")

# Complete todo application with state management
let
  # Define styles
  _ = style ".todo-app" {
    max-width: "400px";
    margin: "0 auto";
    font-family: "Arial";
  };
  
  _ = style ".todo-item" {
    display: "flex";
    justify-content: "space-between";
    padding: "10px";
    border: "1px solid #ccc";
    margin: "5px 0";
  };
  
  # Components
  TodoItem = { text, completed, onToggle }: div {
    class: "todo-item";
    children: [
      span {
        text: if completed then "✓ " + text else text;
        onClick: onToggle
      };
      button { 
        text: "Delete"; 
        onClick: echo "Delete clicked" 
      }
    ]
  };
  
  TodoApp = div {
    class: "todo-app";
    children: [
      h1 { text: "Todo List" };
      input { 
        placeholder: "Add todo"; 
        onChange: val: echo ("New todo: " + val) 
      };
      TodoItem { 
        text: "Buy milk"; 
        completed: false; 
        onToggle: echo "Toggled" 
      };
      TodoItem { 
        text: "Walk dog"; 
        completed: true; 
        onToggle: echo "Toggled" 
      }
    ]
  };
in
  saveHTML(TodoApp, "todo.html", "Todo App")

# User profile system with reusable components
let
  # User profile component
  UserProfile = { user }: div {
    class: "user-profile";
    children: [
      img {
        src: user.avatar;
        alt: "Avatar of " + user.name;
        class: "avatar"
      };
      div {
        class: "user-info";
        children: [
          h4 { text: user.name };
          p { text: user.email };
          span { text: "Role: " + user.role }
        ]
      }
    ]
  };
  
  # User list component
  UserList = { users }: div {
    class: "user-list";
    children: map(UserProfile, users)
  };
  
  # Sample data
  users = [
    { 
      name = "Alice"; 
      email = "alice@example.com"; 
      role = "Developer"; 
      avatar = "alice.jpg" 
    };
    { 
      name = "Bob"; 
      email = "bob@example.com"; 
      role = "Designer"; 
      avatar = "bob.jpg" 
    };
    { 
      name = "Charlie"; 
      email = "charlie@example.com"; 
      role = "Manager"; 
      avatar = "charlie.jpg" 
    }
  ];
  
  # Main application
  App = div {
    class: "app";
    children: [
      h1 { text: "User Management System" };
      p { text: "Total users: " + toString(length(users)) };
      UserList { users: users }
    ]
  };
in
  saveHTML(App, "user-profiles.html", "User Profile System")

# E-commerce product card with pricing
let
  # Product card component
  ProductCard = { product }: div {
    class: "product-card";
    children: [
      img {
        src: product.image;
        alt: product.name;
        class: "product-image"
      };
      div {
        class: "product-info";
        children: [
          h3 { text: product.name };
          p { text: product.description };
          div {
            class: "price-row";
            children: [
              span { 
                class: "price"; 
                text: "$" + toString(product.price) 
              };
              if product.originalPrice > product.price
              then span { 
                class: "original-price"; 
                text: "$" + toString(product.originalPrice) 
              }
              else span {};
              if product.originalPrice > product.price
              then span { 
                class: "discount"; 
                text: "Save $" + toString(product.originalPrice - product.price) 
              }
              else span {}
            ]
          };
          button {
            class: "add-to-cart";
            text: "Add to Cart";
            onClick: echo ("Added to cart: " + product.name)
          }
        ]
      }
    ]
  };
  
  # Sample products
  products = [
    {
      name = "Wireless Headphones";
      description = "Premium noise-cancelling wireless headphones";
      price = 199.99;
      originalPrice = 299.99;
      image = "headphones.jpg"
    };
    {
      name = "Smart Watch";
      description = "Fitness tracking smartwatch with heart rate monitor";
      price = 149.99;
      originalPrice = 149.99;
      image = "watch.jpg"
    }
  ];
  
  # Product grid
  ProductGrid = div {
    class: "product-grid";
    children: map(ProductCard, products)
  };
  
  # Main store page
  Store = div {
    class: "store";
    children: [
      h1 { text: "Nixi Electronics Store" };
      p { text: "Featured products" };
      ProductGrid
    ]
  };
in
  saveHTML(Store, "store.html", "Nixi Store")