{"id":29568658,"url":"https://github.com/putyourlightson/laravel-datastar","last_synced_at":"2025-07-19T01:06:44.937Z","repository":{"id":272299535,"uuid":"911306883","full_name":"putyourlightson/laravel-datastar","owner":"putyourlightson","description":"A reactive hypermedia framework for Laravel.","archived":false,"fork":false,"pushed_at":"2025-07-15T19:30:56.000Z","size":383,"stargazers_count":26,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-07-16T16:15:18.687Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/putyourlightson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"github":"bencroker"}},"created_at":"2025-01-02T17:54:59.000Z","updated_at":"2025-07-15T19:30:26.000Z","dependencies_parsed_at":"2025-01-13T15:32:07.012Z","dependency_job_id":"54d5a62f-7d13-4779-b93a-9d4421c1df21","html_url":"https://github.com/putyourlightson/laravel-datastar","commit_stats":null,"previous_names":["putyourlightson/laravel-datastar"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/putyourlightson/laravel-datastar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/putyourlightson%2Flaravel-datastar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/putyourlightson%2Flaravel-datastar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/putyourlightson%2Flaravel-datastar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/putyourlightson%2Flaravel-datastar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/putyourlightson","download_url":"https://codeload.github.com/putyourlightson/laravel-datastar/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/putyourlightson%2Flaravel-datastar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265866421,"owners_count":23840957,"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":"2025-07-19T01:06:42.727Z","updated_at":"2025-07-19T01:06:44.916Z","avatar_url":"https://github.com/putyourlightson.png","language":"PHP","funding_links":["https://github.com/sponsors/bencroker"],"categories":[],"sub_categories":[],"readme":"[![Stable Version](https://img.shields.io/packagist/v/putyourlightson/laravel-datastar?label=stable)]((https://packagist.org/packages/putyourlightson/laravel-datastar))\n[![Total Downloads](https://img.shields.io/packagist/dt/putyourlightson/laravel-datastar)](https://packagist.org/packages/putyourlightson/laravel-datastar)\n\n\u003cp align=\"center\"\u003e\u003cimg width=\"150\" src=\"https://putyourlightson.com/assets/logos/datastar.svg\"\u003e\u003c/p\u003e\n\n# Datastar Package for Laravel\n\n### A reactive hypermedia framework for Laravel.\n\n\u003e [!WARNING]\n\u003e Updating from the beta? View the [release notes](https://github.com/putyourlightson/laravel-datastar/blob/develop/CHANGELOG.md).\n\nThis package integrates the [Datastar hypermedia framework](https://data-star.dev/) with [Laravel](https://laravel.com/), allowing you to create reactive frontends driven by Blade views _or_ controllers. It aims to replace the need for front-end frameworks such as React, Vue.js and Alpine.js + htmx, and instead lets you manage state and use logic from your Laravel backend.\n\nUse-cases:\n\n- Live search and filtering\n- Loading more elements / Infinite scroll\n- Paginating, ordering and filtering lists\n- Submitting forms and running actions\n- Pretty much anything to do with reactive front-ends\n\n## License\n\nThis package is licensed for free under the MIT License.\n\n## Requirements\n\nThis package requires [Laravel](https://laravel.com/) 11.0.0 or later.\n\n## Installation\n\nInstall manually using composer, then run the `artisan vendor:publish --tag=public` command to publish the public assets.\n\n```shell\ncomposer require putyourlightson/laravel-datastar:^1.0.0-RC.1\n\nphp artisan vendor:publish --tag=public\n```\n\n## Overview\n\nThe Datastar package for Laravel allows you to handle backend requests by sending SSE events using [Blade directives](#blade-directives) in views _or_ [using controllers](#using-controllers). The former requires less setup and is more straightforward, while the latter provides more flexibility.\n\nHere’s a trivial example that toggles some backend state using the Blade view `datastar/toggle.blade.php` to handle the request.\n\n```html\n\u003cdiv data-signals-enabled=\"false\"\u003e\n    \u003cdiv data-text=\"$enabled ? 'ON' : 'OFF'\"\u003e\u003c/div\u003e\n    \u003cbutton data-on-click=\"{{ datastar()-\u003eget('datastar.toggle') }}\"\u003e\n        \u003cspan id=\"button-text\"\u003eEnable\u003c/span\u003e\n    \u003c/button\u003e\n\u003c/div\u003e\n```\n\n```php\n{{-- datastar/toggle.blade.php --}}\n\n@php\n    $enabled = $signals['enabled'] ?? false;\n@endphp\n\n@patchsignals(['enabled' =\u003e $enabled])\n\n@patchelements\n    \u003cspan id=\"button-text\"\u003e\n        {{ $enabled ? 'Disable' : 'Enable' }}\n    \u003c/span\u003e\n@endpatchelements\n```\n\n## Usage\n\nStart by reading the [Getting Started](https://data-star.dev/guide/getting_started) guide to learn how to use Datastar on the frontend. The Datastar package for Laravel only handles backend requests.\n\n\u003e [!NOTE]\n\u003e The Datastar [VSCode extension](https://marketplace.visualstudio.com/items?itemName=starfederation.datastar-vscode) and [IntelliJ plugin](https://plugins.jetbrains.com/plugin/26072-datastar-support) have autocomplete for all `data-*` attributes.\n\nWhen working with signals, note that you can convert a PHP array into a JSON object using the `json_encode` function.\n\n```php\n@php\n    $signals = ['foo' =\u003e 1, 'bar' =\u003e 2];\n@endphp\n\n\u003cdiv data-signals=\"{{ json_encode($signals) }}\"\u003e\u003c/div\u003e\n```\n\n### Datastar Helper\n\nThe `datastar()` helper function is available in Blade views and returns a `Datastar` helper that can be used to generate action requests to the Datastar controller. The Datastar controller renders a view containing one or [Blade directives](#blade-directives) that each send an SSE event. [Signals](#signals) are also sent as part of the request, and are made available in Datastar views using the `$signals` variable.\n\n#### `datastar()-\u003eget()`\n\nReturns a `@get()` action request to render a view at the given path. The value can be a file path _or_ a dot-separated path to a Blade view.\n\n```php\n{{ datastar()-\u003eget('path.to.view') }}\n```\n\nVariables can be passed into the view using a second argument. Any variables passed in will become available in the rendered view. Variables are tamper-proof yet visible in the source code in plain text, so you should avoid passing in any sensitive data.\n\n```php\n{{ datastar()-\u003eget('path.to.view', ['offset' =\u003e 10]) }}\n```\n\n#### `datastar()-\u003epost()`\n\nWorks the same as [`datastar()-\u003eget()`](#datastar-get) but returns a `@post()` action request to render a view at the given path. A CSRF token is automatically generated and sent along with the request.\n\n```php\n{{ datastar()-\u003epost('path.to.view') }}\n```\n\n#### `datastar()-\u003eput()`\n\nWorks the same as [`datastar()-\u003epost()`](#datastar-post) but returns a `@put()` action request.\n\n```php\n{{ datastar()-\u003eput('path.to.view') }}\n```\n\n#### `datastar()-\u003epatch()`\n\nWorks the same as [`datastar()-\u003epost()`](#datastar-post) but returns a `@patch()` action request.\n\n```php\n{{ datastar()-\u003epatch('path.to.view') }}\n```\n\n#### `datastar()-\u003edelete()`\n\nWorks the same as [`datastar()-\u003epost()`](#datastar-post) but returns a `@delete()` action request.\n\n```php\n{{ datastar()-\u003edelete('path.to.view') }}\n```\n\n```html\n\u003cdiv id=\"swap\"\u003eThe view should contain one or more elements to be patched.\u003c/div\u003e \n```\n\n### Blade Directives\n\n#### `@patchelements`\n\nPatches elements into the DOM.\n\n```php\n@patchelements\n    \u003cdiv id=\"new\"\u003eNew element\u003c/div\u003e\n@endpatchelements\n```\n\n#### `@removeelements`\n\nRemoves elements that match the provided selector from the DOM.\n\n```php\n@removeelements('#old')\n```\n\n#### `@patchsignals`\n\nPatches signals into the frontend.\n\n```php\n@patchsignals(['foo' =\u003e 1, 'bar' =\u003e 2])\n```\n\n#### `@executescript`\n\nExecutes JavaScript in the browser.\n\n```php\n@executescript\n    alert('Hello, world!');\n@endexecutescript\n```\n\n#### `@location`\n\nRedirects the browser by setting the location to the provided URI.\n\n```php\n@location('/guide')\n```\n\n### Using Controllers\n\nYou can send SSE events using your own controller _instead_ of the Datastar controller by using the `DatastarEventStream` trait. Return the `getStreamedResponse()` method, passing a callable into it that sends zero or more SSE events using methods provided.\n\n```php\n// routes/web.php\n\nuse App\\Http\\Controllers\\MyController;\n\nRoute::resource('/my-controller', MyController::class);\n```\n\n```php\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Routing\\Controller;\nuse Putyourlightson\\Datastar\\DatastarEventStream;\nuse Symfony\\Component\\HttpFoundation\\StreamedResponse;\n\nclass MyController extends Controller\n{\n    use DatastarEventStream;\n\n    public function index(): StreamedResponse\n    {\n        return $this-\u003egetStreamedResponse(function() {\n            $signals = $this-\u003ereadSignals();\n            $this-\u003epatchSignals(['enabled' =\u003e $signals['enabled'] ? false : true]);\n            $this-\u003epatchElements('\n                \u003cspan id=\"button-text\"\u003e' . ($signals['enabled'] ? 'Enable' : 'Disable') . '\u003c/span\u003e\n            ');\n        });\n    }\n}\n```\n\n### DatastarEventStream Trait\n\n#### `patchElements()`\n\nPatches elements into the DOM.\n\n```php\n$this-\u003epatchElements('\u003cdiv id=\"new-element\"\u003eNew element\u003c/div\u003e');\n```\n\n#### `removeElements()`\n\nRemoves elements that match the provided selector from the DOM.\n\n```php\n$this-\u003eremoveElements('#old-element');\n```\n\n#### `patchSignals()`\n\nPatches signals into the frontend.\n\n```php\n$this-\u003epatchSignals(['foo' =\u003e 1, 'bar' =\u003e 2]);\n```\n\n#### `executeScript()`\n\nExecutes JavaScript in the browser.\n\n```php\n$this-\u003eexecuteScript('alert(\"Hello, world!\")');\n```\n\n#### `location()`\n\nRedirects the browser by setting the location to the provided URI.\n\n```php\n$this-\u003elocation('/guide');\n```\n\n#### `renderDatastarView()`\n\nRenders a Datastar view.\n\n```php\n$this-\u003erenderDatastarView('datastar.toggle', ['enabled' =\u003e true]);\n```\n\n### Signals\n\nSignals can be accessed within views rendered by Datastar using the signals variable, which is an array of signals received by the request that is automatically injected into the template.\n\n```php\n@php\n    // Getting signal values.\n    $username = $signals['username'];\n@endphp\n```\n\n\u003e [!NOTE]\n\u003e Signal patches _cannot_ be wrapped in `@patchelements` directives, since each update creates a server-sent event which will conflict with the element’s contents.\n\n---\n\nCreated by [PutYourLightsOn](https://putyourlightson.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fputyourlightson%2Flaravel-datastar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fputyourlightson%2Flaravel-datastar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fputyourlightson%2Flaravel-datastar/lists"}