# Introduction
Are you tired of the challenges that come with building modern CFML apps? [ColdBox](https://coldbox.ortusbooks.com/) makes server-side app development a breeze, but sometimes the client-side is a whole different story. With powerful JavaScript frameworks like Vue and React, it can be a difficult and time-consuming process to create your web apps.
But what if you could have the best of both worlds: the power of Vue and React with the simplicity of CFML? Impossible, you say? Think again!
Introducing **CBWIRE: Power up your CFML and make your app dreams a reality!**
## Let's create a counter...
Install [CommandBox](https://www.ortussolutions.com/products/commandbox), then from our terminal, run:
```bash
mkdir cbwire-demo
cd cbwire-demo
box coldbox create app
box install cbwire@be
box server start
```
Next, add `wireStyles()` and `wireScripts()` to our layout. This is required for CBWIRE to do it's magic.
Let's also insert a counter element into the page using `wire( "Counter" )`.
```markup
#wireStyles()#
#wire( "Counter" )#
#wireScripts()#
```
Let's define our counter [Wire](/v2-1/essentials/creating-components.md).
```javascript
// ./wires/Counter.cfc
component extends="cbwire.models.Component" {
// Data Properties
data = {
"counter": 0
};
// Actions
function increment(){
data.counter += 1;
}
}
```
Finally, let's create a [Template](/v2-1/essentials/templates.md) for our counter Wire. Notice that we've added a `wire:click` [directive](/v2-1/template-features/directives.md) to our button.
```markup
Count: #args.counter#
```
Refresh the page. You now have a reactive counter that increments when you click the plus button without any page refreshing!
## What!? How?
1. CBWIRE renders our *Counter* Wire template. Our counter value defaults to 0.
2. When a user clicks the plus button, CBWIRE detects the event and makes an XHR request to the server.
3. CBWIRE picks up the XHR request and invokes the *increment* action.
4. The *increment* method updates the counter state by 1.
5. CBWIRE re-renders the template and returns the updated HTML in the XHR response
6. CBWIRE detects any state changes and uses Livewire to mutate the DOM.
## Awesome, right?
* We built a reactive counter with no page refreshing.
* We didn't write any JavaScript.
* We didn't use webpack or mess with JavaScript compilation.
* We never left CFML.:nerd:
CBWIRE is transforming the way we build CFML applications, and we think you're going to love it also!
## Credits
CBWIRE is built on [Livewire](https://laravel-livewire.com/) and wouldn't exist without [Caleb Porzio](https://twitter.com/calebporzio) ( creator of [Livewire](https://laravel-livewire.com/), [Alpine.js](https://github.com/alpinejs/alpine) ) and the PHP community.
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).
## Resources
* CBWIRE Examples:
* ForgeBox:
* GitHub Repository:
* API Docs:
* Issue Tracker:
* Task List Demo:
* Form Validation Demo:
* Up and Running Screencast:
* Into The Box 2021 Presentation:
* Ortus Webinar 2022:
---
# 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://cbwire.ortusbooks.com/v2-1/master.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.