LegoDOM is Simple to Learn

<style>
  self {}
  button { background-color: #000; color: #fff; padding: 5px 10px; }
</style>

<template b-stylesheets="bulma">
  <input type="text" b-sync="name">
  <button @click="greet">[[ count > 0 ? `Greeted ${count} times` : 'Greet' ]]</button>
  <h1>Hello [[ name ]]! You are on the [[ $route.url ]] page.</h1>
</template>

<script>
  export default {
    count: 0,
    name: $db('username').default('World'),
    greet() {
      alert('Hello ' + this.name + '!');

      //let's send it up the lego chain
      this.$emit('greet', this.name);
    }
  }
</script>

Welcome! In the next 15 minutes, you'll build a complete multi-page application with beautiful blocks, smooth navigation, and a login flow. No prior framework experience needed.

What You'll Build

A polished app with:

• 🏠 Landing Page – Your app's front door
• 🔐 Login Page – A form that validates and navigates
• 🎉 Welcome Page – Personalized dashboard after login

All using Single File Blocks (.lego files) and client-side routing.

Prerequisites

• Node.js 18+ installed
• A code editor (VS Code recommended)
• Basic HTML/CSS/JavaScript knowledge

Tutorial Path

Step	You'll Learn
1. Project Setup	Create a new project with Vite
2. Your First Block	Build a .lego file
3. Adding Routes	Navigate between pages
4. Multi-Page App	Complete login flow
5. State & Globals	Share data across pages

Ready?

Start Building →

No Build Tools? No Problem!

If you want to skip the Vite setup and use LegoDOM via CDN, check out the CDN Quick Start. You can always come back to this tutorial later.