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!
Jan 24, 2023
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
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
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.
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
Automatic image optimisation
By using tools such as Framer and Webflow, we can skip these steps and, more importantly, avoid having to maintain them.
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,
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.