{"id":32124308,"url":"https://github.com/azyzz228/heex-snippets","last_synced_at":"2025-10-20T21:50:03.538Z","repository":{"id":163766989,"uuid":"638648640","full_name":"azyzz228/heex-snippets","owner":"azyzz228","description":"VSCode extension with snippets to write fast HTML inside of .ex files when writing Phoenix Application with Elixir.","archived":false,"fork":false,"pushed_at":"2023-11-23T08:31:58.000Z","size":1770,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T21:50:02.507Z","etag":null,"topics":["elixir","phoenix-framework","snippets"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=aziz-abdullaev.heex-snippets","language":"JavaScript","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/azyzz228.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-05-09T19:58:04.000Z","updated_at":"2024-02-08T18:13:42.000Z","dependencies_parsed_at":"2023-11-23T09:40:50.284Z","dependency_job_id":null,"html_url":"https://github.com/azyzz228/heex-snippets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/azyzz228/heex-snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azyzz228%2Fheex-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azyzz228%2Fheex-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azyzz228%2Fheex-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azyzz228%2Fheex-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azyzz228","download_url":"https://codeload.github.com/azyzz228/heex-snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azyzz228%2Fheex-snippets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280166619,"owners_count":26283782,"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","status":"online","status_checked_at":"2025-10-20T02:00:06.978Z","response_time":62,"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":["elixir","phoenix-framework","snippets"],"created_at":"2025-10-20T21:50:01.211Z","updated_at":"2025-10-20T21:50:03.528Z","avatar_url":"https://github.com/azyzz228.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HEEx Snippets\n\nWrite fast HTML inside of `.ex` files with these snippets when writing Phoenix Application with Elixir.\n\nAvailable at:\n\n- [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=aziz-abdullaev.heex-snippets)\n- [Open VSX Repo](https://open-vsx.org/extension/aziz-abdullaev/heex-snippets)\n\n![](https://github.com/azyzz228/heex-snippets/blob/main/assets/demo.gif)\n\n## Features\n\nThis extension with code snippets aims to accelerate html production inside of `~H` sigil in Phoenix Framework (especially useful when writing LiveView or functional components).\n\nThis extensions works great in conjunction with `emmet`. Here is the [link](https://github.com/elixir-lsp/vscode-elixir-ls/issues/243#issuecomment-1422409957) on how to make `emmet` work. While `emmet` provides support for simple `HTML` tags, this extension provides useful snippets for writing logic in `HEEx`.\n\nSnippet suggestions are triggered after `;`, so to use the snippets, simply type in `;\u003csnippet\u003e` and there will be VSCODE auto suggestion with the snippet.\n\n![](https://github.com/azyzz228/heex-snippets/blob/main/assets/suggestions_after_trigger_character.png)\n\n## Available snippets\n\n### Phoenix specific snippets\n\n| snippet | generated code |\n|---|---|\n|pe|`\u003c%=  %\u003e`|\n|ln|`\u003c.link navigate={~p\"/\"}\u003e\u003c/.link\u003e`|\n|lp|`\u003c.link patch={~p\"/\"}\u003e\u003c/.link\u003e`|\n|if|`\u003c%= if do %\u003e\u003c% end %\u003e`|\n|ifelse|`\u003c%= if do %\u003e\u003c% else %\u003e\u003c% end %\u003e`|\n|for|`\u003c%= for item \u003c- @list_of_items do %\u003e \u003c% end %\u003e`|\n|lc|`\u003c.live_component module={$1} id={$2} /\u003e`|\n|slot|`\u003c:slot\u003e\u003c/:slot\u003e`|\n|noreply|`{:noreply, socket}`|\n|ok|`{:ok, socket}`|\n|socket|`socket = \\n\\tsocket\\n\\t|\u003e $0`|\n\nAnd all `phx-` bindings: phx-value-*, phx-click, phx-click-away, phx-change, phx-submit, phx-feedback-for, phx-disable-with, phx-trigger-action, phx-auto-recover, phx-blur, phx-focus, phx-window-blur, phx-window-focus, phx-keydown, phx-keyup, phx-window-keydown, phx-window-keyup, phx-key, phx-viewport-top, phx-viewport-bottom, phx-mounted, phx-update, phx-remove, phx-hook, phx-mounted, phx-disconnected, phx-connected, phx-debounce, phx-throttle, phx-track-static\n\n### Simple HTML tags\nUse of `emmet` is assumed for simple tags. Meanwhile, this extension provides the snippets below:\n\n#### for-loop'ed\n\n| snippet | generated code |\n|---|---|\n|divfl|`\u003cdiv :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/div\u003e`|\n|pfl|`\u003cp :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/p\u003e`|\n|lifl|`\u003cli :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/li\u003e`|\n|h1fl|`\u003ch1 :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/h1\u003e`|\n|h2fl|`\u003ch2 :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/h2\u003e`|\n|h3fl|`\u003ch3 :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/h3\u003e`|\n|h4fl|`\u003ch4 :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/h4\u003e`|\n|h5fl|`\u003ch5 :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/h5\u003e`|\n|h6fl|`\u003ch6 :for={item \u003c- list_of_items} class=\"\"\u003e\u003c/h6\u003e`|\n|spanfl|`\u003cspan :for={item \u003c- spanst_of_items} class=\"\"\u003e\u003c/span\u003e`|\n\n### Custom Function Components\nCustom component snippets are triggered after `;.`. To generate the tag for custom component, type in `;.CUSTOM_COMPONENT`, there will be auto suggestion for generating `\u003c.CUSTOM_COMPONENT\u003e\u003c/.CUSTOM_COMPONENT\u003e`. See known issues.\n\n## Known Issues\n\nTODO:\n- \"sa\" for `socket.assigns`\n- \"iif\" - for inline if -\u003e `:if={}`\n- \"ifor\" - for inline for -\u003e `:for={}`\n\n\n- Custom Function Component suggestion does not appear as you type in but appears when you delete what you have written. So, to effectively use it, to get `\u003c.CUSTOM\u003e\u003c/.CUSTOM\u003e`, you need to type `;.CUSTOMX` then hit the `delete` / `backspace`. \n- A lot of HTML tags are not included in this snippet. HTML tags and other Phoenix Framework related snippets will be populated if demanded by community. \n## Release Notes\n\nSee `CHANGELOG.md`\n\n---\n\n**Enjoy!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazyzz228%2Fheex-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazyzz228%2Fheex-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazyzz228%2Fheex-snippets/lists"}