https://github.com/numasi/htmx-jsx-template
HTMX extension for rendering (precompiled) JSX templates for a JSON response
https://github.com/numasi/htmx-jsx-template
bun htmx htmx-extension htmx-template jsx jsx-templates kitajs
Last synced: about 2 months ago
JSON representation
HTMX extension for rendering (precompiled) JSX templates for a JSON response
- Host: GitHub
- URL: https://github.com/numasi/htmx-jsx-template
- Owner: numasi
- License: gpl-3.0
- Created: 2025-05-15T17:14:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-24T21:25:31.000Z (about 1 year ago)
- Last Synced: 2026-04-30T11:36:42.169Z (about 2 months ago)
- Topics: bun, htmx, htmx-extension, htmx-template, jsx, jsx-templates, kitajs
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### HTMX extension for rendering (preprocessed) JSX templates from JSON responses
## Use
First you need your JSX components transpiled and bundled at `dist/templates.js`. Check out my example repo on how to get it done [here](https://github.com/numasi/htmx-jsx-json-example/)
Using it by side with [htmx-json-attribute](htps://github.com/numasi/htmx-json-attribute), one can do this:
```
```
## How it works
It depends on JSX components transpiled with kita-js HTML string generation funcition in place of React's classic createElement. The extension looks for this bundle at file `dist/template.js`, importing all the components from there upon initaliazation, and serve them upon a response by matching component function name to `hx-template` attribute (defined by the extension), passing the parsed JSON response as parameter.
## TODO
- Option to change template directory
- More build options (using ESBuild for auto-aggregation)
- Experimenting with on-the-fly (client-side) transpile
- Dynamic template imports (on need)
- Error handling
- Tests