# Releasing elm-widgets and elm-theme

**URL:** <https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857>\
**Category:** Show and Tell\
**Created:** [January 1, 2023, 8:26pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857 "2023-01-01T20:26:57Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![georgesboris](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/georgesboris/32/3598_2.png) [@georgesboris](https://discourse.elm-lang.org/u/georgesboris)\
**Post date:** [January 1, 2023, 8:26pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/1 "2023-01-01T20:26:57Z")

</div>

Hello folks! Happy new year to all of you. 🎉

I’m glad to release two libraries that I hope will be useful to you in your upcoming elm projects.

[elm-widgets](https://package.elm-lang.org/packages/uncover-co/elm-widgets/latest/) is a collection of stateless and themable view elements that you can use to speed up your application development.

[elm-theme](https://package.elm-lang.org/packages/uncover-co/elm-theme/latest/) is the library used to theme your elm-widgets in various ways, including using multiple themes on the same page and with support for dark mode. elm-theme will also be used to theme elm-book in its next version.

We also released [elm-theme-tailwindcss](https://www.npmjs.com/package/elm-theme-tailwindcss) so you can easily use your theme values through tailwindcss.

I plan on continuing to improve the documentation for these libraries in the upcoming weeks since there is a lot that can be done on that front. I’m also excited to receive any issues or PR’s so we can build this together 🙂

Cheers!

---

<div class="post-metadata">

**Author:** ![axelbdt](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/axelbdt/32/4404_2.png) [@axelbdt](https://discourse.elm-lang.org/u/axelbdt)\
**Post date:** [January 1, 2023, 9:52pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/2 "2023-01-01T21:52:51Z")

</div>

Thanks for releasing this!

I’m viewing the book on the phone right now and it looks great. I like how I can use the native controls.

Here’s a not so great overflow behavior I saw, maybe you want to fix it:

 ![IMG_20230101_224920](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/f/fde9023947dff9006ea4a2db1076efead44295a6.jpeg)

Looking forward to playing with the widgets once back on my laptop 🙂

---

<div class="post-metadata">

**Author:** ![Janiczek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/janiczek/32/4516_2.png) [@Janiczek](https://discourse.elm-lang.org/u/Janiczek)\
**Post date:** [January 1, 2023, 11:02pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/3 "2023-01-01T23:02:35Z")

</div>

Thank you for the release @georgesboris! Since watching your Elm meetup talk I couldn’t wait to see all the ways in which you “use the platform”. Definitely a lot of ideas and best practices to steal for our own styleguide 😇

One thought: I wonder whether “Type-safe inputs and outputs” is a good idea. It sounds good, and it’s usually the first thing an Elm developer tries, but IMHO it leads to surprising behaviour and user’s inability to write certain values using keyboard:

[https://user-images.githubusercontent.com/149425/210186515-a2bef353-42b6-42af-b893-f94dd4858253.mp4](https://user-images.githubusercontent.com/149425/210186515-a2bef353-42b6-42af-b893-f94dd4858253.mp4)

As far as I can tell, the best practice there is to hold the raw string and let user manipulate that raw string. I couldn’t find blogposts or articles on this theme although I could swear @joelq has written something about it 🙈

Anyways, you can imagine a form for a float where you hold the `Float` (or `Maybe Float`) in the model instead of the `String`. You can’t write “0.5” into this form ([Ellie](https://ellie-app.com/kBNc674PR5na1)):

[https://user-images.githubusercontent.com/149425/210186858-d6870404-6436-4f5f-b37b-a0404b7184bd.mp4](https://user-images.githubusercontent.com/149425/210186858-d6870404-6436-4f5f-b37b-a0404b7184bd.mp4)

Whereas if you were holding the raw string in the model, it would be just fine (at the expense of you having to parse at view-time instead of at update-time, or holding both raw input and the parsed value in the model at the same time).

I suppose the time input in elm-widgets is suffering from a similar issue, although I haven’t tried to debug it in detail.

---

<div class="post-metadata">

**Author:** ![georgesboris](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/georgesboris/32/3598_2.png) [@georgesboris](https://discourse.elm-lang.org/u/georgesboris)\
**Post date:** [January 1, 2023, 11:54pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/4 "2023-01-01T23:54:16Z")

</div>

Thanks for the feedback! I’ll update the docs and use `W.Container` to change the layout on mobile 😁

---

<div class="post-metadata">

**Author:** ![georgesboris](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/georgesboris/32/3598_2.png) [@georgesboris](https://discourse.elm-lang.org/u/georgesboris)\
**Post date:** [January 1, 2023, 11:59pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/5 "2023-01-01T23:59:57Z")

</div>

yep! this is exactly what I’m doing on other widgets like `W.InputInt` and `W.InputFloat` but I thought the date/time ones were working based on the numeric values of the input. I’ll debug but maybe this will cause a v2 faster than I expected 😅 - we’ve been using the date one at work for a while now but the time one is indeed less battle tested.

---

<div class="post-metadata">

**Author:** ![jfmengels](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jfmengels/32/3124_2.png) [@jfmengels](https://discourse.elm-lang.org/u/jfmengels)\
**Post date:** [January 2, 2023, 9:24am UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/6 "2023-01-02T09:24:49Z")

</div>

Really interesting ways of solving these problems!

Am I understanding correctly that you can’t test these components (or larger views that use these components) through [`elm-program-test`](https://elm-program-test.netlify.app/)? Because `elm-program-test` can’t simulate what the browser does.

---

<div class="post-metadata">

**Author:** ![georgesboris](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/georgesboris/32/3598_2.png) [@georgesboris](https://discourse.elm-lang.org/u/georgesboris)\
**Post date:** [January 2, 2023, 3:29pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/7 "2023-01-02T15:29:39Z")

</div>

Good point! I would imagine this would be the case for things like the togglable modal but for inputs they wouldn’t be any different from regular inputs? How does `elm-program-test` handle an input with a `onInput` attribute?

---

<div class="post-metadata">

**Author:** ![jfmengels](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jfmengels/32/3124_2.png) [@jfmengels](https://discourse.elm-lang.org/u/jfmengels)\
**Post date:** [January 2, 2023, 7:18pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/8 "2023-01-02T19:18:47Z")

</div>

Yes. I was thinking of the modal widget, and other elements (I haven’t delved into those yet) that work similarly outside of Elm’s msg/update cycle.

---

<div class="post-metadata">

**Author:** ![joelq](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joelq/32/445_2.png) [@joelq](https://discourse.elm-lang.org/u/joelq)\
**Post date:** [January 10, 2023, 2:57pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/9 "2023-01-10T14:57:08Z")

</div>

> [@Janiczek](#):
>
> As far as I can tell, the best practice there is to hold the raw string and let user manipulate that raw string. I couldn’t find blogposts or articles on this theme although I could swear @joelq has written something about it 🙈

You’re probably thinking of this tweet thread. I should probably turn that into a blog post 🤔

> <https://twitter.com/joelquen/status/1417699143343132672>

Also of possible interest is this musing on treating forms as values to be parsed:

> <https://twitter.com/joelquen/status/1420224710185455616>

---

<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:** [January 20, 2023, 2:58pm UTC](https://discourse.elm-lang.org/t/releasing-elm-widgets-and-elm-theme/8857/10 "2023-01-20T14:58:07Z")

</div>

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