{"id":29024482,"url":"https://github.com/numasi/htmx-jsx-json-example","last_synced_at":"2026-04-12T10:38:42.778Z","repository":{"id":293558526,"uuid":"984423937","full_name":"numasi/htmx-jsx-json-example","owner":"numasi","description":"Example repo for HTMX extensions: json-attribute \u0026 jsx-template","archived":false,"fork":false,"pushed_at":"2025-05-24T21:14:28.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-24T22:35:02.116Z","etag":null,"topics":["bun","htmx","javascript","json","jsx","templating"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/numasi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-15T23:03:06.000Z","updated_at":"2025-05-24T21:14:32.000Z","dependencies_parsed_at":"2025-05-16T00:32:46.531Z","dependency_job_id":null,"html_url":"https://github.com/numasi/htmx-jsx-json-example","commit_stats":null,"previous_names":["numasi/htmx-jsx-json-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/numasi/htmx-jsx-json-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numasi%2Fhtmx-jsx-json-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numasi%2Fhtmx-jsx-json-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numasi%2Fhtmx-jsx-json-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numasi%2Fhtmx-jsx-json-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/numasi","download_url":"https://codeload.github.com/numasi/htmx-jsx-json-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numasi%2Fhtmx-jsx-json-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261997401,"owners_count":23242250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bun","htmx","javascript","json","jsx","templating"],"created_at":"2025-06-26T04:01:59.870Z","updated_at":"2025-12-30T22:23:48.091Z","avatar_url":"https://github.com/numasi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Example repo for HTMX extensions: json-attribute \u0026 jsx-template\n\nExtension json-attribute can be used as is, jsx-template however requires a building step, as it looks for a single transpiled and bundled JS file made out of the JSX templates being used. Location for this file is currently hardcoded as `dist/templates.js`. This repo contains a possible build setup for generating this bundle, and a live example for both of the extensions. \n\nFor the stand-alone extensions themselves check out the corresponding repos:\n- [htmx-json-attribute](https://github.com/numasi/htmx-json-attribute)\n- [htmx-jsx-template](https://github.com/numasi/htmx-jsx-template)\n\n## Requirements\n\n- Docker\n\n## What it does\n\nShowing off HTMX capacity for sending a JSON request defined at markup level to a JSON based API and rendering the response (also JSON) using a JSX template.\n\n## Structure\n- script/build.ts \u003c- Build script incorporating Bun's build capabilities for generating client code from JSX sources\n- templates/BlogEntries.jsx \u003c- Example JSX source\n- templates/templates.js \u003c- Build entrypoint exporting all the possible JSX sources that will be needed on client side\n- dist/templates.js \u003c- Build output to be consumed by client code (jsx-template extension in this case)\n- example.html \u003c- The example site fetching a JSON-RPC API from a public [Hive](https://hive.blog/) node\n- json-attribute.js, jsx-template.js \u003c- HTMX extensions being used on the client\n- tsconfig.json \u003c- For instructing Bun's bundler, mainly to employ and bundle [kita-js](https://github.com/kitajs/html) direct HTML string generation for JSX code (to use in place of React's createElement).\n- packages.json \u003c- Dev packages needed for bundling \u0026 serving\n- docker-compose.yml \u003c- For nice and easy dev environment\n\n## Use\n\nWe use the all-in-one [Bun JS](https://bun.sh/) environment for JSX transpilation and bundling, and to run a minimal dev server to  work around CORS difficulties. You can get it up and running with a docker container defined in the docker-compose.yml included.\n\nFire up the container in the background first:\n`docker compose up -d`\n\nNow start the build script from the container:\n```\ndocker compose exec htmx-example bash\nbun scripts/build.ts\n```\n\nFinally, from another console, launch the dev server:\n```\ndocker compose exec htmx-example bash\nbunx nano-server\n```\n\nExample site can be reached, by default at `localhost:5000`\n\n## Tech\n\n- [HTMX](https://htmx.org/)\n- [kita-js](https://github.com/kitajs/html)\n- [Bun](https://bun.sh/)\n- [Docker](https://www.docker.com)\n- [Typescript](https://www.typescriptlang.org/) (under the hood)\n- [React JSX](https://react.dev/learn/writing-markup-with-jsx)\n- [Hive blockchain](https://hive.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumasi%2Fhtmx-jsx-json-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnumasi%2Fhtmx-jsx-json-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumasi%2Fhtmx-jsx-json-example/lists"}