DEV Community

Cover image for Introducing Codux
Nadav Abrahami for Codux

Posted on

Introducing Codux

TL;DR - Introducing Codux, a new visual IDE for easing and accelerating the development of React projects. Learn more about it here, or join the conversation.

Hi, my name is Nadav Abrahami, and fifteen years ago I accidentally changed the web. I didn’t do it alone, and perhaps not all of it was unintended, but you may have heard of the result: the world’s first visual no-code website builder, Wix - the company that I co-founded.
Now, having been a developer for many years, I’m looking to change the web yet again. And again, not alone: with the help of a dedicated group and, most importantly, with you.

As Wix grew and advanced, utilizing new technologies, building a low code editor required a lot of, you guessed it, coding. Throughout the process, my feeling about web development grew to be quite similar to what I thought before creating Wix: it’s too messy, involving too many tools, too much repetitiveness, and too much effort. There has to be a better way of doing this!

And so we invented one.

“I Wish There Was a Button for That…”

As things stand now, the development process of a web application is a headache. Anyone who spent way too long switching contexts just to get a gradient right or struggling with a multilayered background knows exactly how time-consuming things can be. And many basic actions, like mocking complex data structures, wiring data to properties, or looking for the origin of a code definition, involve way too many steps. It’s repetitive and tedious. Whenever I encounter one of these cumbersome but necessary multi-step tasks, tasks which hold me from writing the real code, I find myself thinking: “I wish there was a button for that!”

In addition, as projects grow more complex, their code becomes more and more complex. Then I find myself switching between the IDE and the browser’s dev tools, just to find out what’s going on. This is especially true when considering the various states of internal components. Sometimes a clear view of the relevant part of the code I’m writing right now would save a lot of time and effort. I always wished there’d be a button for that.

When designers are involved, things can get even more frustrating, mainly because our means of communication are less than ideal: static designs and documents, or their own specialized tools. Whatever form the design spec is in, it’s not code. And so the developer must build the product, looks included, from scratch. The designer, meanwhile, has no way of being a part of the actual coding process, except for the occasional yell at the developer or a quiet sob in the corner. And so I find myself thinking: “Why not let them make the changes themselves? I wish there was a button for that!”

Unsurprisingly, it turned out I wasn’t the only one wishing. Far from it. And so my team started working on this wish list, and eventually created a new product. It’s the ultimate collection of buttons-for-that. It’s the place where all our wishes come true.

We call it Codux.

When You Wish Upon a Stack

Codux is a brand-new standalone tool from Wix designed to accelerate your development process, custom-made for developers and other related professionals. It’s a development environment that gives you a real-time visual rendering of your project, with numerous editing panels for quick modifications, and code editing where it’s relevant (or when you want to).

Codux analyzes your project to discover its UI components and general structure. It does so regardless of your code-writing style. When it makes changes - when you’ve changed a property, for example - it will write code the way you would write it. Codux is designed to be used alongside your favorite IDE. It works on React projects using TypeScript and when looking at the resulting code, you’d never know whether Codux was used or not.

The first thing you’ll notice when opening a project in Codux is the visual rendering stage. It shows how your components look in their various states. Every change you make will be reflected there in real time, whether it was done in Codux or elsewhere.

The stage also lets you quickly access the code related to any given component. By clicking on a component you can jump directly to its source, and quickly edit its content.

The second thing you’ll notice is the visual controls, the property, and the styling panels. Click on an element on stage, and the panels will reflect its properties. Changing styles, adding class names, and setting properties suddenly become easy and fast. No need to spend time looking for the relevant code. WYSIWYG galore!

The third thing is a visual representation of the render tree. It includes conditionals and data-bound repeaters. Keeping a mental model of your project - or someone else's project that you inherited - becomes much easier when you have a visual illustration to refer to. A map of the component.

Codux rendering a card component on stage

It’s also fully Git-integrated, providing a collaborative environment for developers and designers alike. Just imagine how great it is when a designer doesn't need to send you a list of issues, but rather just fixes those on their own, using the exact same environment that you, the developer, do. The current back and forth between you two is reduced to having an occasional lunch together. Which is, to me, the best back-and-forth there is.
But this is only the first step on the road leading to a revolution in the way web development is done.

Now Wait a Minute…

Just in case, let’s quickly dispense with what Codux isn’t. It’s not a no-code/low-code editor (like the Wix editor). Nor is it a replacement for your IDE. Currently, like most developers, I use an IDE of my own choice set up just the way I like it. I won’t quickly replace it with something else, and I wouldn’t expect you to do that either.

Back to the Future

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. What we aim to make here is no less than the easiest, most comfortable, visual, and time-saving solution for writing web applications.

Yes, we know it’s a lot to do. But then, back when we originally created Wix, that seemed impossible as well. I think the results speak for themselves.

So What Now?

Right now, Codux can speed up your development process considerably. It works great with React, TypeScript, CSS, CSS/Sass Modules, and our very own Stylable. It’s also free of charge. So why not download it and give it a try? I’d love to hear your thoughts about it, either in a comment below or on our new Discord server.

In the eternal words of Doc Brown: “Roads? Where we’re going we don’t need roads.” Well, substitute “roads” for anything that holds back your development process right now - that’s where you and I are going.

Download Codux here.

Oldest comments (63)

Collapse
 
codenameone profile image
Shai Almog

Congratulations!

It's amazing how far back we regressed from the ease of visual basic. There's so much room to improve front end development. Good luck.

Collapse
 
lirantal profile image
Liran Tal

Really taking the whole lowcode to the next level. Nice work and congrats!

Collapse
 
jomarton profile image
Jonathan Marton

Hey @lirantal !
We like to say it isn't low code, it's YOUR code :)

Collapse
 
devsonwix profile image
Devs on Wix

Very exciting, Codux!

Collapse
 
mrblightning profile image
MrBLightning

Sounds really cool. If I was still creating projects in React I would give a try for sure :)

Collapse
 
nadavab profile image
Nadav Abrahami

what are you creating projects in these days?

Collapse
 
mrblightning profile image
MrBLightning

I'm actually a DevRel these days so I have fewer chances to touch code directly and more chances to explain it to others :)

Collapse
 
tomrav profile image
Tom Raviv

Really excited to see this finally go out to the real world, to meet real projects, belonging to real users.

Curious (and a bit nervous) what people will think, looking forward to some interesting discussions. :)

Collapse
 
alastairlangridge profile image
Alastair Langridge

Would be dope if you could allow this to use Tailwind to do the styling, potentially a minefield but for those of us that use it would be pretty amazing

Collapse
 
nadavab profile image
Nadav Abrahami

We're going to add support for tailwind CSS soon.
it's at the top of our list for the next CSS solution to support.

Collapse
 
seanmclem profile image
Seanmclem

Awesome. I don’t suppose you have time for styled components?

Thread Thread
 
nadavab profile image
Nadav Abrahami

CSS in JS is going to be more complex to support, it's supported for rendering but adding it to the style panel is going to take us more time,
it's on our list.

IMO our very own stylable.io is better for managing design systems. you should check it out.

Thread Thread
 
seanmclem profile image
Seanmclem

I thought that might be the case. So I was looking through the docs and was having trouble finding just examples of what the different styling options looked like, in use. It was a lot of set up and semantics. Did I miss the quick code samples?

Thread Thread
 
nadavab profile image
Nadav Abrahami

We currently support CSS and SASS. Both with or without css-modules, and our very own Stylable.

Would love to hear what you would have liked to see in the docs.

Let me know if you would agree to jump on a chat with us.
Thanks

Collapse
 
uglydiety profile image
Uglydiety

Sounds similar to storyboard? storybook.js.org/

Collapse
 
jomarton profile image
Jonathan Marton

Both in Codux and Storybook you isolate your components and render them, but this is where the similarities end :) . Now within Codux you can drill into every internal part of your component and visually edit it! you can change prop values, edit styles, and add/remove JSX elements all within the app. Every change you make results in actual source code change that you can later commit and push through git just as if you've done them in your IDE.

Collapse
 
uglydiety profile image
Uglydiety

I see! That is cool

Collapse
 
ccsunnydev profile image
ccsunny

Awesome tool, just wonder how did you do this

Collapse
 
nadavab profile image
Nadav Abrahami

Building on top of a lot of dev tooling that we all use and love. ( Typescript, prettify, sass etc.) And a lot of hard work to be honest.
I'll be happy to give a deeper dive into how everything works. Which part interests you?

Collapse
 
hamatoyogi profile image
Yoav Ganbar

This sounds super cool!
Can't wait to give it a try.

For other frameworks, have you looked at Mitosis?

Happy to explore if it's a good fit for you.

CC @samijaber

Collapse
 
nadavab profile image
Nadav Abrahami

I can see a lot of advantages to supporting it. We'll add it to the list.

Collapse
 
oanouman profile image
Martial Anouman

it remind me DreamWeaver... Bad memories 😂

Collapse
 
wandering-geek profile image
Krishna

Great article!

When I tried to access the website codux.com/, my security software(Bitdefender) blocked it citing "dangerous software"

Looking at VirusTotal two vendors classify your URL as malicious.

A bad domain reputation may cost you some users. Would recommend getting in touch with the vendors to have this fixed.

Collapse
 
jomarton profile image
Jonathan Marton

We really appreciate the heads up and taking care of this right now 🙏

Collapse
 
jomarton profile image
Jonathan Marton

We managed to clear up the issue (I hope 🫣). Thanks again!

Collapse
 
seanmclem profile image
Seanmclem

Really puts the competition to shame. There must be a skill gap

Collapse
 
sharonpriel profile image
sharonpriel

Cool stuff :)

Collapse
 
codingjlu profile image
codingjlu

Fascinating idea. I'll be sure to try it out!

Collapse
 
jesstelford profile image
Jess Telford • Edited

Taking this one for a spin today! 😍

It's free right now, but are there any plans to open source it? Or will it eventually be a closed source paid product?

I have a use case where I'd like to embed the editor in a webpage: the resulting code would be written to the URL instead of the disk, similar to SEEK's Playroom - do you imagine this being a possibility in the future?

Collapse
 
jomarton profile image
Jonathan Marton

Would LOVE to hear your thoughts once you give it a go :)

It is free right now and will always be free for open source projects. At this stage we're not thinking monitization, but more interested in usecases like yours and what you plan on doing with Codux.

We are working on a fully online version of Codux, and pluggability/extendability system. It seems to me like the combination of the two would answer your usecaes and much more!

Collapse
 
jomarton profile image
Jonathan Marton

Regrading the open sourcing of Codux itself - 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 itself for now.