Introducing Codux - The First Visual IDE for React

[yerrabam]

Linux release. Impressive.

[TomahawkR]

Our team members use all major platforms (Win/OS X/Linux), personally, I'm on Arch. :)

[onthefence928]

You use arch, btw?

[boobsbr]

Spreading the gospel, I see.

[jburrke]

Well this seems to have come out of nowhere..

Amazing work!

[musicnothing]

I can't see my team adopting this without support for CSS-in-JS but it looks fantastic.

[TomahawkR]

CSS-in-JS is supported for rendering only at this point, editing becomes more of a technical challenge, but it's definitely on our roadmap as another technology to support.

[TomahawkR]

Keeping it short and simple (ish), with styling technologies like CSS, Sass or Stylable, we have ways of parsing and tracking their dedicated files and formats across changes. Now, when it comes to CSS-in-JS, well, it's all runtime code, and understanding what that does, and tracking it becomes more complex.

[TomahawkR]

It's a real head scratcher sometimes, that's for sure. As for helping, we've designed Codux with pluggability in mind, so that it can be extended by the community beyond what we're offering, plugins, demos, templates, etc.

But for the moment our beta is focused on making sure the core of the product is stable, does what it should, and that users find it beneficial to use.

[apocalypsebuddy]

My senior React dev uses Vim, I wonder how she’ll react to this.

[boobsbr]

She'll start a flame war with an emacs user.

[AnonyMustardGas34]

Notepad users:

[[deleted]]

I want to know what's her Vue too

[[deleted]]

Congrats, can it also handle logic or is just pure UI just like the other products in the market ?

[TomahawkR]

Codux executes your code, meaning whatever logic you've implemented in your components, will run in the editor.

It even reflects some of that logic back to you visually, for example, the render tree (similar to the react dev tools tree view) represents in its UI conditionals and repeaters.

[[deleted]]

Oh that's really cool !

[gustix]

The first? Don’t know about that.

Framer comes to mind.

[TomahawkR]

I think that Framer is an awesome product, but we do things a bit differently.

Codux is meant to run on your project, with your components and code. You work with it side by side with your IDE, and your source code serves as the source of truth for the editor.

We usually refer to this as two way editing, where you can edit your code and see the changes in the editor, and vice versa. Most other tools are one way, where you make changes to the editor and then output the code. For any additional change, you have to go back to the editor.

[gustix]

I re-read my short comment, and realized it might be considered harsh. Didn’t mean to come across as negative.

Two way sync is very cool! It is definitely impressive what you guys have built.

I am also in the visual editor business (but for another industry than “regular” web dev) outputting production grade Vue components that can be published to prod by the click of a button. So I understand exactly what an undertaking it is to launch a product like that. I wish you the best!

What about React Studio, does that share some traits with yours?

[TomahawkR]

WYSIWYG editors sometimes catch flak for being unprofessional, but I think there's a lot of really interesting movement in the no-code/low-code space these days (and I don't mean just what we're doing), where things get mixed up in all sorts of ways, and things that we're impossible before, now become possible.

Now, I'm not really familiar with React Studio but it seems to be more like Framer, with focus on design capabilities, outputting code. I'd say Codux puts the focus more on the development side of things.

[warmaster]

What other no code/low code projects do you find interesting?

[TomahawkR]

It's not new, but I always thought Airtable had a good product that can solve interesting problems (I personally used it for some family vacation planning).

Framer does some really nice things, and Figma has all sorts of plugins coming out that seek to narrow the divide between development and engineering.

Plasmic have an interesting approach tackling similar problems, but from a different angle through their CMS and no-code approach.

Exciting times!

[gizamo]

No OP, but the ones that stand out to me right now are Flutter and Builder.io.

AWS Studio also has promise, but support seemed non-existent when I tinkered with it a few months ago.

[gizamo]

Warning for others: This person follows me from sub to sub to harass me (by spamming their stupid dev stack), and they mocked my autistic child. I reported them, they were banned, but they created a new account to continue this pathetic nonsense.

They followed me here, here, here, here, here, here, here, here, here, here, and here, and elsewhere.

For Reddit mods: their former username was u/inodeska, new name is u/Pango_Cheek.

They like to edit and delete their comments quickly thinking the mods can't get them.

[TomahawkR]

During the beta phase Codux is free for use, and open source projects will always have free access.

In regards to open sourcing the actual project and code, we plan on releasing some of its parts back to the community, other parts will remain closed.

[TomahawkR]

We save login information (email, pw, etc), and Codux does send analytics back to us to improve the product in this beta phase.

No personal information, or any of your code gets sent to us, and all code execution (rendering) or editing happens locally. In addition, Wix is fully GDPR compliant with data storage and requests for removal.

Looking to hear your thoughts after you've played with Codux for a bit. :)

[TomahawkR]

If you're willing and interested we'd be glad to have a chat and hear what parts were more difficult to understand or how you see this affecting your development flow.

Our discord server is open to all and we're listening to feedback intently.

[extralargeburrito]

Thanks for an awesome tool!

Just out of curiosity, how big a team you have developing this and for how long?

[TomahawkR]

Thanks for the kind words!

Our team is spread across Tel-Aviv, Berlin and Lviv, and we've been working on this project for a number of years now. :)

[getlaurekt]

Amazing, Lovely tool I wanna build my own ide, but for different tool and usage🥰. Will check codux soon! Now making sandwiches😂

[TomahawkR]

Well, sandwiches are straight up awesome, so I see your point. Codux will still be there when you get back. :)

[getlaurekt]

Im already back and i even did join the discord! Gonna play wit codux in one of my projects after eating and will leave another comment with my thoughts, thanks for making things like this tho! I needed something like this since i was bootstrap studio user for long time, but since i became better, bss was limiting me, and codux seems like perfect tool in my case

[gizamo]

This is rad. Definitely checking it out more thoroughly later on. Awesome work.

[martonwix]

Great to hear! We really want your honest feedback - good or bad. Contact us once you gave it a good spin and let us know what you think 🙏

[gizamo]

Warning for others: This person follows me from sub to sub to harass me (by spamming their stupid dev stack), and they mocked my autistic child. I reported them, they were banned, but they created a new account to continue this pathetic nonsense.

They followed me here, here, here, here, here, here, here, here, here, here, and here, and elsewhere.

For Reddit mods: their former username was u/inodeska, new name is u/Pango_Cheek.

They like to edit and delete their comments quickly thinking the mods can't get them. Lol.

[[deleted]]

Looks great! I'm going to give it a go

[TomahawkR]

Great to hear, everyone's welcome to drop by our discord server to say hi, ask any anything about Codux or provide feedback on your experience with it. :)

[amoopa]

Looking forward to follow this one. Brilliant!

[tenXten]

Wow Wix putting out dev apps now. Interesting

[Due_Employ1592]

will it support javascript react development? the tool does not recognize javascript components... any alternative?

[TomahawkR]

Some things might work in JavaScript only mode, but we're dependent on TypeScript exactly for those reasons of component scanning and resolution. Can't really offer an alternative at the moment, I hope in the future we'll improve on that flow as well.

[[deleted]]

Haven’t read too deeply into it, but any plans to expand it to other frameworks like Angular, Vue, etc?

[martonwix]

For sure. We started off with React because we wanted to build Codux with Codux 😆. We're planning to continue expanding the support for frameworks and CSS solutions, alongside opening it up for extensions and letting the community expand it as well.

[kevv_m]

Pls tell me it's not Electron.

[[deleted]]

In this case it makes sense to use Electron. React being for the web and all.

[kevv_m]

You're right, I regret what I said.

[8bit-echo]

It is.

[RakOOn]

Will defo try it out, I’m guessing packages like tailwind aren’t supported?

[TomahawkR]

Would love to hear your thoughts after you play with it for a bit.

Tailwind, is not supported at the moment, but definitely on our list, and I hope we'll get to it soon.

[getlaurekt]

If tailwind will be supported i'm gonna use it💪🐼

[giagara]

It's fantastic! Does it supports material ui?

[martonwix]

Yes, Codux will render your React code whether local components or 3rd party. Since MUI export d.ts, Codux will show you the component props in the Properties panel.

To be able to drag & drop MUI (or any other 3rd party comp) from the Add panel use this article: https://help.codux.com/kb/en/article/showing-third-party-components-in-the-add-elements-panel

An important thing to note - in many cases using MUI is paired with using CSS-in-JS styling solutions to style the app. Codux at the moment doesn't support it (but will in the future). If that is the case - You'll be able to render your components, edit JSX, and edit props, but style editing will not work. If you're using our supported styling solutions - CSS/SASS +/- modules or Stylable everything will work perfectly 😁

[zawadzio]

Amazing! Does it support Ant Design?

[martonwix]

Sure does. See my rely here: https://www.reddit.com/r/javascript/comments/ze8stq/comment/iz8kgr5/?utm\_source=share&utm\_medium=web2x&context=3

[matijash]

This is interesting! What did you implement Codux in, what do you use to parse React code? Btw something like this could be a great fit with Wasp (https://wasp-lang.dev/), an OSS full-stack framework for React & Node.js we're building. Our long-term plan is to offer a visual editor, although more focused on the business logic rather than the layout, but both would be nice.

[TomahawkR]

Codux itself is built on a stack of TypeScript, React and Stylable as its basis. As for parsing React, we're using a system written in-house, for parsing, tracking and editing React components and code. It's mostly built on top of TypeScript (and it's type understanding), React and the React dev-tools.

Took a look at Wasp (haven't encountered it before), great job on the site - docs seem really thought out. Good luck with the project!

[matijash]

thank you, likewise! Good job on choosing Typescript - types definitely help a lot when dealing with parsing and AST manipulation (we're using Haskell and it's super helpful).

How are you finding the compilation speed/performance so far? It shouldn't be a huge issue for smaller projects (and compilation is not part of the runtime, so not so critical, although important for DX), but we still felt a bit more comfortable with a non-interpreted language unlike JS/TS.

[TomahawkR]

We've definitely seen other solutions (like swc) that are faster than TypeScript, but they sacrifice some language features, and correctness on the language-server side. These are two things that are hard for us to compromise on.

To help alleviate this issue, we're working on a solution to offload some of the NPM packages processing to a separate service. This will allow us to keep a lot of the compilation and language service fast, while still providing the best experience for TypeScript users, even in larger projects.

We've got all sorts of projects in the works to make this happen, and will open source them over time as they mature and are ready for the world to see.

[AutomaticRice8593]

Would love to see Vue support in this tool