{"id":13531682,"url":"https://github.com/hankhank10/alpine-fetch","last_synced_at":"2025-12-30T13:39:01.543Z","repository":{"id":39028213,"uuid":"506809544","full_name":"hankhank10/alpine-fetch","owner":"hankhank10","description":"Straightforward interactive HTTP requests from within your Alpine.JS markup","archived":false,"fork":false,"pushed_at":"2023-09-24T10:13:01.000Z","size":93,"stargazers_count":80,"open_issues_count":4,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-24T03:39:14.554Z","etag":null,"topics":["alpinejs"],"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/hankhank10.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2022-06-23T22:31:40.000Z","updated_at":"2025-03-11T20:29:08.000Z","dependencies_parsed_at":"2024-01-14T02:01:14.506Z","dependency_job_id":"37dd737d-f523-452b-b269-e53eb34fdfdc","html_url":"https://github.com/hankhank10/alpine-fetch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankhank10%2Falpine-fetch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankhank10%2Falpine-fetch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankhank10%2Falpine-fetch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankhank10%2Falpine-fetch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hankhank10","download_url":"https://codeload.github.com/hankhank10/alpine-fetch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246700752,"owners_count":20819928,"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":["alpinejs"],"created_at":"2024-08-01T07:01:04.827Z","updated_at":"2025-12-30T13:39:01.484Z","avatar_url":"https://github.com/hankhank10.png","language":"JavaScript","funding_links":[],"categories":["Extensions \u0026 Plugins"],"sub_categories":[],"readme":"# Alpine Fetch\n\n![GitHub file size in bytes](https://img.shields.io/github/size/hankhank10/alpine-fetch/alpine-fetch.js)\n\nStraightforward interactive HTTP requests from within your [Alpine.JS](https://alpinejs.dev/) markup.\n\n[View the live demo here](https://hankhank10.github.io/alpine-fetch/)\n\n## What does this do?\n\nAlpine.JS is a rugged, minimal tool for composing behavior directly in your markup. It can be used, even by those with little experience in Javascript, to add interactivity to web pages.\n\nAlpine Fetch is a magic helper for Alpine.JS which makes it easy to do HTTP requests within markup.\n\n### Native Alpine approach to HTTP requests\n\nOne area where Alpine does require you to go outside markup is when making HTTP requests to dynamically populate parts of the page.\n\nSomeone looking to make a call on an API endpoint, might need to do something like the following:\n\n````html\n\u003cdiv x-data=\"{\n        result: null,\n        async retrieveData() { \n            this.result = await (await fetch('/endpoint')).text(); \n        }\n     }\" \n     x-init=\"retrieveData()\"\n\u003e\n     \u003cspan x-text=\"result\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n````\n\n... which is quite verbose, and involves promises which are not straightforward for beginners.\n\n### Alpine Fetch\n\nAlpine Fetch adds magic functions to abstract a lot of this away and makes it much more straightforward to populate your page via HTTP requests. The above example using Alpine Fetch would be:\n\n````html\n\u003cdiv x-data\u003e\n    \u003cspan x-text=\"await $fetch('/endpoint)\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n````\n\nAlpine Fetch can fetch simple text from the server using the `$fetch` method or it can fetch and parse JSON using the `$fetchjson` method.\n\nIt supports all HTTP methods such as `GET` and `POST` and `PUT`.\n\nIt has no dependencies other than Alpine.\n\n## Installation\nInclude the following `\u003cscript\u003e` tag in the `\u003chead\u003e` of your document, **before** Alpine:\n\n```html\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/hankhank10/alpine-fetch@main/alpine-fetch.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nAt its most basic `$fetch` accepts a URL and returns the contents of that URL.\n\nUnlike the generic Javascript `fetch` method which requires dealing with promises, this simply waits for the response to be received and then returns it.\n\n`$fetch` should be preceded by `await` to ensure that this happens.\n\n### String to x-text\n\nThe most basic example is to fetch a string from the server and populate it in your markup via the `x-text` method of alpine.\n\n```html\n\u003cdiv x-data\u003e\n    \u003cspan x-text=\"await $fetch('https://expensive-crow-sarong.cyclic.cloud/hello_world')\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n### HTML to x-html\n\nThe `$fetch` helper can be used anywhere, so if you don't want to render it as text you can pass it to the `x-html` method of Alpine - or to a class, or any other part of the markup. It behaves like any other variable.\n\n```html\n\u003cdiv x-data\u003e\n    \u003cspan x-html=\"await $fetch('https://expensive-crow-sarong.cyclic.cloud/hello_world_html')\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n### Retrieving once, using multiple times\n\nYou might want to use the same data in multiple places in your markup. In that case, it would make sense to just fetch it once and use it multiple times. You can do this by retrieving it into the `x-data` tag like any other variable.\n\n```html\n\u003cdiv x-data=\"{ hello_world: await $fetch('https://expensive-crow-sarong.cyclic.cloud/hello_world' }\"\u003e\n    \u003cspan x-text=\"hello_world\"\u003e\u003c/span\u003e\n    \u003cspan x-text=\"hello_world\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n### Retrieving JSON\n\n`$fetch` retrieves data which it expects to be text, but you can also use `$fetchjson` to retrieve data which is JSON and then render the relevant part of that into your page.\n\n```html\n\u003cdiv x-data\u003e\n    \u003cspan x-text=\"await $fetchjson('https://expensive-crow-sarong.cyclic.cloud/some_json', jsonItem='weather')\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n### Specifying a method\n\n`$fetch` and `$fetchjson` assume that you want to use a `GET` method but you can specify that you want to send another.\n\n````html\n\u003cspan x-text=\"await $fetch('/post_url', method='POST')\"\u003e\u003c/span\u003e\n\u003cspan x-text=\"await $fetch('/delete_url', method='DELETE')\"\u003e\u003c/span\u003e\n````\n\n### Responding to actions\n\nIf you specify a DOM element or a variable to be equal to `$fetch` or `$fetchjson` then the methods will automatically fetch on init.\n\nHowever you can also customise when they do the fetch however you like. In the below example, it will fetch only when the user clicks the button.\n\n````html\n\u003cdiv x-data=\"{ weather: 'uncertain at this stage' }\"\u003e\n\n    The weather is \u003cspan x-text=\"weather\"\u003e\u003c/span\u003e\n    \n    \u003cbutton\n            x-on:click=\"weather = await $fetchjson('https://expensive-crow-sarong.cyclic.cloud/some_json', jsonItem='weather')\"\n    \u003eClick me to change the weather\u003c/button\u003e\n\n\u003c/div\u003e\n````\n\n### Examples\n\nYou can view all of these examples in the `docs/index.html` file in this repo, or view a live hosted demo [here](https://hankhank10.github.io/alpine-fetch/examples/examples.html).\n\n## Contributing\n\nI very much welcome comments, suggestions and contributions.\n\nIf you notice issues please open an issue on Github.\n\nIf you have improvements or suggestions please submit a pull request.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhankhank10%2Falpine-fetch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhankhank10%2Falpine-fetch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhankhank10%2Falpine-fetch/lists"}