Using JS within Elm

Elm can interact with JavaScript in three ways:

• flags
• ports
• custom elements

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 — demo
• WebSockets — demo

Custom Elements

• Internationalization — demo
• Pie Chart Widget
• Calendar Widget
• Project Fluent

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

• Everything you need to know to use WebComponents in your Elm app
• Assorted real-world interop use-cases