mancha

mancha is a simple HTML templating and reactivity library for simple people. It works on the browser or the server. It can be used as a command-line tool, or imported as a Javascript module.

Here's a small sample of the things that you can do with mancha:

``html






Click me:

Enter your name:

Hello, {{ name }}!


`

Why another front-end Javascript library?

mancha is great for:

- prototyping, just plop a script tag in your HTML and off you go
- testing, individual components can be rendered and tested outside the browser
- progressive enhancement, from simple templating and basic reactivity to a full-blown app

| Feature | mancha | Svelte | React.js | Vue.js | petite-vue | Alpine.js |
| --------------------- | ------ | ------ | -------- | ------ | ---------- | --------- |
| Simple to learn | ✔️ | ❌ | ❌ | ❌ | ✔️ | ✔️ |
| < 18kb compressed | ✔️ | ✔️ | ❌ | ❌ | ✔️ | ❌ |
| Custom web components | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❌ |
| Client-side rendering | ✔️ | ❌ | ❌ | ✔️ | ✔️ | ✔️ |
| Server-side rendering | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❌ |

Documentation

- Quick Start: Get up and running in minutes.
- Syntax: Reference for attributes and expressions.
- Initialization: Script tag options, ESM API, cloaking, and callbacks.
- Reactivity: How variables, scoping, and URL binding work.
- Components: Creating reusable components and includes.
- CSS: Built-in CSS utilities.
- Server-Side Rendering: Using Mancha on the server (Node, Workers).
- TypeScript: Type safety and checking.
- Testing: Testing your UI.
- Performance: Performance monitoring and optimization.

AI Agents

If you are an AI agent building with mancha, you can dump all the documentation in a single concatenated output by running:

`bash
npx mancha docs
`

Dependencies

The browser bundle contains no external dependencies. The unbundled version can use htmlparser2, which is compatible with web workers, or jsdom`.