NduatiK / elm-designer

A visual code generator for Elm UI.

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.

Previously Elm Designer was an Electron app, you can still download older versions on the Releases page.

New to Elm Designer?

The quick guide is waiting for you.

About images

Images added to the page are automatically uploaded to Imgbb servers and will remain available for 180 days.

Limitations

• UI is still pretty crude since the app is in an exploratory phase and I'm trying out different ideas.
• 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

Build Elm Designer from sources

Elm Designer uses Parcel to compile Elm and SASS source. To install all the needed dependencies type:

npm ci 

To run it locally in dev mode type:

make dev

or if your prefer to turn off the Elm debugger type:

make dev-no-debug

Note: you will need a valid Imgbb API key to be able to upload images. API access is free and requires only to sign up to the service. Once you get the API key set the IMGBB_API_KEY environment variable or create a .env file in the repo root containing such key:

IMGBB_API_KEY=your-API-key

Then the build process will create a Env.imgbbApiKey value.

Credits

Elm Designer contains patched versions of the following packages:

• Elm Bootstrap is copyright (c) 2017, Magnus Rundberget
• Html5 Drag-Drop is copyright (c) 2018, Martin Norbäck Olivers