Quick guide
At startup you will be presented with a blank page in the middle of the workspace. Start dragging elements from library (on lower left of the screen) into the page. Alternatively you can use the "Insert" dropdown button.
In a typical page you will likely need:
Headings
Mark the title and sub-sections of a page. Use them to make the content more scannable.
Paragraphs
Chunk of text that will wrap if needed (learn more).
Buttons
Actionable items that trigger a functionality (learn more)
Text fields, checkboxes and radio selections
These will allow user to input text information, on/off values and predefined choices. (learn more).
Rows and columns
A row will lay out children horizontally (learn more), while a column will lay out children vertically (learn more).
By default elements will be stacked vertically. In other words, each page itself is a column.
Images
Drop images from your file system into a container element (e.g. page, row, column, etc.), they will be automatically uploaded to the cloud and will remain available for 180 days.
By default the image will fill to the width of the parent container without overstretch itself.
You can tweak elements appearance using the inspector panel on the right under the "Design" tab.
Once you have done with the design you can export the Elm code by clicking the "Code" tab. By default Elm Designer generates the code for the actual selected element.
The outline view on the upper left of the application window shows your document as a tree. Here you can rearrange, duplicate and delete elements.
Every few seconds the workspace is saved on your browser local storage. Also, you can export the entire workspace as JSON file and import it back.