Rettangoli Frontend
A modern frontend framework that uses YAML for view definitions, web components for composition, and Immer for state management. Build reactive applications with minimal complexity using just 3 types of files.
Features
- 🗂️ Three-File Architecture -
.view.yaml
, .store.js
, .handlers.js
files scale from single page to complex applications
- 📝 YAML Views - Declarative UI definitions that compile to virtual DOM
- 🧩 Web Components - Standards-based component architecture
- 🔄 Reactive State - Immer-powered immutable state management
- ⚡ Fast Development - Hot reload with Vite integration
- 🎯 Template System - Jempl templating for dynamic content
- 🧪 Testing Ready - Pure functions and dependency injection for easy testing
Quick Start
rtgl fe build
rtgl fe watch
Documentation
Architecture
Technology Stack
Runtime:
Build & Development:
- ESBuild - Fast bundling
- Vite - Development server with hot reload
Browser Native:
- Web Components - Component encapsulation
Development
Prerequisites
- Node.js 18+ or Bun
- A
rettangoli.config.yaml
file in your project root
Setup
bun install
- Create project structure:
node ../rettangoli-cli/cli.js fe scaffold --category components --name MyButton
node ../rettangoli-cli/cli.js fe build
node ../rettangoli-cli/cli.js fe watch
Project Structure
src/
├── cli/
│ ├── build.js # Build component bundles
│ ├── watch.js # Development server with hot reload
│ ├── scaffold.js # Component scaffolding
│ ├── examples.js # Generate examples for testing
│ └── blank/ # Component templates
├── createComponent.js # Component factory
├── createWebPatch.js # Virtual DOM patching
├── parser.js # YAML to JSON converter
├── common.js # Shared utilities
└── index.js # Main exports
Configuration
Create a rettangoli.config.yaml
file in your project root:
fe:
dirs:
- "./src/components"
- "./src/pages"
setup: "setup.js"
outfile: "./dist/bundle.js"
examples:
outputDir: "./vt/specs/examples"
Testing
View Components
Use visual testing with rtgl vt
:
rtgl vt generate
rtgl vt report
Examples
For a complete working example, see the todos app in examples/example1/
.