Welcome to HybridForms DevTools, your comprehensive toolkit for creating, managing, and deploying HybridForms templates with ease and efficiency.
Table of Contents
It is an opinionated code formatter for HybridForms template files. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Installation
Install through VS Code extensions. Search for HybridForms HybridForms DevTools.
Visual Studio Code Market Place: HybridForms HybridForms DevTools
Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install icomedias.hfdevtools-extension
To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.
{
"[html]": {
"editor.defaultFormatter": "icomedias.hfdevtools-extension"
}
}
Snippets
HTML and JavaScript/TypeScript snippets for HybridForms template developemnt.
All code snippets are based on and follow the official TemplateReferenceGuide and JavaScriptGuidance
Usage
All snippets starts with "hf-". Type part of a snippet, press enter, and the snippet unfolds.
hf-combobox
hf-js
Pro Tip
You don't need to type any dashes: "hfcustomcontrol" -> "hf-customcontrol" snippet
HTML Snippets
Block Snippets
| Snippet |
Description |
| hf-block |
Creates an empty block container |
| hf-condition |
Creates a block, area, tab, condition definition |
| hf-pagetemplate |
Creates a Page template |
| hf-tabtemplate |
Creates a Tab template |
| hf-tabcaption |
Creates Tab caption attributes |
| hf-blockcaption |
Creates Block caption attributes |
| hf-fullwidth-block |
Creates a FullWidth block definition |
| hf-headertitletemplate |
Creates a HeaderTitleTemplate element |
| hf-titletemplate |
Creates a TitleTemplate element |
| hf-listtemplate |
Creates a ListTemplate element |
| hf-observefield |
Creates a ObserveField element |
| hf-dateformater |
Creates a DateFormater element |
| hf-textcontent |
Creates a text content element |
| hf-initializer |
Creates initializer form variable |
| Snippet |
Description |
| hf-buttoncontrol |
Creates a ButtonControl |
| hf-checkbox |
Creates a Checkbox |
| hf-combobox |
Creates a Combobox input field |
| hf-datacontrol |
Creates a DataControl field |
| hf-datepicker |
Creates a Datepicker input field |
| hf-drawingcontrol |
Creates a Drawingcontrol input field |
| hf-dropdownlist |
Creates a DropDownList input field |
| hf-htmlcontainer |
Creates a HtmlContainer input element |
| hf-inkcontrol |
Creates a Inkcontrol input field |
| hf-label |
Creates a Label |
| hf-mailbutton |
Creates a Mail Button |
| hf-mapbutton |
Creates a Map Button |
| hf-numericfield |
Creates a NumericField input field |
| hf-phonebutton |
Creates a Phone Button |
| hf-picturepicker |
Creates a Picture Picker |
| hf-radiobox |
Creates a RadioBox input field |
| hf-reversegeolocatorbutton |
Creates a Reverse Geolocator Button |
| hf-selectbox |
Creates a Selectbox |
| hf-signature |
Creates a Signature input field |
| hf-textfield |
Creates a Text input field |
| hf-textfield-tel |
Creates a Tel number input field |
| hf-textarea |
Creates a textarea |
| hf-timepicker |
Creates a Time Picker input field |
| hf-treeview |
Creates a TreeView |
| hf-webview |
Creates a Webview |
Attribute Snippets
| Snippet |
Description |
| hf-title-attr |
Creates a data-hf-title attribute |
| hf-condition-attr |
Creates a data-hf-condition attribute |
Stages Snippets
| Snippet |
Description |
| hf-condition-workflow |
Creates a condition workflow |
| hf-copypdf-workflow |
Creates a copy pdf workflow |
| hf-email-workflow |
Creates an email workflow |
| hf-setowner-workflow |
Creates a set owner workflow |
| hf-setstatus-workflow |
Creates a set status workflow |
| hf-setgroup-workflow |
Creates a set group workflow |
| hf-setfield-workflow |
Creates a set field workflow |
| hf-stagechange-workflow |
Creates a stage change workflow |
TypeScript Snippets
| Snippet |
Description |
| hf-ts |
Custom TypeScript starting point |
| hf-customcontrol |
JavaScript derived Custom Control |
| hf-onchange |
JavaScript onChange event handler |
| hf-set |
Get and set values |
| hf-ctrl |
Get a control |
| hf-field |
Get a field |
| hf-repeating |
Get post fix of a repeating unit |
| hf-user |
Get current display name of user and write it to control by given id |
| hf-signer |
Add field values to Signature by given comma serperated ids |
| hf-counter |
Add Counter request template |
JavaScript Snippets
| Snippet |
Description |
| hf-js |
Custom Javascript starting point |
| hf-customcontrol |
JavaScript derived Custom Control |
| hf-onchange |
JavaScript onChange event handler |
| hf-set |
Get and set values |
| hf-ctrl |
Get a control |
| hf-field |
Get a field |
| hf-repeating |
Get post fix of a repeating unit |
Extended Snippets
These snippets must be executed in all specified file types in order to obtain all the necessary code parts and the desired functionality!
| Snippet |
File Types |
Description |
| hf-repeatinginput |
HTML, SCSS, TS |
Add RepeatingInput to project |
| hf-initializr |
HTML, TS |
Add Initializr block to file |
Commit Messages
Two buttons in the Source Control view title bar generate a commit message and fill the commit box. They are hidden until you set hybridforms.commitMessage.enabled to true.
The sparkle icon runs HybridForms: Generate Commit Message. It describes your staged changes. If nothing is staged, it describes all uncommitted changes instead, including the content of untracked files, which no diff covers. Binary files and files past the size limit are named without their content. If the commit box already has text in it, that text is kept and sent to the model as a hint about what you want the message to say. The result is a Conventional Commits message.
The issues icon runs HybridForms: Generate Commit Message from Jira Ticket. See Generating from a Jira ticket below.
Both commands also show up in the command palette under the "HybridForms" category, together with HybridForms: Set AI API Key, HybridForms: Clear AI API Key, HybridForms: Set Jira API Token, and HybridForms: Clear Jira API Token.
Both buttons show a cancellable progress notification while the request runs. Cancelling stops the request. If generation fails, you get a short error message; details go to the "HybridForms DevTools" output channel.
Providers
Set hybridforms.commitMessage.provider to choose the backend:
openrouter (default): uses OpenRouter. Needs the key stored by HybridForms: Set AI API Key. Ignores baseUrl. Leave model empty to use openai/gpt-5.6-luna.custom: any OpenAI-compatible endpoint. Needs a stored key, plus baseUrl and model. All three are required.claude: the local Claude Code CLI. Needs claude on your PATH and a Claude Code login. Needs no API key. Leave model empty to use the Claude Code default.
With openrouter or custom, the staged diff (and, in Jira mode, the ticket title and description) is sent to that endpoint. The claude provider keeps everything on your local Claude Code login and sends nothing to OpenRouter or a custom endpoint.
OpenAI-compatible requests are sent with the max_completion_tokens parameter, OpenRouter included. OpenRouter and vLLM accept it. Some self-hosted OpenAI-compatible servers, Ollama among them, may ignore it and apply their own default output limit instead.
Storing the AI key
Run HybridForms: Set AI API Key to store the key for openrouter or custom in VS Code's secret store. Run HybridForms: Clear AI API Key to remove it. The key never appears in settings.json and is not part of settings sync.
Generating from a Jira ticket
The Jira button asks for a ticket key. It prefills the field from the current branch name when the branch contains one. A bare number, such as 10222, gets the hybridforms.commitMessage.jira.defaultProject prefix applied, turning it into HFF-10222.
The extension reads the ticket's title and description from Jira, then writes a commit message headed HFF-10222 <ticket title>, optionally followed by a body.
Jira access needs two things: your Jira account email in the hybridforms.commitMessage.jira.user setting, and an API token stored by HybridForms: Set Jira API Token. Only the token is a secret; the email is a normal setting. If either is missing when you run the command, it offers to set it for you instead of failing.
The /jira-wf line
When generating from a Jira ticket with hybridforms.commitMessage.jiraWf.enabled turned on, the model also decides whether the commit warrants any of the flags --ai, --changelog, or -t yes|no, and appends a trailing line such as /jira-wf -t yes --changelog --ai. It never sets -q, -f, or -c.
The jira-wf commit-msg hook strips that line from the commit message and queues it; the pre-push hook applies it. The line is off by default. Set hybridforms.commitMessage.jiraWf.enabled to true to append it.
The co-author trailer
Set hybridforms.commitMessage.coAuthor.enabled to true to append a Co-Authored-By trailer to every generated message, marking the commit as AI assisted. The text comes from hybridforms.commitMessage.coAuthor.trailer and defaults to the Claude trailer, so change it when you use another provider. Set hybridforms.commitMessage.coAuthor.mode to auto to let the model decide instead: it judges the change and the trailer is only added when the model is confident the change was AI generated, for example because your hint in the commit box says so. In ticket based messages the trailer is placed in front of the /jira-wf line, which keeps that line last for the hook and leaves the trailer as the final block once the hook has stripped it.
Settings
| Setting |
Default |
Description |
hybridforms.commitMessage.enabled |
false |
Show the AI commit message buttons in the Source Control view title bar. |
hybridforms.commitMessage.provider |
openrouter |
Which AI backend generates commit messages. Enum: openrouter, custom, claude. |
hybridforms.commitMessage.model |
(empty) |
Model id. Empty means openai/gpt-5.6-luna on OpenRouter and the Claude Code default for the claude provider. Required for the custom provider. |
hybridforms.commitMessage.baseUrl |
(empty) |
OpenAI-compatible base URL, for example https://llm.internal/v1. Read only by the custom provider. |
hybridforms.commitMessage.maxDiffLength |
100000 |
How many characters of the change set are sent to the model. The diff is truncated to fit first, then the content of untracked files is read into whatever is left. |
hybridforms.commitMessage.jiraWf.enabled |
false |
Append a /jira-wf flag line to ticket based commit messages so the jira-wf git hooks pick it up. |
hybridforms.commitMessage.coAuthor.enabled |
false |
Append an AI co-author trailer to generated commit messages. |
hybridforms.commitMessage.coAuthor.mode |
always |
always appends the trailer to every generated message. auto appends it only when the model is confident the change was AI generated. |
hybridforms.commitMessage.coAuthor.trailer |
Co-Authored-By: Claude <noreply@anthropic.com> |
The trailer line appended when coAuthor.enabled is on. Use the git trailer form Co-Authored-By: Name <email> and adjust it to match your provider. |
hybridforms.commitMessage.jira.baseUrl |
https://www.atlassian.com |
Jira Cloud base URL. |
hybridforms.commitMessage.jira.user |
(empty) |
Your Jira account email. The matching API token is stored as a secret, never here. |
hybridforms.commitMessage.jira.defaultProject |
HFF |
Project key used when you type only a ticket number. |
Contribute
PRs accepted.
If editing the Readme, please conform to the
standard-readme specification.
License
MIT License © 2023 icomedias GmbH.
