Examples

Explore these hands-on examples to learn Lego patterns and best practices.

Quick Examples

Counter

A simple reactive counter demonstrating basic state and events.

<template b-id="click-counter">
  <style>
    button { font-size: 1.2rem; padding: 0.5rem 1rem; }
  </style>
  <p>Count: [[ count ]]</p>
  <button @click="count++">Increment</button>
</template>

<click-counter b-logic="{ count: 0 }"></click-counter>

Input Binding

Two-way data binding with b-sync.

<template b-id="name-input">
  <input b-sync="name" placeholder="Enter your name">
  <p b-show="name">Hello, [[ name ]]!</p>
</template>

<name-input b-logic="{ name: '' }"></name-input>

Todo List

Lists with b-for.

<template b-id="todo-list">
  <ul>
    <li b-for="todo in todos">
      <input type="checkbox" b-sync="todo.done">
      <span class="[[ todo.done ? 'done' : '' ]]">[[ todo.text ]]</span>
    </li>
  </ul>
</template>

<todo-list b-logic="{
  todos: [
    { text: 'Learn Lego', done: true },
    { text: 'Build an app', done: false }
  ]
}"></todo-list>

Full Applications

Todo App

A complete todo application with:

• Add/remove todos
• Mark as complete
• Filter by status
• Local storage persistence

Routing Demo

Single-page application with:

• Multiple pages
• Dynamic routes
• Navigation
• Route parameters

Lego Files Showcase

Using Single File Blocks:

• User cards
• Product grid
• Modal dialogs
• Form validation

Form Validation

Advanced form handling:

• Input validation
• Error messages
• Submit handling
• Reset functionality

CodePen Examples

Try these examples directly in your browser:

• Simple Counter
• Todo App
• Dynamic Form

Next Steps

• Check the API Reference
• Read the Guide
• View the source code