RAD Studio introduced WebStencils, a server-side script-based integration and processing of HTML files.

This ebook focuses on a modern, streamlined approach to web development using HTMX and WebStencils.

HTMX’s simplicity aligns perfectly with RAD Studio’s rapid application development ethos, allowing developers to focus more on application logic instead of struggling with complex front-end code.

The beauty of WebStencils lies in its template-driven architecture. Instead of reinventing the wheel, developers can expose existing business logic via reusable and customisable templates that seamlessly integrate with existing applications, reducing the friction of bringing older projects to the web. This not only accelerates development but also enhances collaboration between development teams, enabling them to work more closely with existing codebases.

Written by Antonio Zapater, this guide will show you how to harness the power of HTMX and WebStencils to develop modern Web applications with less effort and greater flexibility.

What’s New in this v2 ?

This isn’t just a few tweaks here and there. We’ve reworked existing chapters to cover new features introduced since RAD Studio 12.2, and added several entirely new chapters such as:

• Session Management and Authentication – Practical patterns for handling user sessions and login flows
• Database-Driven UI Generation – Techniques for building dynamic interfaces from database metadata
• Working with Modern CSS Frameworks – Integration strategies for Tailwind CSS and other modern styling tools
• Deployment Options and Docker – Real-world deployment scenarios and containerization approaches 

Preface

01 - Introduction to HTMX

What is HTMX?

• Brief Overview
• Comparison with Traditional JavaScript and AJAX

Core Concepts

• hx-get: Fetching Content via GET Requests
• hx-target: Specifying the Target Element for the Response
• hx-post: Submitting Data via POST Requests
• hx-put, hx-patch, hx-delete Requests
• hx-swap: Controlling How Content is Swapped
• Additional Core Concepts

02 - Introduction to WebBroker

What is WebBroker?

• Key Features of WebBroker

Core Concepts

• Components and Architecture
• Creating a WebBroker Application
• Handling Requests and Responses
• Deployment and Scalability

Session Management in WebBroker
Security Considerations

• CSRF Protection
• Data Validation
• Cross-site Scripting (XSS)
• Other Security Considerations

03 - Developing your first web app using WebBroker

Introduction
Creating a "Hello World" Application
Basic To-Do App

04 - Advanced Attributes and Security Using HTMX

Introduction
Advanced Attributes

• hx-put and hx-delete: Submitting Requests via PUT and DELETE
• hx-trigger: Customizing Event Triggers
• hx-select: Selecting Parts of the Server Response
• hx-include: Including Additional Data in Requests
• hx-push-url: Updating the Browser's URL

05 - Introduction to WebStencils

What is WebStencils?

• Core Concept
• Integration with HTMX
• CSS and JS Agnostic

WebStencils Syntax

• The @ Symbol
• Curly Braces for Blocks { }

Accessing Values with the Dot Notation
WebStencils Keywords and Examples

• @page
• @query
• Comments (@* .. *@)
• @if and @else
• @if not
• @switch
• @ForEach

Conclusion

06 - Components and Layouts Options

Introduction
WebStencils Components

• WebStencils Engine
• WebStencils Processor
• TWebStencilsEngine and WebBroker

Adding Data with AddVar

• Direct Object Assignment
• Using Attributes
• Custom Data Access with Lookup Functions
• Important Considerations

Layout and Content Placeholders

• @RenderBody
• @LayoutPage
• @Import
• @ExtraHeader and @RenderHeader
• Nested Layout Support

Template Patterns

• Standard Layout
• Header/Body/Footer
• Reusable Components

Conclusion

07 - Migrating the To-Do app to WebStencils

Introduction
Converting HTML Constants to Templates

• Main Layout Template
• To-Do List Template
• Updating the WebModule

Adding Extra Functionality

• Task Categories
• Task Filtering

Conclusion

08 - Advanced Options with WebStencils

Introduction
Expression Evaluation with @()

• What @() Can Do

@Scaffolding

• Practical Scaffolding Example

OnValue Event Handler

• Basic OnValue Example
• Advanced OnValue Scenarios
• OnValue vs AddVar

Authentication and Authorization
Conclusion

09 - Session Management and Authentication

Introduction
The Three Components

• TWebSessionManager
• TWebFormsAuthenticator
• TWebAuthorizer

Setting Up Authentication

• Component Configuration
• Implementing Credential Validation
• Creating a Login Form
• Creating a Logout Handler

The @session Object

• Session Properties
• Using @session in Templates

Authorization Zones

• Configuring Protected Areas
• Zone Types
• Multiple Roles

Session Configuration Options

• Session ID Storage
• Session Scope
• Session Timeout
• Shared Secret

Conclusion

10 - Database-Driven UI Generation

Introduction
How It Works
Security: The Whitelist System
Building Dynamic Forms
The @switch Operator and Field Types
Reusable Field Components
The Hybrid Approach (Often the best choice)
Conclusion

11 - Working with Modern CSS Frameworks

Introduction
The CSS-Agnostic Advantage
Framework Options (A few examples)

• Bootstrap
• Bulma
• PicoCSS
• BeerCSS
• DaisyUI
• Using These Frameworks

The Tailwind Special Case

• Understanding Tailwind's Approach
• The RAD Approach: Standalone CLI
• The Hybrid Development Workflow
• Configuring the Build Process
• Supporting Files

A Note on Framework Selection
Conclusion

12 - Deployment Options and Docker

Introduction
Understanding Your Options
Standalone Deployment

• How It Works
• Production Viability
• Deployment Process

FastCGI with NGINX (RAD Studio 13.0 and higher)

• NGINX Configuration

Traditional Web Server Integration

• The Statelessness Problem
• The Solution: External Session Storage
• Other Caveats to Keep in Mind
• A Note on Traditional CGI

Docker Deployment

• How to create a Docker image
• Making the production-ready Docker image
• The Automated Build Approach
• Prerequisites and Setup
• Complete Example Available

Production Considerations

• SSL/TLS Configuration
• Logging and Monitoring
• Environment-Specific Configuration

Conclusion

13 - Using RAD Server Integration with WebStencils

Introduction
Integrating WebStencils with RAD Server

• Using WebStencils Processors
• Using WebStencils Engine

Recreating the Tasks App to RAD Server

• Database Management
• Controller Arguments
• From Actions to Endpoints
• Processing Data on the Requests
• Handling Static JS, CSS and Images
• Frontend sources

14 - Resources and Further Learning

Documentation and Links

• Live WebStencils Demo
• Embarcadero Blog Posts
• Official HTMX Documentation (HTMX.org)
• RAD Server Technical Guide
• HTMX in an MVC Pattern (HTMX.org)
• WebStencils (DocWiki)

Extending HTMX Even Further

• AlpineJS
• Hyperscript

15 - Appendix: Acronyms and Abbreviations