Elm Language Getting started with Elm Language Embedding into HTML
Example
There are three possibilities to insert Elm code into a existing HTML page.
Embed into the body tag
Supposing you have compiled the Hello World example into elm.js file, you can let Elm take over the <body> tag like so:
<!DOCTYPE html>
<html>
<body>
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Belm.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Elm.Main.fullscreen()%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode">WARNING: Sometimes some chrome extensions mess with <body> which can cause your app to break in production. It's recommended to always embed in a specific div. More info here.
Embed into a Div (or other DOM node)
Alternatively, by providing concrete HTML element, Elm code can be run in that specific page element:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<div id='app'></div>
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Belm.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Elm.Main.embed(document.getElementById("app'))
</script>
</body>
</html>
Embed as a Web worker (no UI)
Elm code can also be started as a worker and communicate thru ports:
<!DOCTYPE html>
<html>
<head>
<title>Hello Worker</title>
</head>
<body>
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Belm.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520var%2520app%2520%3D%2520Elm.Main.worker()%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520app.ports.fromElmToJS.subscribe(function(world)%2520%257B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520console.log(world)%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%257D)%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520app.ports.fromJSToElm.send("hello');
</script>
</body>
</html>
