Elm Designer—A code generator for Elm UI

Current status

The application is in early stages of development and supports a subset of Elm UI.

Version 0.2 main features are:

• Add JPEG, PNG, GIF and SVG images by picking them from local file system
• Specify exact, minimun, and maximun elements dimensions
• Drop library elements directly on the page or on the outline pane like before

Download

Elm Designer is distributed as an Electron app. Right now there are macOS and Linux binaries to download and you can run Elm Designer sources on Windows via CLI.

About images

Images added to the page are automatically uploaded to Null Pointer service. According to Null Pointer terms of service uploaded images remain available up to one year (exact expiration depends on file size).

By uploading images and referencing them by URL sidesteps a number of issues like: huge serialized JSON files, hit localStorage quota limits, and dealing with clumsy generated code.

Known issues

• Color picker is quite limited at the moment since Elm Designer is using HTML 5 input type=color. Specifically you can't reset a color or specify inherit. See #1
• When switching fonts the weight of the new font should match, or be closer as possible, to the old one. See #2
• "Insert" menu allows to create non-renderable nodes. See #20

Build Elm Designer from sources

If you need to edit the source files the makefile on the repository root contains a bunch on tasks which automate the most common operations.

Install Parcel

Elm Designer uses Parcel to compile Elm and SASS source files. Please read up these instructions to install Parcel 1.12.4 before building Elm Designer from sources.

Run with Electron

You can run Electron as a command-line app and then point it to the main.js entry point.

So, first install Electron and all its dependencies locally:

npm ci

Then run:

make run

This will build the app assets with Parcel in production mode, copy the files into the electron-app folder in the repo, and finally run Electron itself.