CBWIRE v3 Released

CBWIRE v3 is here!

I am very excited to announce the release of version 3 of CBWIRE, our ColdBox module that makes building modern, reactive apps incredibly easy with little-to-no JavaScript. This version brings a new component syntax, 19 enhancements and bug fixes, and improved documentation. Our biggest goal with this release was to improve the developer experience and provide a low entry barrier to getting started with CBWIRE.

New Syntax

CBWIRE v3 now supports a simplified component syntax, making building reactive UI components much more straightforward. In previous versions, creating a UI component required for you to develop both a CFC and CFM file. The CFC file was a CFML component where data properties, computed properties, actions, and more were placed, and the CFM file was where the template was put.

Now, components are entirely self-contained in a single CFM file.

Consider this contact form below, defined in the file ./wires/emailSignup.cfm. The template is defined within a CFOUTPUT tag, and the component blueprint ( data properties, computed properties, etc.) is defined within CFSCRIPT tags.

// Render our contact form somewhere
wire( "ContactForm" );
<!--- ./wires/emailSignup.cfm --->
<!--- Template --->
    <form wire:submit.prevent="submitForm">
            <input wire:model.lazy="email" type="email" placeholder="Enter your email...">
            <label for="email">Email address</label>
            <cfif validation.hasErrors( "email" )>
                <div class="text-danger">
                    #validation.getAllErrors( "email" ).first()#
        <!--- Show if the form submission is successful --->
        <cfif success>
                <div class="text-center mb-3">
                    <div class="fw-bolder">Form submission successful!</div>
            class="btn btn-primary text-uppercase <cfif validation.hasErrors()>disabled</cfif>"

<!--- Component Blueprint --->
    // Validation constraints
    constraints = {
        "email": {
            "required": true,
            "type": "email"

    // Data properties
    data = {
        "email": "",
        "success": false

    // Actions
    function submitForm() {
        // Maybe send an email here
        data.success = true;

Accessing data and computed properties is also easier:

  • Data properties are now accessible in the template using #propertyName#. In previous versions, you had to scope the variables using #args.propertyName#.
  • Computed properties are now accessible using #propertyName()#. In previous versions, you had to scope using #args.computed.propertyName#.

Module Awareness

Your UI components are now module-aware, meaning they understand the module they originate from. If you use ColdBox modules to separate your application into various concerns, you can also place your CBWIRE components there. You can reference components from other modules and organize them however you need.

Improved Documentation

All documentation examples have been updated to use the new syntax. https://cbwire.ortusbooks.com/

Other Changes

You can see a complete list of the v3 changes here: What's New With 3.0 - CBWIRE


I really hope you are enjoying CBWIRE and find that it’s helping you build applications faster, with less boilerplate and unnecessary JavaScript. As always, I appreciate any feedback and look forward to hearing how you use CBWIRE.



Is there a setting to keep the original wire folder structure separate when upgrading from 2.x to this new version 3.x? We currently have the views/wires folder for the .cfm views, and /wires folder for the .cfc handlers. We were waiting for a stable production release so we can implement the new @entangle feature, but would like to avoid changing the current application structure.

Thanks in advance and again, great job with v3.