UICards: a tool for interactive UI development

UICards allow you to lay out portions of UI in specific states on a single page. I was inspired by ClojureScript’s devcards, and wanted to see if I can create something similar in Elm. UICards don’t have as many features at this point but I have a few ideas for future development.

Say you’re making a registration page. You’d want to test things like the layout of the page, input validation, error messages for server side failures etc. Normally this means you’d have to keep coming back to the registration page every time you make a change, and you might need to keep deleting your account to start fresh.

However, with UICards you can show all the states of the registration form on a single page:

This should make it faster and easier to implement.

When you can see everything side by side, it’s also easier to create a good looking, consistent UI.

Static UI elements are nice, but I wanted to go further, so cards can also be interactive:

Functional color picker

The nice thing is that you can reuse your update function and model to provide interactivity. There’s no need to reimplement that stuff.


Overview: https://korban.net/posts/elm/2018-12-11-uicards-create-uis-without-laborious-test-loop/

Package page: https://package.elm-lang.org/packages/alexkorban/uicards/latest/

Additional documentation: https://korban.net/elm/uicards/

I’m interested in feedback!

10 Likes

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