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

Version 0.1 goals are:

• Create and transform simple designs into Elm code
• Auto-save designs into browser localStorage
• Cover Elm UI row, column, textColumn layout primitives and most of the form widgets; support padding and spacing; allow fonts formatting with native and external web fonts (thanks to Google Fonts)

Elm Designer is distributed as an Electron app. Right now there’s a macOS binary available to download and you can run Elm Designer sources on Windows and Linux systems via CLI.

• 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
• Non-fluid pages larger than current workspace dimensions push right panel out of app window

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.

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.

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.