Sometimes we can encounter a scenario where we need a value from the javascript runtime, for example, the current time. The standard way to accomplish this in elm is to write ports. But writing ports for accessing simple things is tedious and frustrating.

To counter this, realm uses uses a hack and offers access to these simple utilities through its magicSlice function.

How does magicSlice work?

magicSlice rides on the String.prototype.slice of Javascript. It adds a little extra magic by running certain special commands when it receives a set of predefined values.

This is possible because Elm doesn’t implement it’s own slice function and just piggybacks on the JavaScript one. String’s slice function was chosen as it returns string and thus can be used to represent any value and be converted back easily.

So, we pass the slice two integers, the first one is predefined, extremely specific and long enough that there is virtually no case where this will conflict with the standard slice call. The second integer is what determines what we want to access. The integers are mapped with the respective commands in our javascript implementation in src/frontend/pre.js.

Our elm code, in src/frontend/Realm.elm, runs the String.slice with the determining integer when it is passed the type of the Magic we want to get. The Magic functions call the magicSlice with Magic types and then return the values to be used by other code in elm.

Available Magic Functions

Here is the list of Magic functions available to you to use:

  1. getTime : String -> Time.Posix, pass empty string to get time!
  2. warn : String -> a -> a, pass a string and any value that can be converted to string to log it as a warning to console. Useful for debugging.
  3. here : Time.Zone, get timezone offset!
  4. consoleGroupStart : String -> a -> a
  5. consoleGroupEnd : a -> a
  6. log : String -> a -> a, Log a string to console!
  7. crash : String -> String Throw error in console with string message.
  8. referer : String, get the referer property of the document.
  9. inIFrame : Bool, check whether the page is loaded in within an iFrame or not.

Table Of Content

What is Realm?

A Bit On Motivation

Routing is Hard

What does Realm do?

Backend Data And Type Safety


Quick Start Realm Tutorial

In Depth Tutorial (not ready)

Hello Rust
Hello Elm
Hello Static Files
Hello Server Side Rendering
Pre-Commit Hooks

Routing, Request And Response

Frontend, Data, Navigation, And APIs

How To Guides

File Upload

Backend: S3 File Upload
Authenticated File Serving
Frontend: Uploading Files From Elm

How to use storybook?

How to implement “loading..”?









Environment Variables

Internals - Only for Realm Developers, not Users

“Realm DATA”
iFrame Controller
Shutdown Routine
Testing Internals

Change Log

Get Realm Starter Working

Transparent Offline Feature

How to make http requests in Realm?


Replay Testing

Tutorial: ToDo App

Realm Testing

Enhance Realm Starter

Double Load Issue

Deploy To Heroku Button

End failure

Realm-Starter Github Template

Proposal: Tracker And Visit

Proposal: Activity Store

Proposal: Bundling

Proposal: Retry On Network Error

Storybook: Editable JSON

Storybook: Notes

Storybook: Reference



Change Log

How to Publish


Code Snippets

Skip rustfmt For Some Section

Close Modal Dialog When Clicked Outside

Ignoring Lints In Python

Ignoring Lints (clippy and rustc warnings) In Rust

Handle DateTime in Rust & Elm

Handle CiText value read in Rust

Transport Enum Type to and fro Rust/Elm through JSON