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.
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
- Cover Elm UI
textColumnlayout primitives and most of the form widgets; support padding and spacing; allow fonts formatting with native and external web fonts (thanks to Google Fonts)
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.
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
Zippertypes 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.