# AppBlocks > A tiny, fast, and lightweight JavaScript library for building micro applications AppBlocks is designed to enhance web pages with self-contained micro applications. With a focus on simplicity and minimal footprint, AppBlocks provides everything needed to build interactive components while being ridiculously easy to integrate into any project. ## Why AppBlocks? - **ðŸŠķ Lightweight**: Minimal bundle size with no heavy dependencies - **⚡ Fast**: Efficient rendering with smart DOM diffing (Idiomorph) - **ðŸŽŊ Focused**: Built specifically for micro apps and widgets - **ðŸ“Ķ Zero Config**: Works out of the box with a simple script tag - **🔧 Flexible**: Template-based with reactive data binding Read more about the [AppBlocks use case](https://agtgreg.github.io/AppBlocks/#/whyappblocks). ## Quick Start Here's a complete "Hello World" app in under 30 lines: ```html My First AppBlock
``` ## Installation ### CDN (Recommended for Quick Start) ```html ``` ### NPM ```bash npm install appblocks ``` Then import in your JavaScript: ```javascript import { AppBlock } from 'appblocks'; ``` ### Direct Download Download the latest release and include it in your HTML: ```html ``` ## Core Features ### 📊 Reactive Data Binding ```javascript var app = new AppBlock({ el: document.getElementById('app'), data: { count: 0 }, // ... }); // Update data and automatically re-render app.setData({ count: 1 }); ``` ### ðŸŽĻ Template Directives ```html

Now you see me

Now you don't

``` ### 🔄 Filters ```javascript filters: { uppercase(app, value) { return value.toUpperCase(); } } ``` ```html

{data.name|uppercase}

``` ### ðŸŽŊ Event Handling ```javascript events: { 'click .btn': function(e, element) { this.Parent.setData({ clicked: true }); }, 'submit form': function(e, element) { e.preventDefault(); // Handle form submission } } ``` ### 🌐 Built-in HTTP Requests ```javascript app.fetchRequest('https://api.example.com/data', { method: 'GET' }, { success: (data) => app.setData({ items: data }), error: (err) => console.error(err) } ); ``` ## Documentation **📚 [Full Documentation](https://agtgreg.github.io/AppBlocks/#/)** - [Getting Started Guide](https://agtgreg.github.io/AppBlocks/#/README) - [Data Management](https://agtgreg.github.io/AppBlocks/#/data) - [Directives](https://agtgreg.github.io/AppBlocks/#/directives) - [Filters](https://agtgreg.github.io/AppBlocks/#/filters) - [Methods](https://agtgreg.github.io/AppBlocks/#/methods) - [Event Handling](https://agtgreg.github.io/AppBlocks/#/README?id=event-handling) - [HTTP Requests](https://agtgreg.github.io/AppBlocks/#/requests) - [API Reference](https://agtgreg.github.io/AppBlocks/#/api) ## Browser Support AppBlocks works in all modern browsers that support ES6: - Chrome/Edge (latest) - Firefox (latest) - Safari (latest) - Opera (latest) ## Contributing Contributions are welcome! Please feel free to submit a Pull Request. ## License MIT License - see LICENSE file for details