# Quick Start
With `mancha`, it's easier than ever to create simple web apps that require no server-side rendering or build tools. Once the complexity of your project grows, you can add those things as needed.
To get started, simply add this to your HTML head attribute:
```html
```
The `init` attribute automatically hides content until rendering is complete, preventing users from seeing raw template syntax. For advanced options like fade-in animations, see [Initialization](./02_initialization.md).
## Basic Form
After importing `Mancha`, you can take advantage of reactivity and tailwind-compatible CSS styling. For a full list of supported CSS utilities and minimal styles, see the [CSS Documentation](./05_css.md).
For example, a basic form might look like this:
```html
```
In the code above, the `:on:submit` tag simply prints 'submitted' to the console. Note that `Mancha` automatically prevents the form submission from refreshing the page by calling `event.preventDefault()`.
To provide more complex handlers, you can define callbacks as a function:
```html
```
If you want more control over the initialization lifecycle, you can remove the `init` attribute from the `
```
## Dynamic Lists
Creating dynamic lists—where users can add or remove items—is a common requirement. `mancha` handles this efficiently using the `:for` directive and array mutations.
```html
```
Key concepts for dynamic lists:
- **`:key`**: Always provide a unique key when using `:for` with dynamic data. This enables "keyed reconciliation", which reuses existing DOM nodes and is significantly faster.
- **`$index`**: This special variable is automatically available inside any `:for` loop and provides the current iteration index.
- **Array Mutations**: `mancha` detects when you use standard array methods like `push()`, `pop()`, or `splice()` and automatically updates the UI.
## Next Steps
Now that you've seen the basics, explore the full capabilities of `mancha`:
- **[Syntax](./01_syntax.md)**: Learn about all the attributes (`:data`, `:for`, `:if`, etc.) and the expression language.
- **[Initialization](./02_initialization.md)**: **Start here if you're unsure which initialization method to use.** Covers Script Tag, ES Module (`initMancha`), and `:render` attribute with a decision guide.
- **[Reactivity](./03_reactivity.md)**: Dive deep into variable scoping and URL binding.
- **[Components](./04_components.md)**: Build reusable components with ``, ``, and `:render`.
- **[CSS](./05_css.md)**: Explore the built-in utility classes.
- **[Server-Side Rendering](./06_ssr.md)**: Render templates on the server or in workers.
- **[TypeScript](./07_typescript.md)**: Use TypeScript for type-safe state and template checking.
- **[Testing](./08_testing.md)**: Test your components with JSDOM.