Codux: Visual IDE for React
codux.com
codux.com
I really like this. I think some folks have correctly identified that it may be incorrectly used (my opinion) as a low-code editor. It very well could be however I see it living in a different space:
There has long been attempts at getting tools like Figma to produce assets that work with engineers. What I haven't seen until Codux is a tool that takes my work as an engineer and (mostly) correctly makes it editable and "design ready" for designers.
Thats the niche I see this living in, and is one I'd like to use it for, is to take the React components created for our design system and give designers the ability to run with it to create mock ups etc. This would cut alot of translation overhead and boilerplate significantly while keeping design and engineering on the same "page" because it reflects the changes correctly based on the source and available props, bringing things closer to usable.
https://plasmic.app experimented with bringing together design+code in this way, but we found it didn't take hold outside of small visual tweaks. We ended up taking a different approach to this specific problem - letting you build screens out of React components from your codebase (and have the screens rendered back into your app). This has worked out much better for us, as the surface area for coordination between the developer and non-developer is much narrower and less brittle as a workflow (and at the same time doesn't put an IDE in front of the non-developer).
How many engineers would prefer fumbling through Figma output instead of just writing it themselves?
I guess the answer to that depends on the quality of the Figma output, which is probably measured in maintainability?
Regarding some kind of a mash with Figma - even though we are looking at some possible ways of better synch between the tools in the future, the short answer is ‘not yet’. Even though design tools’ capabilities are getting highly advanced, they still have (and probably always have) unbridged gaps from real front-end development concerns, as you describe here. You can obviously keep Figma in your process while still working with Codux, but we’re here to help you build & maintain front-end code visually, in collaboration with designers, but on top of the real thing.
No thats great! I think its the perfect direction to move this!
The Henosia demo has all data hardcoded. To me that seems not a real world example. In my world the data are all variables, which usually effect the design considerably.
The Codux demo seems to work with actual code and variables for the backend developer, while at the same time the designer sees data. So that makes it more interesting.
An IDE should have the text in the forefront, enable all the things an IDE normally does, as well as have a preview mode where you can visually edit.
A Dreamweaver for React.
In their defense it looks like they expect you to focus on the text part in your normal editor.
But at that point they should make this a VSCode extension or something.
Having your source being modified from two programs is... silly.
You can run it on an existing project, and start creating pull requests to your existing code. as long as the project fits our supported technologies.
The other tools you mentioned create code, but cannot edit existing code.
This becomes a real problem when a developer changes this exported code, which causes conflicts when someone edits it in the editor.
We edit the code directly, with visual changes translated into code changes, letting developers and designers collaborate on code and through pull requests.
Utopia had two-way sync, but that project may be in a coma. Henosia I just learned about today. It's a tough-but-important problem to solve — best of luck building a successful solution!
tbh I find this to be misleading then. Me, and I am sure many others interested in web dev, have seen products that focus on react with a visual IDE, maybe this product is way better, but it seems like a poor first impression when I immediately think "that's bullshit" about the first thing I see.
Also how does this handle complex project setups? Like lets say i have a constant that gets injected by my bundler (e.g. webpack) that produces different results based on the environment, or middlewares? How does it display individual components when it might need to load a bunch of dependencies?
BOO :( back button.
I tried opening https://codux-demos.com/blueprint-css-webapp/ in Firefox but changed my User-Agent to Chrome on Windows. Everything works fine as far as I can tell. But all the network requests are slow as hell (probably HN-hug? Confirmed to be slow with cURL as well, so not because of Firefox).
Can't say I'm suprised.
Can't say I'm surprised either.
I remember around maybe 2013?, there was a UI component that was all the hype; the sliding options menu (where you hit the hamburger at the top and the menu would cover half the screen). I wanted to remake it and tried to do it with Storyboards and imperative code, but it never worked just quite right. When I got rid of the sliding menu UIView on the Storyboard and just wrote the UI programmatically via UIKit, it was hard to learn but the final product was a finely, tunable sliding options menu view :-)
I also have to wonder if you still have to hack the code and what not how does this make it so much different from just using hot reloading features to see things?
If you go to https://www.codux.com/download on Chrome on NixOS, you are offered a .deb when you click a button named 'Linux'.
Ubuntu != Linux. Debian != Linux.
But there's some sort of thermocline-of-trust issue with a self-identified manufacturer of software engineering tools can't correctly detect or name my OS, nor presumably understand why this makes me wary of trusting my development loads to a tool that is packaged in this way. https://twitter.com/garius/status/1588115310124539904
Suggestion to Wix: Go take a look at how another closed-source app with excellent cross-platform support is packaged -- say, https://reaper.fm.
This website lets me pick from several different flavours of Linux in an unobtrustive, practical way.
(I mention 'practical' because I know that the idea of supporting more than one flavour of an OS is seen by newcomers as 'impractical', but that's just how we do business in Linuxville, and since we've been doing it for a while, we've got lots of examples of doing it successfully, practically, and sustainably. Welcome! Sorry about the mess!)
Instead of assuming everyone is on .deb, here are some alternatives:
- Flatpak (most preferred) - AppImage - Docker image - Snap (least perferred)
Once it's possible for anyone to use the Flatpak, say, it makes sense to begin producing artifacts for common platforms like .deb for ubuntu x64 etc. Put your CI/CD on it.
But don't start there. Start with flatpak. Start with appImage. Start, if you must, with a docker image and `localhost:3000`. But whatever you do, don't equate linux with Ubuntu or even Debian, it makes everyone feel weird
As developers are very particular and tend to customize their IDEs with a lot of extensions, I don't think this will replace the tools we have.
But I do think that we should be able to customize a lot more
The code editor especially should be able to receive most of the common settings such as font, theme, ...
I would also like to see some support for common utilities such as prettier and eslint. This will not replace the primary IDE but when I need to use it I expect it to do a proper job.
A lot of what you're suggesting here (prettier, eslint) is on our list, and even in the works - and I hope would reach users soon. Until we improve the experience around the built-in code editor (and perhaps even after), we've found that it's most comfortable for us to work side-by-side with Codux and our IDE of choice.
> 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.
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.
If you'd like something more code/dev-oriented and open-source, check out https://impulse.dev/
> Is there a (react) visual IDE that works in absolute space (like figma?) instead of enforcing responsive css rules?
> The issues with most of design tool to React, is they don't understand how to generate CSS in responsive manner. Most of css styles unit is in pixel !