lego-dom
v2.1.1-alpha
Published
A feature-rich web components + SFC frontend framework
Maintainers
ortsergaReadme
Lego 🧱
The tiny, zero-dependency library for building reactive Web Components.
Lego embraces the web platform. It turns standard HTML <template> tags into reactive, encapsulated custom elements with zero build steps required.
Explore the Docs | Examples | GitHub
Why Lego?
- ⚡ Extremely Fast – No virtual DOM. No reconciliation. Direct DOM updates.
- 📦 Zero Dependencies – Weighs less than 4kb gzipped.
- 🛠️ No Build Step – Works directly in the browser with standard
<script>tags. - 🧩 Native Web Components – Real Custom Elements, real Shadow DOM.
- 🌐 Built-in Routing – Lego Router included for client-side routing.
- 📝 Familiar Mentals – Plain JavaScript objects for state, plain HTML for templates.
Quick Start
The fastest way to create a new LegoDOM project:
npm create legodom@latest my-app
cd my-app
npm install
npm run devThis scaffolds a complete project with Vite, the LegoDOM plugin, and a sample component!
Quick Start (No Build Required)
<!DOCTYPE html>
<html>
<body>
<hello-world></hello-world>
<template b-id="hello-world">
<style>
h1 { color: #ffca28; font-family: sans-serif; }
</style>
<h1>Hello, {{ name }}!</h1>
<button @click="toggle()">Toggle Name</button>
</template>
<script src="https://unpkg.com/lego-dom/main.js"></script>
<script>
document.querySelector('hello-world').state = {
name: 'World',
toggle() {
this.name = this.name === 'World' ? 'Lego' : 'World';
}
};
</script>
</body>
</html>Also Supports Modern Toolchains
Lego includes a Vite plugin for developers who prefer Single File Components (.lego):
<!-- user-card.lego -->
<template>
<h1>{{ name }}</h1>
</template>
<style>
self { display: block; padding: 20px; }
</style>
<script>
export default { name: 'John Doe' }
</script>🔗 Links
License
MIT © Tersoo Ortserga