{"id":13561378,"url":"https://github.com/elm-community/js-integration-examples","last_synced_at":"2025-05-07T06:56:18.996Z","repository":{"id":41656917,"uuid":"254902511","full_name":"elm-community/js-integration-examples","owner":"elm-community","description":"Examples of common uses of ports and web components","archived":false,"fork":false,"pushed_at":"2023-03-05T06:27:26.000Z","size":279,"stargazers_count":136,"open_issues_count":4,"forks_count":11,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-07T06:56:13.032Z","etag":null,"topics":["elm","javascript","localstorage","ports","websockets"],"latest_commit_sha":null,"homepage":null,"language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elm-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2020-04-11T15:55:46.000Z","updated_at":"2025-04-12T06:25:20.000Z","dependencies_parsed_at":"2024-08-01T13:16:57.932Z","dependency_job_id":null,"html_url":"https://github.com/elm-community/js-integration-examples","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/elm-community%2Fjs-integration-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elm-community%2Fjs-integration-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elm-community%2Fjs-integration-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elm-community%2Fjs-integration-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elm-community","download_url":"https://codeload.github.com/elm-community/js-integration-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252831311,"owners_count":21810783,"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":["elm","javascript","localstorage","ports","websockets"],"created_at":"2024-08-01T13:00:55.474Z","updated_at":"2025-05-07T06:56:18.972Z","avatar_url":"https://github.com/elm-community.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"# Using JS within Elm\n\nElm can interact with JavaScript in three ways:\n\n- [flags](https://guide.elm-lang.org/interop/flags.html)\n- [ports](https://guide.elm-lang.org/interop/ports.html)\n- [custom elements](https://guide.elm-lang.org/interop/custom_elements.html)\n\nNot all browser APIs are covered by an official package yet, so if you are evaluating using Elm in your company, definitely browse through the examples here to get familiar with flags, ports, and custom elements to make sure these interop mechanisms will fully meet your needs. It may be safest to circle back to Elm later if not!\n\n\n## Ports\n\n- [localStorage](/localStorage) — [demo](https://ellie-app.com/8yYddD6HRYJa1)\n- [WebSockets](/websockets) — [demo](https://ellie-app.com/8yYgw7y7sM2a1)\n\n\n## Custom Elements\n\n- [Internationalization](/internationalization) — [demo](https://ellie-app.com/8yYbRQ3Hzrta1)\n- [Pie Chart Widget](https://ellie-app.com/8B2B8fWbvZwa1)\n- [Calendar Widget](https://ellie-app.com/8B8D2Q3WLh7a1)\n- [Project Fluent](https://github.com/wolfadex/fluent-web/)\n\n\n## Do you want to know more?\n\nThe top-level examples presented here are intentionally boiled down to a minimal setup for you to understand the basic ideas and get started quickly. As the web platform is a place with a lot of history and odd API corners there are more involved examples and tutorials to be explored in the [more](/more) section.\n\n* [Everything you need to know to use WebComponents in your Elm app](/more/webcomponents)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felm-community%2Fjs-integration-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felm-community%2Fjs-integration-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felm-community%2Fjs-integration-examples/lists"}