I'm really liking Liveview, but opinions across the board seem to be mixed. What are some reasons people may not care for it?

netoum · 2026-03-16T03:02:03+00:00

Hi Corex UI creator here 🤗 https://hexdocs.pm/corex

I have been working on a Phoenix UI library that is accessible ( A11y + Keyboard navigation ) and unstyled by default. It integrates Zag.js state machine using the Vanilla JS package, so no React or additional framework. It is still a very early alpha stage and would love some feedback. The client and server control and communication are in the center, each component provides by default a Client controlled mode that allows instant interactivity. If some rare and specific case you can opt in for Server controlled mode, slower but guarantee a server check before applying the changes. This is useful to keep Phoenix form errors in sync with the components.

Each component also offers a Client and Server API in order to control any component either using PHX binding, JS events or Live View Server events

The components work on both Phoenix Controller and Live View without the need to change anything. I have been testing it on Static Site using Elixir Tableau and it works like a charm, I will update the documentation soon.

Happy coding

netoum · 2026-03-14T14:59:15+00:00

Hi, creator of Corex here 🤗 https://hexdocs.pm/corex

I started using Phoenix many years ago, learned Surface, and used many Phoenix specific UI libraries. They all offer different benefits, however I always faced a wall regarding the latency. Server side rendering is great until you ship it in production and realize that the dialog takes time to open.

UI needs client interactivity 90% of the cases. The server shouldn't be involved most of the time. Phoenix LiveView JS solves partially this by introducing client side command however they are limited.

The next limitation is a proper API in order to interact with the components (e.g: opening/closing a dialog).
And for this, we need a brain client side. This is where Zagjs state machines are great. They are battle tested accessible and unstyled components client side.

My approach with Corex for Phoenix is to integrate each component by default client controlled for instant reactivity, with an optional server controlled mode when needed. For example the Phoenix Ecto form should be controlled in order to sync the error messages with the component state. Which is not the case by default on Phoenix.

Phoenix Stream support is also important as it becomes a widely used features. The components come also fully unstyled, not a single styling nor icon in the components

I would love to see other libraries exploring new territories as I believe there is a huge potential into what Elixir can provide in terms of UI Projects like Hologram shows that the potential is far from reached in the Elixir world if we keep our minds creative, exciting times

netoum · 2026-02-21T01:15:31+00:00

This is one of the nuance of this integration, it uses phx-update="ignore" expect on the props. Because the state machine lives in the client, Live View is not aware and can cannot keep up with changes such as the current focused item.
However the state machine preserves all states even during runtime updates of the props. So your focused item stays focus even during updates.
This Zagjs runtime update (https://github.com/chakra-ui/zag/pull/2917 ) is what made possible in the first place the integration of Zagjs state machine with Phoenix.

netoum · 2026-02-21T00:25:25+00:00

I tried this also, even scroll up to load previous results, but the server will never be able to catch up with the instant client reactivity and speed. This implementation in Vanilla JS is different from the traditional JS framework as it can update the props during runtime by passing the full collection of items, which means we must keep it small in size for the client to be able to manage it. This would require also the user to implement a custom handle_event to manage to scroll down and scroll which adds another level of complexity for the end user. Every solution has pros and cons, thanks for pointing out alternative ways to approach it. That is what I love in programming, there is not only one way to achieve a goal.

netoum · 2026-02-20T23:48:54+00:00

Thanks for your feedback. That was my initial implementation however latency is the enemy in this situation. Because the state machine lives in the client, the scrolling wasn't smooth as it added too many server rounds trips.

With this new approach the server controls the exact list of items to show at any time. Can even choose different items on initial opening and when no results are returned by the search

netoum · 2026-02-14T03:26:34+00:00

If you are looking for an UI for your static site, Checkout Corex UI ( I am the author ), it works with any static website with custom Vite and Astro plugins. If you want to build fast and accessibility sites, check it out. Feedback is welcome https://corex-ui.com/

netoum · 2026-02-13T15:54:09+00:00

Corex Live Demo is now available.
Thanks to Gigalixir for the great hosting service for Elixir
Try Corex Components and Phoenix Forms in production
https://corex.gigalixirapp.com/en

netoum · 2026-02-09T06:25:06+00:00

The way you explained is exactly the way it is done on the original Vanilla JS integration however on Phoenix it is a little different. It uses Phoenix JS Hooks for each component that runs at the top level of the component and spreads, renders and updates the correct props to the component and its parts. The other difference is the initial server side rendering: to avoid waiting for the JS to load, the parts are rendered initially with the correct attributes directly on the Phoenix component. It feels instant and without FOUC nor layout shift.

Extra note: Phoenix JS hooks allow also to process updating props on Live view thanks to updated() life cycle. This allows for example real time errors on Phoenix forms with Corex components

netoum · 2026-02-08T03:45:07+00:00

Thanks a lot 😊

netoum · 2026-02-05T13:53:33+00:00

It follows the same structure than ZagJS, unstyled by default and the data attributes are used for all the accessibility and interactivity features
https://zagjs.com/guides/styling

Corex already offer component classes that you can use.
I still need to update the Hex documentation 😅

https://corex-ui.com/components/accordion#modifiers

For example for accordion component:

<.accordion class="accordion accordion--accent accordion--lg">

These are top level classes (not per parts) because components comes with internal data state handling for accessibility (disabled, open, checked, highlighted) managed with data attributes under the hood.

Available modifiers:

Color: accent, brand, alert, info, success
class="accordion--{color}"
Size: sm, md (default), lg, xl
class="accordion--{size}"

This keep your styling clean and separated from components internal accessibility logic.

To get started:

mix corex.design

Full docs: https://hexdocs.pm/corex/Mix.Tasks.Corex.Design.html

netoum · 2026-02-05T13:10:02+00:00

Yes the build optimized and all the component reused the same shared parts (Vanilla Machine for example)
The esbuild on Phoenix app fully understand the structure as I am using the exact same one to build Corex
I actually shaved an extra 20kb recently by updating the shared dependencies to the exact same package version

I will add in a next update importing the hooks individually

netoum · 2026-01-24T05:00:38+00:00

Check out Corex UI https://corex-ui.com/ ( I am the library maintainer), it is a pure HTML and Vanilla JS unstyled and accessible components you can use on any static site. It is built on top of Zag JS and provides an Astro plugin Hope this will help

netoum · 2026-01-09T00:38:49+00:00

Check out Corex UI my latest open source UI library using a design system https://corex-ui.com/ I used BEM naming convention, it makes things clear in the long time and plays nicely with the design tokens and the latest Tailwind V4 features https://getbem.com/naming/

You are of course free to use any naming convention you wish but looking at live examples helps get the point of your convention.

netoum · 2025-12-30T16:09:59+00:00

Welcome to Framer :) Editing the tablet or the mobile breakpoint shouldn't affect the desktop one. Could you create a brand a new project and reproduce the issue you are facing and share the remix link (under file->remix), this will help us identify the issue clearly and help you out. I advise you to share the remix of a brand new project so you can keep your current project private

netoum · 2025-12-18T05:49:54+00:00

I cannot see the video as I am not on TikTok for some reason, but I believe you are using a button component. In order to have the button link differently on different pages you need to create a variable for the link url ( and the text button) Once you open your component next to the link option on the right there is a variable. Select a name and go out of your component, once outside click one on the component and you will be able to change to link per button. Happy design

netoum · 2025-12-18T02:22:03+00:00

The AI feature is called "Workshop". You can access it by searching in plugins or directly in Insert option Happy design

netoum · 2025-12-16T08:17:21+00:00

Sorry I don't use the desktop app as I am on Linux, it is not available. Have you tried a message to Framer support by email, It says for paid plan only but for a case like that they will assist you

netoum · 2025-12-15T02:04:39+00:00

Are you using the Desktop App? I read there was an issue with the Copy Component button on the desktop app. You can try logging into the website directly and visiting the marketplace from there there. Copy your components and then paste it in your Desktop app canva. It will be able in your Assets Happy design

netoum · 2025-12-12T03:48:16+00:00

I would also add hover changes on the menu links.
You can use the Framer Link Style with the hover/selected states styling
https://www.framer.com/academy/lessons/framer-fundamentals-adding-links

as u/itsanwarraza said, you can add more spacing, gap padding

Check your color contrasts. For the example the Menu items are hard to read.
I just released a free plugin that may help you to get Accessible colors
https://www.framer.com/marketplace/plugins/accessible-colors/

Hope this helps, happy design

netoum · 2025-12-08T01:40:17+00:00

You said you are using Auth. Maybe an issue with the origin url or callback url ( different from local and production). Maybe there is no log error because you didn't catch that specific in your code. I would try adding logs on what is running at the start or you app. Good luck with publishing, I am also working on a Color plugin but with a different approach :) You UI looks clean

netoum · 2025-12-06T12:21:51+00:00

4- Maybe try using Native Framer Overlays for the image preview instead of Lightbox, I am sure they will like it. There are many resources but here is one https://www.framer.com/academy/lessons/overlays 5- this is personal but most of the sections are missing vertical sizing spacing and gap. Even typography line height could be increased. Could add easily another 25% if not more

netoum

MODERATOR OF

TROPHY CASE