Wix previews Codux, a visual design tool for React

Wix previews Codux, a visual design tool for React

Wix, a website builder and hosting service which claims over 200 million users, has previewed a visual design tool for React called Codux.

This is a desktop IDE for Windows, macOS and Linux, with dependencies on Node.js and Git. It is a two-way visual editor, meaning that if developers edit the code, it is reflected in the visual IDE, and vice versa.

An online demo of Codux

Codux is narrow in its focus, and only supports React projects which use either TypeScript or JavaScript with the prop-types library. Styling support extends to CSS, Sass, or a Wix system called Stylable, which extends CSS via a preprocessor. Git integration is built in.

The product is currently in open beta and can be downloaded from the Codux site. It is not open source, but a team member said: “We already have some of the tooling used to build Codux open sourced and will add to that in the future. We are not planning to open source the entire platform.”

In a post introducing the project, Wix co-founder Nadav Abrahami said “the development process of a web application is … repetitive and tedious” and that checking the “various states of internal components” is complex and requires switching between IDE and browser development tools. In addition, designers are excluded from the coding process and deliver designs to developers that have to be recreated. Codux is intended to solve these issues.

“Eventually, Codux will become a one-stop shop for all stakeholders in a given project, covering everything from basic design to full deployment. It will support all frameworks – React, Vue, Svelte, Web Components, you name it – and all styling solutions,” promised Abrahami.

Codux is not intended to be a no-code/low-code editor, Abrahmi said, but rather a supplementary tool. It can be used alongside existing IDEs such as Visual Studio Code. Codux appears to make heavy use of an embedded Chromium browser component, even including the browser developer tools, and the team is working on a completely online version alongside the desktop offering.

Reaction to the initial release is mostly positive. “This is exactly what I’ve been waiting for” said one comment. Others are more cautious. “It reminds [of] Dreamweaver … bad memories,” said another.

Dreamweaver is an Adobe product, originally from Macromedia before its acquisition by Adobe. The trend though has been away from visual design tools for web applications, towards programmer’s editors combined with browser development tools. Visual design for web applications is inherently challenging because of aspects such as responsive design, where the layout changes according to screen size or resolution, and DOM (Document Object Model) manipulation in JavaScript.

Codux takes a component-based approach though, following the React model where the user interface is split into “independent, reusable pieces” which is a sensible approach and may provide the benefits of visual design with fewer of the frustrations of older tools.