# Reactivity Trillo augments HTML to include: * `:`-prefixed attributes, to declare logic values, * `[[...]]` blocks, to declare reactive JavaScript expressions. Let's see what this looks like in practice. Make sure you [installed Trillo](https://trillojs.dev/docs/quick-start#installation), than create a directory `myapp` containing this `index.html` file: ```html ``` We can now serve the page with the `trillo serve ` command. This page displays a red button with text "*Click to change this red color*". When you click it, it becomes green with text "*Click to change this green color*". If you click it again it gets back to its initial state and so on. As you can see, `:` values and `[[...]]` expressions are *reactive*, meaning that changes to values are automatically reflected in all expressions where they are referenced. In the delivered page there's no `:`-prefixed attributes and no `[[color]]` blocks. Rather, there is some page-specific JavaScript code that implements their behaviour. This page-specific code starts executing in the server, to provide the page with a valid initial content, and then it goes on in the client as needed to continue page logic execution. If you change e.g. `"red"` to `"blue"` in the first line and save, you’ll see that, because we’re using Trillo’s development server, the browser is automatically refreshed after source changes. You may have noticed that reactivity in Trillo extends to styling. While this shouldn't be overused, it makes for a much better integrated and more cohesive programming model. There's no need for another tool and another syntax to preprocess your stylesheets. Plus, all visual aspects of your page, implemented via CSS or not, can be driven by the same set of values. There is of course much more to reactivity than this first example can show. You can learn all there is to know in the [Reference](https://trillojs.dev/docs/reference/language). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://trillojs.gitbook.io/en/concepts/reactivity.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.