> For the complete documentation index, see [llms.txt](https://cbwire.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cbwire.ortusbooks.com/3.x/master.md).
# Introduction
CBWIRE is a ColdBox module that helps you build modern, reactive CFML applications in record time - without using much JavaScript or building backend APIs. Become a web development hero with CBWIRE!
## Your First Component
Download and install [CommandBox](https://www.ortussolutions.com/products/commandbox). From your CLI, start CommandBox by typing 'box'. Then run the following:
```
mkdir cbwire-playground --cd
coldbox create app
install cbwire@be
server start
```
Let's insert a counter element into our Main layout using **wire( "Counter" )***.*
```markup
#wireStyles()#
#wire( "Counter" )#
#wireScripts()#
```
Let's define our Counter component using the path **./wires/Counter.cfm**.
```html
// Data properties
data = {
"counter": 0 // default value
};
// Actions
function increment() {
data.counter += 1;
}
Count: #counter#
```
You now have a reactive counter that increments when you click the plus button without any page refreshing or writing JavaScript! 🤯
## What!? How?
1. CBWIRE automatically processes the HTML template, data properties, and actions of our component, then displays the component with its initial settings (which begin at 0).
2. When a user clicks a button, CBWIRE initiates an XMLHTTPRequest (XHR) to communicate with the server.
3. CBWIRE captures this XMLHTTPRequest and triggers the 'increment()' action, leading to an update in our data property.
4. Following this, CBWIRE updates the HTML template and includes this revised HTML in the XMLHTTPRequest response.
5. CBWIRE monitors any state changes and employs JavaScript and DOM comparison techniques to refresh the display on the screen.
## Awesome, right?
* We developed a responsive counter using just one file: wires/Counter.cfm.
* We avoided writing any JavaScript code.
* We didn't need to create an API.
* There was no need for page refreshes.
* We skipped using webpack or dealing with JavaScript compilation.
* We stayed entirely within the CFML environment. :nerd:
CBWIRE is transforming the way we build CFML applications, and we think you're going to love it too!
## Credits
CBWIRE uses [Livewire](https://laravel-livewire.com/) for its client-side functionality and DOM diffing and wouldn't exist without the awesome work of [Caleb Porzio](https://twitter.com/calebporzio) ( creator of [Livewire](https://laravel-livewire.com/), [Alpine.js](https://github.com/alpinejs/alpine) ).
The CBWIRE module for ColdBox is written and maintained by [Grant Copley](https://twitter.com/grantcopley), [Luis Majano](https://twitter.com/lmajano), and [Ortus Solutions](https://www.ortussolutions.com/).
## Project Support
Please consider becoming one of our lovingly esteemed [Patreon supporters](https://www.patreon.com/ortussolutions).
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://cbwire.ortusbooks.com/3.x/master.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.
