Say hello to Elm Designer 0.1—A Elm UI code generator

Show and Tell
1

After a lot of work I’m excited to introduce you the first release of Elm Designer, a Elm UI code generator.

screenshot
screenshot1447×980

Elm Designer lets you build visually your page design and generates the necessary Elm UI code for you: simply drag and drop elements from the library in the document tree and style theme accordingly to your needs. You can them copy code from the Code tab.

I believe it is a great way to approach Elm UI, do some experiments or automate the creation of boring code.

Download

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. Please take a look at the repo README for more information.

Version 0.1 goals

Given that it is a 0.1 version there’s a lot work yet to be done, however it is already usable. Right now Elm Designer can:

  • 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)

Sensible defaults

I’ve integrated several Google Fonts in the app (more are coming!) and gave some reasonable appearance to headings, form fields and other Elm UI elements to make you start quickly.

Thank you

Elm Designer would not exist without these great packages:

  • mdgriffith/elm-ui - Ca va sans dire!
  • miniBill/elm-codec - JSON document encoding and decoding
  • norpan/elm-html5-drag-drop - Drag & drop operations between elements library and document tree
  • zwilias/elm-rosetree - Tree/Zipper types to represent and manipulate the document tree
  • TSFoster/elm-uuid - Gives each node in the document an unique ID
  • the-sett/elm-syntax-dsl - Elm code generation

Finally, a special thank you to all the fine folks on the Elm slack channel who helped me during the last months.

46 Likes
2

Very cool and I’m very happy you decided to take this on. I literally started working on something similar about a year back, but then realised I didn’t have time to actually work on it.

It looks really nice. I’m hoping there will be some abstraction features in the future.

1 Like
3

Holy moly, nice work for sure ! Can‘t wait for more updates :slight_smile:

4

FTW it’s so awesome. great work, great first version.
really cool - also for learning elm-ui
thank you soo much

5

First of all, this looks amazing! :smiley:
I really hope you’ll be able to develop the project further.

Then…

I’m on Linux… what am I supposed to do again? This one liner instruction is not enough for little noob me :sweat_smile:
Help? :pleading_face:

6

I’ve explained it, maybe too briefly, in the README: https://github.com/passiomatic/elm-designer#build-elm-designer-from-sources

In a nutshell it is possible to download a “vanilla” copy of Electron and then run the entry point electron-app/main.js of the app. You will miss only the “branding” part.

Hope it’s more clear now!

1 Like
7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.