Getting Started
Get up and running with Lego in under 5 minutes.
🚀 Want a Complete Walkthrough?
Check out our Step-by-Step Tutorial, build a full multi-page app from scratch in 15 minutes!
Installation
Option 1 (HTML): CDN (No Build Tools)
The fastest way to try Lego is via CDN:
<!DOCTYPE html>
<html>
<head>
<title>My Lego App</title>
</head>
<body>
<my-block></my-block>
<script src="https://unpkg.com/lego-dom"></script>
<template b-id="my-block" b-logic="{ count: 0 }">
<h1>Hello Lego!</h1>
<button @click="count++">Click me</button>
<p v-pre>Count: [[ count ]]</p>
</template>
</body>
</html>That's it! Open this HTML file in any browser and it works.
Option 2 (JS): npm
For projects using npm:
npm install lego-domThen import it:
import { Lego } from 'lego-dom';
Lego.block('my-block', `
<h1>Hello Lego!</h1>
<button @click="count++">Click me</button>
<p>Count: [[ count ]]</p>
`, {
count: 0
});Option 3 (Lego Files): Create LegoDOM App (Recommended)
For real-world apps, use create-legodom to scaffold a complete project with everything configured:
npm create legodom@latest my-lego-app
cd my-lego-app
npm install
npm run devThis sets up:
- ✅ Vite with the LegoDOM plugin pre-configured
- ✅ Sample
.legocomponent following best practices - ✅ Proper project structure and dependencies
- ✅ Hot Module Replacement (HMR) ready
Manual Setup (Alternative)
You can also set up manually with Vite:
npm create vite@latest my-lego-app -- --template vanilla
cd my-lego-app
npm install lego-domThen configure vite.config.js:
import { defineConfig } from 'vite';
import legoPlugin from 'lego-dom/vite-plugin';
export default defineConfig({
plugins: [legoPlugin()]
});The Runtime Engine
Auto-configured with create-legodom
If you used create-legodom, this is already set up in src/app.js!
You must initialize the Lego engine in your entry file (src/app.js):
import { Lego } from 'lego-dom';
import registerBlocks from 'virtual:lego-blocks';
// 1. Register SFCs
registerBlocks();
// 2. Start the Engine
Lego.init();Understanding the Basics
1. Templates
Templates define what your block looks like. Use [[ ]] for dynamic content:
<h1>Hello [[ name ]]!</h1>
<p>[[ calculateAge() ]] years old</p>2. State (Logic)
Each block has reactive state called "logic". Just assign values directly, no setState or special syntax needed:
{
name: 'Alice',
age: 25,
calculateAge() {
return new Date().getFullYear() - 1999;
}
}If You Know React
In React, you call setCount(count + 1) to update state. In LegoDOM, you just write count++. The Proxy-based reactivity system detects the change and updates the DOM automatically.
3. Events
Use @eventname to handle events (similar to Vue's @click or Svelte's on:click):
<button @click="handleClick()">Click</button>
<input @input="handleInput()" />
<form @submit.prevent="handleSubmit()">Modifiers like .prevent and .stop work inline, no need to call event.preventDefault() in your handler.
4. Directives
Special attributes for common patterns:
| Directive | Purpose | React/Svelte Equivalent |
|---|---|---|
b-if | Add/remove from DOM | {condition && <El/>} / {#if} |
b-show | Toggle visibility | style={{ display: ... }} / class:hidden |
b-for | List rendering | .map() / {#each} |
b-sync | Two-way binding | value + onChange / bind:value |
b-logic | Pass data to a block | props / export let |
For extensive information, see Directives.
<p b-show="isLoggedIn">Welcome back!</p>
<li b-for="item in items">[[ item.name ]]</li>
<input b-sync="username" />What You've Learned
- ✅ How to install LegoDOM
- ✅ The 3 different ways to create blocks
- ✅ The basics of templates, state, and events
- ✅ A sneak peek into the world of directives
- ✅ The use of the
Lego.init()to kickstart LegoDOM.
Next Steps
- Learn about Blocks in depth
- Explore Reactivity and how it works
- Check out Templating features
- See Examples of real applications