1) it's free during beta which means pricing plans are sure to follow. 2) it's owned by Wix, which means that you will probably have to get on their platform to keep using it and any components you make could be used by them in the future.
I think the place where it will really thrive at, is helping budding front-end developers, understand CSS better. I personally always get confused with when to use align, justify, items and the various other CSS components. It also gives you an idea of how you can structure code in react.
It still doesn’t have any useful css additions so you can better understand how width works in flexbox or overflow (devtools sucks at this point). If that project just had a import from figma button i would be lost!
I think there is a way to add disclaimer to TH-cam videos specifying that the video is sponsored. Also please mention that fact at the start of the video instead of the end. Helps a lot if you are more transparent with your audience.
Doesn't seem any faster than a dev who knows what they're doing with a modern IDE, GPT auto-suggest (e.g. copilot), and dual monitors. I don't see how a big form of available props in the sidebar defeats just typing them with intellisense + suggest. If only the visual drag and drop mattered, did you know that Powerpoint can export to web...?
For those of us who have difficulties grasping basic react concepts, being a newbie, this really helped me understand the idea of "components" and props. Building blocks that can have data change and vary
@@codybishop7526You will not learn javascript or react this way. As a programmer you learn to code and not to configure. When yiu use visual editor, you are configuring. New developers shouldn't rely on this the first place.
@@codybishop7526no, it's not, learning react is about to writing codes and see how code works, effects the component not creating once by clicking, don't know how long have you tried codux but have you ever had "Thinking in react" mindset since then?
🎯 Key Takeaways for quick navigation: 00:27 🖌️ *Visual Component Building with Codex* - Introduction to Codex as an integrated development environment for building React components visually. - Comparison to traditional methods like Figma and VS Code for designing visually appealing interfaces. - Support for various technologies, including React, TypeScript, CSS, SASS, CSS modules, and Tailwind CSS. 02:07 🔄 *Changing React Development Paradigm* - Shift in the development process with Codex, allowing building components first instead of top-down. - Comparison to previous practices using hot reloading in React development. - Overview of Codex's features, including a visual IDE, code editor, styling panel, and support for third-party libraries. 04:23 🎨 *Creating React Components Visually* - Hands-on demonstration of creating a React component visually in Codex. - Explanation of adding elements, customizing styles, and resizing the frame for different viewports. - Insight into the visual coding experience, including the editor, code view, and inspector panel. 06:41 🔍 *Visual and Code Synchronization* - Codex's capability to synchronize visual changes with code, enabling concurrent visual and code editing. - Practical demonstration of coding while using Codex side by side. - Flexibility in combining visual and code-based approaches for efficient development. 08:59 🚀 *Building a Dashboard with Codex* - Step-by-step creation of a dashboard using Codex, adding multiple components and customizing their layout. - Demonstration of the power of Codex and React integration in designing complex interfaces. - Dynamic updates across components when modifying the structure of one component visually. Made with HARPA AI
Though it seems interesting, you should add the data fetching and form control using codux. as these are the main use cases of react. reusability of components are okay but why you should consider codux when you need to write logics by yourself
seems interesting, but I think it would be better if you were more honest by stating that the video was sponsored, adds an extra layer of transparency to it
I was very excited to see something powerful and I was dissappointed. I guess this doesn't replace the knowledge a developer needs to have, and it sits between VSCode and me as a developer. I liked it when you created several videos by specifying specific props, however that's no different than generating an array of objects with chatgpt and putting it inside a constants file. I think if AI is used more in here then I might feel it's a better tool. Imagine you created the video component, and you hit an AI magic button to create 3 ones with data for you based on the first data you just added. I would love to see the day when a tool like this totally abstracts the logic behind and I don't even have to know if the technology behind is changing (meaning, the tool could use next.js, vue, react) and I wouldn't care because all I'm doing is creating my projects with components. Oh, btw, when that day comes, I think it will be easier for anyone to become a "developer". Thanks for showing this tool buddy :)
yeah, it feels figma like to me. Would really like to see the code it generated though. If it's just a component written 4 times, it would be even more disappointing. Also this seems really good for small codebase. For a large enough codebase, things would get really complicated really fast with state management and all stuff.
From what I understand, when creating a responsive Codux component, you are relying on the size of the component container itself as opposed to the viewport?
I think the nicest thing about this app is that I could more easily verify my code by inspecting each compoent or checking responsive design, rather than going into chrome and do it myself
The be honest, I dont see any usecase for it, other then playing around with this tool. It doesnt really increase speed of creating a components and usually people use some kind of UI libraries for this kind of stuff, other then that you probably need to take a look at component after all and check code by yourself. Its just more friendly gui for coding, maybe useful for beginners who doesnt know properties :p
I think it can be useful if you have components that you share among different projects. You can tweak components and have them in a single repository for reference. It also would be cool if the style applied to the component gets converted to tailwind classes.
React Studio for MacOS has been out for a long time already but noone seems to know about it based on these Codux videos lol. I think the best part about Codux is that it's available for Windows :D.
Hi there, I have a question can you make a tutorial on how to create a website or editing tool like Figma. Can you please tell me what are the logics behind the figma editing buttons? I mean there are customisation options how these are working or we can use a library for that purpose? Looking forward to your reply Thank you!
If it can go as far as replacing a high fidelity prototype from figma or any other program, it could have a solid use case for freelancers and perhaps smaller teams. Otherwise, it would be better to separate the design and the coding. And coding is fast if you already have a prototype to work from instead of having to design AND build the app.
I understand that coding gives a lot more flexibility.. But if there's a way for people who wants certain functions or components without needing to create a full web application, this would be ok. I see a lot of developers getting upset with this.. The only sad news with this is the fact that it is owned by wix. And they usually have policies that make them keep the code. This is good and would be awesome if react can be made into a visual builder with the ability to also code. Whenever a complex component or app needs to be developed, the developer can come in.. But for quick functions or components, you can easily make it. This is welcomed... But I think a different company should do it and not wix.
I have 15+ years web dev experience to notice, that same thing was in Macromedia Dreamweaver in 2000s.. and it's dead now. People switched to plain code, I don't know exactly why. But Figma is different - before we had only Photoshop, that was a tool for photo editing, but not for web design.
Devs decided that it took more time to work in a GUI like Dreamweaver than at code level. This is why a browser web inspector in combination with hot reloading from VSCode is the standard, and this kind of association has been the most common workflow for over a decade. If Codex cannot improve the current standard workflow, it will not survive.
Make an app as a real life rpg gym edition, gaining exp with lifting and stuff cmon beo ive been thinking bout this for so long and i think u can do it
Wow , we almost create wordpress, if we keep going in this direction , Next with be PHP and visual projects will just be Wordpress it took us a long time to rewrite wordpress in JS
3:00 That's probably the worst way to learn, especially in technical fields. You can't be a proficient engineer by being an oonga-boonga caveman. READ THE DAMN DOC PEOPLE !
Historically WYSWIG editors were considered downgrades and it does seem that way in your video when you had to go through multiple mouse movements and clicks to achieve something simple.
Good content but you have to reduce screen change speed, pretty fast changes and getting headache. if we reduce speed to 0.75 your voice is not matching to screen.
Too late - React is ancient now. This could've been cool 3 years ago. Server Side Rendering is out. Single Page Apps are out. Static web pages using Server Side Events / web-sockets and PURE html + PURE css + PURE JavaScript on the client is the way to go. NO THIRD PART LIBRARIES like node / express / react / etc is needed. ONLY pure simplified web applications that are super agile (due to no libraries to boggle down the performance). Also: pure applicatons are super easy to make and maintain.
hmmm i don't know man I feel like coding is much faster than this. This would great for someone who does not know coding so they can play little bit with react.
Guys this is just for teaching purpose because in real world no use this visual Bcoz u must write logic to connect components via parent which prop pass which component so its just like css part 2 type 😂😂
it's rather strange that humanity has lived with this idea not developping with web technologies... visual editing was there since 2000s, I remember Microsoft Page and Dreamweaver, what they could do is support export in various libraries/formats as they were developping...
stop using REACT to build apps. you use one library that a dev decides "hey, yea, i'm going to stop supporting this, hell i might even just remove it from the NodeJS repo and Github", or for some reason it needs a Native Binary Compiled just to work on various platforms.... and they decide to not support a particular platform anymore.... everything breaks. LOL. Learn CSS Learn HTML Learn JavaScript use each one of them where they are best needed. using Javascript as the solution to every problem is like saying "a hammer is the universal tool".
1) it's free during beta which means pricing plans are sure to follow. 2) it's owned by Wix, which means that you will probably have to get on their platform to keep using it and any components you make could be used by them in the future.
I think the place where it will really thrive at, is helping budding front-end developers, understand CSS better. I personally always get confused with when to use align, justify, items and the various other CSS components. It also gives you an idea of how you can structure code in react.
It still doesn’t have any useful css additions so you can better understand how width works in flexbox or overflow (devtools sucks at this point). If that project just had a import from figma button i would be lost!
Dude React devs are pushing themselves out into unemployment
Yes! SAME! It was always confusing for me. This would help new devs understand these concepts way better.
I think there is a way to add disclaimer to TH-cam videos specifying that the video is sponsored. Also please mention that fact at the start of the video instead of the end. Helps a lot if you are more transparent with your audience.
Totally agree.
Doesn't seem any faster than a dev who knows what they're doing with a modern IDE, GPT auto-suggest (e.g. copilot), and dual monitors. I don't see how a big form of available props in the sidebar defeats just typing them with intellisense + suggest. If only the visual drag and drop mattered, did you know that Powerpoint can export to web...?
For those of us who have difficulties grasping basic react concepts, being a newbie, this really helped me understand the idea of "components" and props. Building blocks that can have data change and vary
Currently learning react but that was on my tongue to say. I'm getting lost clicking 10 buttons to actually make 1 on the page.
@@codybishop7526You will not learn javascript or react this way. As a programmer you learn to code and not to configure. When yiu use visual editor, you are configuring. New developers shouldn't rely on this the first place.
@@codybishop7526no, it's not, learning react is about to writing codes and see how code works, effects the component not creating once by clicking, don't know how long have you tried codux but have you ever had "Thinking in react" mindset since then?
@@codybishop7526component is a react function, how do you suppose to understand react by clicking when the way to understand it is writing ?
Somebody finally made Visual Basic for React!
these editign skills are next level!
Thanks Francesco!
and my typo skills are a unmatched@@AdrianTwarog
@@francescociulla 💔
@@alexsulaymoon8570 ?
Idk for me it's easier writing code rather then trying to find some button in UI. Seems like another tool for creating landings.
🎯 Key Takeaways for quick navigation:
00:27 🖌️ *Visual Component Building with Codex*
- Introduction to Codex as an integrated development environment for building React components visually.
- Comparison to traditional methods like Figma and VS Code for designing visually appealing interfaces.
- Support for various technologies, including React, TypeScript, CSS, SASS, CSS modules, and Tailwind CSS.
02:07 🔄 *Changing React Development Paradigm*
- Shift in the development process with Codex, allowing building components first instead of top-down.
- Comparison to previous practices using hot reloading in React development.
- Overview of Codex's features, including a visual IDE, code editor, styling panel, and support for third-party libraries.
04:23 🎨 *Creating React Components Visually*
- Hands-on demonstration of creating a React component visually in Codex.
- Explanation of adding elements, customizing styles, and resizing the frame for different viewports.
- Insight into the visual coding experience, including the editor, code view, and inspector panel.
06:41 🔍 *Visual and Code Synchronization*
- Codex's capability to synchronize visual changes with code, enabling concurrent visual and code editing.
- Practical demonstration of coding while using Codex side by side.
- Flexibility in combining visual and code-based approaches for efficient development.
08:59 🚀 *Building a Dashboard with Codex*
- Step-by-step creation of a dashboard using Codex, adding multiple components and customizing their layout.
- Demonstration of the power of Codex and React integration in designing complex interfaces.
- Dynamic updates across components when modifying the structure of one component visually.
Made with HARPA AI
more like DARPA AI
Though it seems interesting, you should add the data fetching and form control using codux. as these are the main use cases of react. reusability of components are okay but why you should consider codux when you need to write logics by yourself
Good idea actually!
I don't understand why most people ignore Linux when they talk about OS support. 2:47
I am an experienced java developer and tech lead . I didn't know the tool you mentioned . Thanks
I would love to see a full webapp created with Codux
buildship plus flutterflow
Yeah Im thinking of importing an existing project into it!
this isnt code, this is static paper :D
seems interesting, but I think it would be better if you were more honest by stating that the video was sponsored, adds an extra layer of transparency to it
I was very excited to see something powerful and I was dissappointed. I guess this doesn't replace the knowledge a developer needs to have, and it sits between VSCode and me as a developer. I liked it when you created several videos by specifying specific props, however that's no different than generating an array of objects with chatgpt and putting it inside a constants file. I think if AI is used more in here then I might feel it's a better tool. Imagine you created the video component, and you hit an AI magic button to create 3 ones with data for you based on the first data you just added.
I would love to see the day when a tool like this totally abstracts the logic behind and I don't even have to know if the technology behind is changing (meaning, the tool could use next.js, vue, react) and I wouldn't care because all I'm doing is creating my projects with components. Oh, btw, when that day comes, I think it will be easier for anyone to become a "developer".
Thanks for showing this tool buddy :)
yeah, it feels figma like to me. Would really like to see the code it generated though. If it's just a component written 4 times, it would be even more disappointing. Also this seems really good for small codebase. For a large enough codebase, things would get really complicated really fast with state management and all stuff.
Does it supports States, loops, hooks, event handlers?
Can use this Codux IDE for React Native too?
how does this work with components that need redux store or react router dom?
What else will it contribute to as we can write code and see it's live deployment side by side so with our normal browser and VS Code??
Uh, this looks really interesting!
Thanks Simon!
How to work with when I have to use multiple APIs to fetch data from that. How to apply this in codux?
From what I understand, when creating a responsive Codux component, you are relying on the size of the component container itself as opposed to the viewport?
I think the nicest thing about this app is that I could more easily verify my code by inspecting each compoent or checking responsive design, rather than going into chrome and do it myself
What is problem in that ?
You can see network console etc….
can we use it with material ui and need to know how api's interact with codux
I tried to view some of my existing code with this, it errors every time for some reason.
So 25 years later we are full circle to Visual Basic 6.
The be honest, I dont see any usecase for it, other then playing around with this tool. It doesnt really increase speed of creating a components and usually people use some kind of UI libraries for this kind of stuff, other then that you probably need to take a look at component after all and check code by yourself. Its just more friendly gui for coding, maybe useful for beginners who doesnt know properties :p
I think it can be useful if you have components that you share among different projects. You can tweak components and have them in a single repository for reference.
It also would be cool if the style applied to the component gets converted to tailwind classes.
Will I be able to run Fixie (AI. JSX) which is an open source model for react which runs on your LLM instead of DOM with Codux?
not posting so often mate! really enjoy your content
Codux does not support react router right?
as soon as i opened the codux app it asked me to login which then I immediately deleted.
I don't know what is the different from Adobe Dreamweaver?
React Studio for MacOS has been out for a long time already but noone seems to know about it based on these Codux videos lol. I think the best part about Codux is that it's available for Windows :D.
One of the main points here was that it is capable on Windows
Reminds me time when Visual Borland C++ appear first time...
Good job, I rly hope for improvements in Web development.
Dreamweaver is back!
Was thinking the same thing: dreamweaver and frontpage
Sorry, I gave it a try. If you know your css classes with VSC autocompletes, codex appears much slower to code.
can it accept a figma file and out a component with classes?
What is a bottom down app?
What about @media requests?
Hi there, I have a question can you make a tutorial on how to create a website or editing tool like Figma. Can you please tell me what are the logics behind the figma editing buttons? I mean there are customisation options how these are working or we can use a library for that purpose? Looking forward to your reply Thank you!
Thanks bro!
I don't think it will make my workflow faster as I type faster than I click unless it can replace figma process.
If it can go as far as replacing a high fidelity prototype from figma or any other program, it could have a solid use case for freelancers and perhaps smaller teams. Otherwise, it would be better to separate the design and the coding. And coding is fast if you already have a prototype to work from instead of having to design AND build the app.
I understand that coding gives a lot more flexibility.. But if there's a way for people who wants certain functions or components without needing to create a full web application, this would be ok.
I see a lot of developers getting upset with this.. The only sad news with this is the fact that it is owned by wix. And they usually have policies that make them keep the code.
This is good and would be awesome if react can be made into a visual builder with the ability to also code.
Whenever a complex component or app needs to be developed, the developer can come in.. But for quick functions or components, you can easily make it.
This is welcomed... But I think a different company should do it and not wix.
with this tool my life became so much easier wow !
You sound like these 1990s commercials
I also like the combination of buildship and flutterflow
oh havent tried those
No code tools?
@@shahbazkhan-ek7hpyes... No code mobile app development based on flutter
@@shahbazkhan-ek7hp yeah
Can we use bootstrap too?
Is there one of these for VueJS?
Rather than all these things, I am eager to know about your startup idea on which you were working. Make a video on that if possible
Why do I need to signup to WiX?
I had all but forgotten about browser extensions to reload tabs. I don't miss those times, hah.
Yea I know!
Did this project survive?
How you people do this magic 🌟
Codux website shows blanked white page
Wow, this is good
Yea it's pretty interesting
I have 15+ years web dev experience to notice, that same thing was in Macromedia Dreamweaver in 2000s.. and it's dead now. People switched to plain code, I don't know exactly why. But Figma is different - before we had only Photoshop, that was a tool for photo editing, but not for web design.
Devs decided that it took more time to work in a GUI like Dreamweaver than at code level. This is why a browser web inspector in combination with hot reloading from VSCode is the standard, and this kind of association has been the most common workflow for over a decade. If Codex cannot improve the current standard workflow, it will not survive.
Because if you know what you're doing, writing code will always be faster, especially now that we have AI-based auto-complete such as Git Copilot
This is great but I personally like to code 😊
It seems similar to Framer, which generates React components under the hood using Figma and HTML
Changed my mind. This is completely different and seems amazing 😄
I kinda like doing it in code. This way seems weird.
1:55 “with react you build components until you have a big app” “now with this visual ide I can finally code from the bottom up with components!” ???
i dont understand why this isn't a thing with EVERY platform/language except since VB6...
The only thing making me apprehensive is the default light theme....
Psycopaths xD
Make an app as a real life rpg gym edition, gaining exp with lifting and stuff cmon beo ive been thinking bout this for so long and i think u can do it
Looks promising.
looks like pinegrow editor :)
Or dreamweaveR?!
Although the video is really helpful and thanks at the same time but the video feels laggy because of the animation used in.
Wow , we almost create wordpress, if we keep going in this direction , Next with be PHP and visual projects will just be Wordpress
it took us a long time to rewrite wordpress in JS
I think VSC + Copilot + Storybook is all you need
Gnome workbench but for react by react.
3:00 That's probably the worst way to learn, especially in technical fields. You can't be a proficient engineer by being an oonga-boonga caveman.
READ THE DAMN DOC PEOPLE !
Zoomera reinvented Dreamweaver
Historically WYSWIG editors were considered downgrades and it does seem that way in your video when you had to go through multiple mouse movements and clicks to achieve something simple.
Don't tell my employee about this. Thanks
Looks similar to delphi/winforms visual designer
Love it especially for building the front end...blockchain development
This could be cool for freelancers who dont want to use stuff like weblow
Dreamweaver? 😢
Slowly we move to nocode!
Yeah, I think it’s a cycle though. Same loop different period.
Yeah, I think it’s a cycle though. Same loop different period.
These no code tools are here for years but it won't replace code
Iam waiting for React CMS who can beat PHP Wordpress 😂😂😂
Good content but you have to reduce screen change speed, pretty fast changes and getting headache. if we reduce speed to 0.75 your voice is not matching to screen.
Too late - React is ancient now. This could've been cool 3 years ago. Server Side Rendering is out. Single Page Apps are out. Static web pages using Server Side Events / web-sockets and PURE html + PURE css + PURE JavaScript on the client is the way to go. NO THIRD PART LIBRARIES like node / express / react / etc is needed. ONLY pure simplified web applications that are super agile (due to no libraries to boggle down the performance). Also: pure applicatons are super easy to make and maintain.
Nice
Interesting
hmmm i don't know man I feel like coding is much faster than this. This would great for someone who does not know coding so they can play little bit with react.
Are you sure that this way of creating components is really better than the classic one? Right now, you're hardcoding.
If the logic requires code, it qdds nothing
Look like WordPress for react
Guys this is just for teaching purpose because in real world no use this visual
Bcoz u must write logic to connect components via parent which prop pass which component so its just like css part 2 type 😂😂
Vite is pronounced "veet". It means "fast" in French.
it's rather strange that humanity has lived with this idea not developping with web technologies... visual editing was there since 2000s, I remember Microsoft Page and Dreamweaver, what they could do is support export in various libraries/formats as they were developping...
This is just localhost:3000 with a wrapper
Laughs in Dreamweaver
dreamweaver again
Good.But writing code is more satisfying than clicking.
Just like that old app I forgot it's name, it's shit in the end.
nice ad
Any app will not give you as much flexibility as code
stop using REACT to build apps. you use one library that a dev decides "hey, yea, i'm going to stop supporting this, hell i might even just remove it from the NodeJS repo and Github", or for some reason it needs a Native Binary Compiled just to work on various platforms.... and they decide to not support a particular platform anymore....
everything breaks. LOL.
Learn CSS
Learn HTML
Learn JavaScript
use each one of them where they are best needed. using Javascript as the solution to every problem is like saying "a hammer is the universal tool".
another Macromedia Dreamweaver 😅
a
Given the AI progress this already seems outdated, altough this is interesting but not new.
wtf
Nice sponsored video. Wasted 10 minutes 😂