{"id":25899046,"url":"https://github.com/ampmonteiro/symfony7_1-live-components","last_synced_at":"2026-06-10T10:31:07.871Z","repository":{"id":280168290,"uuid":"941175352","full_name":"ampmonteiro/symfony7_1-live-components","owner":"ampmonteiro","description":"Examples of Symfony Live components builds on top of the TwigComponent library to give you the power to automatically update your Twig components on the frontend as the user interacts with them.  Similar to laravel livewire ","archived":false,"fork":false,"pushed_at":"2025-03-01T17:21:27.000Z","size":75,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T18:27:46.324Z","etag":null,"topics":["ajax","php83","stimulusjs","symfony-assetmapper","symfony7","twig","twig-components","ux-twig-component"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":false,"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/ampmonteiro.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,"publiccode":null,"codemeta":null}},"created_at":"2025-03-01T17:08:02.000Z","updated_at":"2025-03-01T17:26:45.000Z","dependencies_parsed_at":"2025-03-01T18:28:08.904Z","dependency_job_id":"cba669f6-d94f-40cf-aa94-e9db9f9ee7ce","html_url":"https://github.com/ampmonteiro/symfony7_1-live-components","commit_stats":null,"previous_names":["ampmonteiro/symfony7_1-live-components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ampmonteiro/symfony7_1-live-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ampmonteiro%2Fsymfony7_1-live-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ampmonteiro%2Fsymfony7_1-live-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ampmonteiro%2Fsymfony7_1-live-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ampmonteiro%2Fsymfony7_1-live-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ampmonteiro","download_url":"https://codeload.github.com/ampmonteiro/symfony7_1-live-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ampmonteiro%2Fsymfony7_1-live-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34149132,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["ajax","php83","stimulusjs","symfony-assetmapper","symfony7","twig","twig-components","ux-twig-component"],"created_at":"2025-03-03T01:19:51.837Z","updated_at":"2026-06-10T10:31:07.846Z","avatar_url":"https://github.com/ampmonteiro.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Symfony App with Live components ( twig + Stimulus )\n\n### Date creation:\n\n2024-10\n\n### Tech\n\n- PHP 8.3\n\n- Symfony 7.1\n\n- Symfony AssetMapper ( Simple, Modern CSS \u0026 JS Management )\n\n- Twig template engine\n\n- Twig base component  ( ux-twig-component )\n\n- Stimulus js ( for live components with twig)\n\n- Apache web server ( with Docker)\n\n\n### About\n\nthis project show:\n\n\u003eLive components builds on top of the TwigComponent library to give you the power to automatically update your Twig components on the frontend as the user interacts with them. \nInspired by Livewire and Phoenix LiveView.\n\n -- [Symfony Docs](https://symfony.com/bundles/ux-live-component/current/index.html)\n\n \nExamples in this project:\n\n- Counter\n\n- Live search \n\n- Markdown preview\n\n- Simple form\n\n- Validation form\n\n### image:\n![Symfony Live components examples](image.png)\n\n## install as micro framework\n\n```bash\ncomposer create-project symfony/skeleton:\"7.1.*\" my_project_directory\n```\n\nor on current dir / folder\n\n```bash\ncomposer create-project symfony/skeleton:\"7.1.*\"  ./\n```\n\n## if your are using Apache server\n\n```bash\ncomposer require symfony/apache-pack\n```\n\nthis install / copy .htaccess config file\n\n\n## install cli code generator: Make\n\n```bash\ncomposer require --dev symfony/maker-bundle\n```\n\nas recipe, alias - `generator`, `make`, `maker`, `maker-bundle`, `makerbundle`\n\n```bash\ncomposer require make\n```\n\nlist of others recipes:\n\n[Flex recipes](https://github.com/symfony/recipes/blob/flex/main/RECIPES.md)\n\n\n## installing template engine: Twig\n\n```bash\ncomposer require symfony/twig-bundle\n```\n\nas recipe, alias - `twig-bundle`, `twigbundle`\n\n```bash\ncomposer require twig-bundle\n```\n\n## The Web Debug Toolbar (optional)\n\n![alt text](toolbar.png)\n\n```bash\ncomposer reqire symfony/profiler-pack\n```\n\nas recipe, alias - `web-profiler-bundle`, `webprofilerbundle`\n\n```bash\ncomposer require webprofilerbundle\n```\n\n## Asset Mapper\n\n\u003e The AssetMapper component lets you write modern JavaScript and CSS without the complexity of using a bundler. Browsers already support many modern JavaScript features like the import statement and ES6 classes. And the HTTP/2 protocol means that combining your assets to reduce HTTP connections is no longer urgent. This component is a light layer that helps serve your files directly to the browser.\n\n-- [Symfony Docs](https://symfony.com/doc/current/frontend/asset_mapper.html)\n\n\n```bash\ncomposer require symfony/asset-mapper symfony/asset symfony/twig-pack\n```\n\n## Symfony components\n\n\u003e Twig components give you the power to bind an object to a template, making it easier to render and re-use small template \"units\" - like an \"alert\", markup for a modal, or a category sidebar\n\n-- [Symfony docs](https://symfony.com/bundles/ux-twig-component/current/index.html)\n\n\n```bash\ncomposer require symfony/ux-twig-component\n```\n\nas recipe, alias - `ux-twig-component`, `uxtwigcomponent`\n\n```bash\ncomposer require ux-twig-component\n```\n\n## live component\n\n[docs](https://symfony.com/bundles/ux-live-component/current/index.html)\n\n```bash\ncomposer require symfony/ux-live-component\n```\n\nor as recipe, alias - `ux-live-component`, `uxlivecomponent`\n\n```bash\ncomposer require ux-live-component\n```\n\n## CSRF TOKEN security\n\n\u003e When you trigger an action, a POST request is sent that contains a custom Accept header. This header is automatically populated and validated. In other words… you get CSRF protection without any work thanks to same-origin / CORS policies implemented by browsers.\n\n[docs Live components ](https://symfony.com/bundles/ux-live-component/current/index.html#writable-object-properties-or-array-keys)\n\n[install csrf](https://symfony.com/doc/current/security/csrf.html)\n\n```bash\ncomposer require symfony/security-csrf\n```\n\nAnd activate to apply on headers\n\n[docs](https://symfony.com/doc/current/reference/configuration/framework.html#reference-framework-csrf-protection)\n\n```yaml\n# config/packages/framework.yaml\nframework:\n    # ...\n    csrf_protection: true\n```\n\n## Rendering Markdown Content (optional)\n\n```bash\ncomposer require twig/markdown-extra league/commonmark\n```\n\nexample of use:\n\nas a simple filter:\n\n```twig\n{{ '# MD'|markdown_to_html }}\n```\n\nor \n\n```twig\n{% apply markdown_to_html %}\n    Welcome {{ email.toName }}!\n    ===========================\n\n    You signed up to our site using the following email:\n    `{{ email.to[0].address }}`\n\n    [Activate your account]({{ url('...') }})\n{% endapply %}\n```\n\n## Validation\n\n[docs](https://symfony.com/doc/current/validation.html)\n\n```bash\ncomposer require symfony/validator\n```\n\nas recipe, `validation`, `validator`:\n\n```bash\ncomposer require validator\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fampmonteiro%2Fsymfony7_1-live-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fampmonteiro%2Fsymfony7_1-live-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fampmonteiro%2Fsymfony7_1-live-components/lists"}