https://github.com/elm-community/js-integration-examples

Examples of common uses of ports and web components
https://github.com/elm-community/js-integration-examples

elm javascript localstorage ports websockets

Last synced: 3 months ago
JSON representation

Examples of common uses of ports and web components

• Host: GitHub
• URL: https://github.com/elm-community/js-integration-examples
• Owner: elm-community
• License: bsd-3-clause
• Created: 2020-04-11T15:55:46.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T06:27:26.000Z (almost 2 years ago)
• Last Synced: 2024-08-01T13:22:03.067Z (6 months ago)
• Topics: elm, javascript, localstorage, ports, websockets
• Language: Elm
• Size: 272 KB
• Stars: 138
• Watchers: 19
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ccamel - elm-community/js-integration-examples - Examples of common uses of ports and web components (Elm)

README

        
# Using JS within Elm

Elm can interact with JavaScript in three ways:

- [flags](https://guide.elm-lang.org/interop/flags.html)

- [ports](https://guide.elm-lang.org/interop/ports.html)

- [custom elements](https://guide.elm-lang.org/interop/custom_elements.html)

Not 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!

## Ports

- [localStorage](/localStorage) — [demo](https://ellie-app.com/8yYddD6HRYJa1)

- [WebSockets](/websockets) — [demo](https://ellie-app.com/8yYgw7y7sM2a1)

## Custom Elements

- [Internationalization](/internationalization) — [demo](https://ellie-app.com/8yYbRQ3Hzrta1)

- [Pie Chart Widget](https://ellie-app.com/8B2B8fWbvZwa1)

- [Calendar Widget](https://ellie-app.com/8B8D2Q3WLh7a1)

- [Project Fluent](https://github.com/wolfadex/fluent-web/)

## Do you want to know more?

The 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.

* [Everything you need to know to use WebComponents in your Elm app](/more/webcomponents)