# UICards: a tool for interactive UI development

**URL:** <https://discourse.elm-lang.org/t/uicards-a-tool-for-interactive-ui-development/2744>\
**Category:** Show and Tell\
**Created:** [December 10, 2018, 10:38pm UTC](https://discourse.elm-lang.org/t/uicards-a-tool-for-interactive-ui-development/2744 "2018-12-10T22:38:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexkorban](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/alexkorban/32/3242_2.png) [@alexkorban](https://discourse.elm-lang.org/u/alexkorban)\
**Post date:** [December 10, 2018, 10:38pm UTC](https://discourse.elm-lang.org/t/uicards-a-tool-for-interactive-ui-development/2744/1 "2018-12-10T22:38:19Z")

</div>

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:

 ![Registration form](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/c/c9e3ec10480078b1481e4b90f99dcfbae158bddc.gif)

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](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/a/ad9ecba09f2d1a266dac9e84f7a2eb3740ca7784.gif)

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/](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/](https://package.elm-lang.org/packages/alexkorban/uicards/latest/)

Additional documentation: [https://korban.net/elm/uicards/](https://korban.net/elm/uicards/)

I’m interested in feedback!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 20, 2018, 10:38pm UTC](https://discourse.elm-lang.org/t/uicards-a-tool-for-interactive-ui-development/2744/2 "2018-12-20T22:38:24Z")

</div>

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