Fine-Tuning on HTMX: Making Web Development Faster with AI

March 12, 2024
by Vadim Smirnov, Katia Bystrakova

HTMX is a library that communicates to the backend without requiring JavaScript code. It makes Front-end development easier, and can empower it with AI auto-completions.

Coding assistants may be dumb with specialized stacks like HTMX, but not You can educate (=fine-tune) it on the stack you need to receive tailored AI code suggestions.

Let’s do it and see how to complete HTML projects faster!

Go Self-Hosted

Fine-tuning is available in Self-hosted and Enterprise versions. This ensures your code’s security as data never leaves your server.

To set up your own server:

docker run -d --rm --gpus all --shm-size=256m -p 8008:8008 -v refact-perm-storage:/perm_storage smallcloud/refact_self_hosting:latest

Create Your Fine-tuned model

Create HTML project with HTMX and AI completions

We’ll create a simple HTML structure using an AI tool for front-end coding:


HTMX’s hx-get handles data fetching, no Java Script code required. The hx-target specifies which HTML element we will use as an output target.

    class="bg-red-500 text-white py-2 px-4 rounded-lg"
    Get Todos

Now, let’s complete our HTML code using! After fine-tuning, the model becomes familiar with the HTMX stack, and offers accurate AI suggestions to simply accept. Less manual efforts, more action! See how fine-tuning makes your coding faster:

Time spent:

Without — 3:26 minutes
With — 2:42 minutes
With + LLM fine-tuning — 1:20 minutes

Fine-tuning helps to complete the coding task twice faster!

Overall, it’s a fantastic boost in productivity!

For assistance in setting up your on-prem instance, join our Discord community.