I have looked at Codux and checked if soon it can be a good replacement for editors like Webflow or Framer. Results? Read more here!

✦

What is Codux?

As their website says, “Visually edit projects side-by-side with your code editor. See every change reflected instantly and get your work done faster.” It is a code editor that aims to create react code in a more drag&drop like system. It sounded like the perfect tool to collaborate with designers and get them to work in the codebase with design-related changes, like styling, layout, or even copy changes. All of this with git integration so you can proceed with pull request & review flow. It got me thinking that it will be like Wix, Webflow, and Framer but locally without the cloud and much better version control and change ownership.

My motivation to try Codux

Honestly, I hate making simple changes to the styling because there is more work around the change than actually doing the change. By more workaround, I mean creating a pull request with an explanatory description, getting it reviewed, and making sure that implemented design is in line with the design. Don’t get me wrong, the whole process is long to make sure that everything is fine and the process is not broken, but our complex tools maybe are too complex. In a world that tries to automate everything from the deployment or even typing (Github Copilot), changing font size sounds like a trivial problem.

Tools like Codux also sound like a way to introduce designers to make changes directly into the product codebase. Designers implementing their own design could feel the UX outcome. What is more workflow like this could shorten the feedback loop.

Why it is not great for building complex apps

Passing props

Currently, from the Codux drag&drop UI, we can only pass values (hardcode). It is not possible to pass variables that exist in the scope without looking into the code. This is understandable for the beta. The app should display every variable in the scope.

Complex layouts

You can pass a component to the prop in a drag-and-drop style. Of course, this can be something that you would actually put in the prop, not the whole tree of elements.

Rendering a list of N elements is not really possible without using the code. There are 2 possible ways:

• Prepare separate components to render N amounts of the children’s component - this is mostly fine, but you still have to pass a hardcoded variable

• Add component N times manually - Unfortunately, this is not possible with dynamic data because we can’t pass variables.

  
  

Using external libraries

Codux is a powerful tool for building web applications, but it has some limitations when it comes to using external libraries. Specifically, Codux does not work with CSS frameworks or component libraries. This means developers cannot use popular libraries such as Bootstrap or Material-UI to style their applications. This can be a significant limitation for some developers who rely on these libraries to build their applications.

Perfect fit for Codux

The perfect fit for Codux is where we could use only drag & drop. This can only be achieved for easier, static pages.

This will require some additional preparation to make implementations fast.

• Using a component library

• Easy or automatic deployments

• Preview deployments

• Automatic image optimisation

By using tools such as Framer and Webflow, we can skip these steps and, more importantly, avoid having to maintain them.

User experience

As an editor, Codux must put user experience (UX) at the top of its development strategy, making sure that its users have a smooth and easy-to-use interface. Since the software is still in beta, it is important to know that its current flaws, especially in the area of user experience (UX), will likely be fixed and improved in future versions. The best tool is one that fits easily into the user's workflow, requires little mental effort to learn, and provides a clear and natural experience once it's mastered. By putting these things first, Codux could make an editing tool that is powerful and efficient and stands out in the market.

There are many UX issues in the current iteration. A blog post is probably the last place to post feedback to the Codux team; nevertheless, I want to point out 2 issues that were problems that occurred multiple times while creating a simple app.

• Most confusions come from Codux not giving error messages to the user. This behaviour can be experienced when moving a tree of elements inside a prop.

• You can’t copy elements/components from the Elements tab

  
  

Wrapping up

• Codux is a great editor, but you probably shouldn’t use it in a production environment right now, at least until its beta ends.

• At this moment, user experience is far from great, and that’s Codux's biggest problem at the moment, in my opinion.

• From the developer's perspective, that is another thing to maintain. Currently, as front-end developers, we have to maintain the storybook, tests, and the app itself. Adding Codux requires its board file that has to be maintained. But this is not a big deal 🙂.

• Working using Codux doesn’t seem like a performance boost either; I have a feeling that it would be faster to type, even without using tools like GitHub Copilot.

I have high hopes for the Codux team to revolutionise how we create user interfaces, but there is still much work to be done. Nevertheless, the Codux team has the potential to make user interfaces easier to create and maintain, allowing developers to spend less time debugging their code.