Maximizing Productivity: PyCharm and htmx Integration

TL;DR Learn how to add support for htmx in PyCharm for seamless development using web-types.

If you're not familiar with htmx, check out this fantastic htmx + Django introduction by BugBytes.

Introduction

htmx is my go-to frontend tool for building web applications, and PyCharm from JetBrains is my daily code editor/IDE. Unfortunately, by default, PyCharm doesn't recognize htmx attributes when used in templates, resulting in ugly warning lines 🙁. This article will guide you on how to resolve this issue and improve your development workflow.

The Fix

There's a simple way to add autocompletion and documentation for htmx attributes in JetBrains editors using web-types. Web-types is a JSON-based format that provides IDEs with metadata information about web component libraries like htmx. I stumbled upon this tip via this tweet, so kudos to the author for sharing it!

Step-by-Step Guide

• Create a package.json File

  Start by creating a package.json file, the central configuration file for Node.js-based applications. Although we're not building a Node.js package, this is the method to reference web-types in your PyCharm project. Ensure you have Node.js installed on your computer. If not, I recommend using nvm to install it. After installing Node.js, you can use npm (included with all Node.js installations) to initialize a Node.js project and generate the package.json file.

   npm init -y
  

• Create htmx.web-types.json File

  Create a new file named htmx.web-types.json and copy the htmx web-types source into it:

   touch htmx.web-types.json
  

• Update package.json

  Add a new entry to your package.json with "web-types" as the key and the path to your htmx.web-types.json file as the value. Here's an example:

   {
     "web-types": "./htmx.web-types.json"
   }
  

• Enjoy Autocompletion and Documentation

  Now, in your HTML templates, type an htmx attribute like hx-get, and you should see autocompletion and documentation directly accessible in your IDE. Cool, right? 😎

Conclusion

With this simple setup, you can enhance your PyCharm experience and work seamlessly with htmx attributes in your Django projects. Happy coding!