{"id":19774750,"url":"https://github.com/bigskysoftware/htmx-extensions","last_synced_at":"2025-04-30T18:33:47.892Z","repository":{"id":213584999,"uuid":"731717965","full_name":"bigskysoftware/htmx-extensions","owner":"bigskysoftware","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-12T18:54:00.000Z","size":19126,"stargazers_count":34,"open_issues_count":4,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-14T20:21:17.824Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigskysoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-12-14T17:59:24.000Z","updated_at":"2024-04-24T23:26:37.848Z","dependencies_parsed_at":"2023-12-21T20:18:21.364Z","dependency_job_id":"33d7587d-f593-4122-96c9-1b9854e655e1","html_url":"https://github.com/bigskysoftware/htmx-extensions","commit_stats":null,"previous_names":["bigskysoftware/htmx-extensions"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigskysoftware%2Fhtmx-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigskysoftware%2Fhtmx-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigskysoftware%2Fhtmx-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigskysoftware%2Fhtmx-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigskysoftware","download_url":"https://codeload.github.com/bigskysoftware/htmx-extensions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224219441,"owners_count":17275477,"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":[],"created_at":"2024-11-12T05:13:47.695Z","updated_at":"2025-04-30T18:33:47.886Z","avatar_url":"https://github.com/bigskysoftware.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# htmx Extensions\n\n[htmx](https://htmx.org) provides an extension mechanism for defining and using extensions within htmx-based applications.\nA list of extensions can be found at \u003chttps://htmx.org/extensions\u003e.  If you wish to contribute an extension to that\nlist, open a PR request against \u003chttps://github.com/bigskysoftware/htmx/blob/master/www/content/extensions/_index.md\u003e,\nor check out our [contribution guidelines](CONTRIBUTING.md) for contributions to existing extensions.\n\n## Using Extensions\n\nUsing an extension involves two steps:\n\n* include the extension definition, which will add it to the `htmx` extension registry\n* reference the extension via the [hx-ext](https://htmx.org/attributes/hx-ext/) attribute\n\nHere is an example\n\n```html\n  \u003cscript src=\"/path/to/ext/debug.js\" defer\u003e\u003c/script\u003e\n  \u003cbutton hx-post=\"/example\" hx-ext=\"debug\"\u003eThis Button Uses The Debug Extension\u003c/button\u003e\n```\n\nThis loads the debug extension and then adds the debug extension to the given button.  (This\nwill print out extensive logging for the button, for debugging purposes.)\n\nNote that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire part of the DOM,\nand on the `body` tag for it to apply to all htmx requests.\n\n**Tip:** To use multiple extensions on one element, separate them with a comma:\n\n```html\n  \u003cbutton hx-post=\"/example\" hx-ext=\"debug, json-enc\"\u003eThis Button Uses Two Extensions\u003c/button\u003e\n```\n\n## Ignoring Extensions\n\nBy default, extensions are applied to the DOM node where it is invoked, along with all child elements inside of that parent node.\nIf you need to disable an extension somewhere within the DOM tree, you can use the `ignore:` keyword to stop it from being used.\n\n```html\n\u003cdiv hx-ext=\"debug\"\u003e\n  \u003cbutton hx-post=\"/example\"\u003eThis button used the debug extension\u003c/button\u003e\n  \u003cbutton hx-post=\"/example\" hx-ext=\"ignore:debug\"\u003eThis button does not\u003c/button\u003e\n\u003c/div\u003e\n```\n\n## Defining an Extension\n\nTo define an extension you call the `htmx.defineExtension()` function:\n\n```html\n\u003cscript\u003e\n    (function(){\n        htmx.defineExtension('my-ext', {\n            onEvent : function(name, evt) {\n                console.log(\"Fired event: \" + name, evt);\n            }\n        })\n    })()\n\u003c/script\u003e\n```\n\nTypically, this is done in a stand-alone javascript file, rather than in an inline `script` tag.\n\nExtensions should have names that are dash separated and that are reasonably short and descriptive.\n\nExtensions can override the following default extension points to add or change functionality:\n\n```javascript\n{\n  init: function(api) { return null },\n  getSelectors: function() { return null },\n  onEvent: function(name, evt) { return true },\n  transformResponse: function(text, xhr, elt) { return text },\n  isInlineSwap: function(swapStyle) { return false },\n  handleSwap: function(swapStyle, target, fragment, settleInfo) { return false },\n  encodeParameters: function(xhr, parameters, elt) { return null }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigskysoftware%2Fhtmx-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigskysoftware%2Fhtmx-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigskysoftware%2Fhtmx-extensions/lists"}