I built a react app… but with a visual editor
HTML-код
- Опубликовано: 17 апр 2023
- Codux is a visual IDE for React.js. Let's review this tool by building a simple app and find out how it can increase web development productivity.
#webdevelopment #programming #vscode
💬 Chat with Me on Discord
/ discord
🔗 Resources
Codux codux.hopp.to/fireship
I tried 10 code editors • I tried 10 code editors
VS Code Tips • 25 VS Code Productivit...
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Using Codux with VS Code
- No-code tools for React
- Low-code web development tools
- How do I build a web app without code?
- Code Editor review 
Наука
Try it out and let me know what you think... codux.hopp.to/fireship
-Can't believe Wix finally made something decent-
letssssssssssssss gooooooooooooooooooooooooo
if they have a web version thats a great tool
No, thanks
Please recommend that Microsoft to integrate it into VSCode...
Would be nice to have this as a VSCode plugin
Oh, yes
agreed.
Totally Agree
What would the plugin do that the web ui doesn't?
meh that's two more clic... not necessary and doing that it will prevent it to become even bigger and powerful
The real question is, does it have a dark theme?
Sadly it looks like a no for now, which it kinda bad for a tool made to make good websites (and I'm like 99% sure it's made with electron, so it's basically a website)
I'm sad to say, not yet. But, we've heard the many requests, and it's in our sights. :)
@@tomraviv6165 doing a good job on the replies too, pass along that you should get a raise too mate🤜🤛😅
@@tomraviv6165 please don't say it's true. Is it an electron wrapper? So we can apply a dark mode extension on it or something. I still don't get why it takes so long for app devs to just theme it, it's like a junior UI designer could do it as a side project after lunch.
By the way, I got to pay respect to the web site designer. It's like they've taken minimalism to the next level. I ain't joking, it's like the best website I've seen in a very long time. It's like clear without being boring. It's hard to actually describe. I haven't even used the app yet as I'm still loving the landing site
@@neanda Codux is indeed built on top of Electron, which we feel makes a lot of sense for a component development environment. I'm totally with you about the dark theme, and hope to share some good news on that soon. And thank you for the kind words about our site, I'll make sure your feedback reaches our design team as well! :)
this is pretty cool, also glad to see some non AI content
Wait you’re afraid of AI taking your job? Don’t worry, it won’t be painful
@@littlestewart for now...
Someday AI will say "glad to see non-human code"
@@akj3344 Handmade, bespoke custom code. Already sounds expensive lol
right??
Codux development team is great. I used it for a while just to check it out and they emailed me asking for a 15 min feedback session to see how I feel about the app and how it should be improved. Give them support because they are working really hard on this project.
Thanks so much for the kind words, we've been working on this for a while, and it's absolutely incredible to see real people (outside of our group) get to try it out, and to see the amazing things they can make.
@@tomraviv6165 yall are legends, keep it up!
@@tomraviv6165 how many people signed up following the video?
I think the coolest thing is how easy it is to switch from Codux to VSCode and back! I'd absolutely love something like this for Vue. Don't know if I'd end up using it on a daily basis, but I'd definitely play with it for my projects!
We're starting off with supporting React (as it's the most commonly used), but Codux was designed from the ground up to support multiple frameworks. Once we feel like it's stable enough and provides good value for our community, then we'll explore which framework/library to support next, probably based on interest, and technical feasibility.
@@tomraviv6165 I would expect codux to be extremely configurable, like for selecting a css solution, I must be free to choose the library, given that there is an adapter for it, kinda like next-auth adapters maybe?
@@tomraviv6165 Id use this as a backend dev myself, I hate UI, but this makes it tolerable
After react probably will support angular, vue, next, even mobile with react native or flutter
That is a huge boost in productivity
@@tomraviv6165 Will it support tailwind?
I'm a Back End dev, though often required to maintain or extend Front End.
I will massively use this as it means I can get a new idea off the ground quickly, creating a slick front end which I can then adapt to add my Back End connections. Game changer for personal projects,and might become the way forward for my workplace where we would be wanting to convert old interfaces to a nicer React Front End
You should definitely tell your company to hire me as a front end dev tbh
Kinda cool I guess. It's pretty restrictive currently, no Tailwind support, React only. Seems like a cool collab tool for devs and designers.
Yeah, if it could generate tailwind, that would be pretty sweet.
@@tomraviv6165 Cool! Thanks for hanging out in the comments.
Not supporting Tailwind is a plus.
@@tomraviv6165 Amazing!!
@@darkwoodmovies 🤣🤣🤣🤣
I feel like there's a massive market to have a tailwind visual editor
My first thought was, it should have Tailwind support, and it would be perfect
Agreed, it wouldnt really make development that much faster (you can type 'text-center shadow' etc faster than finding in the UI) but you could easily share this with a designer to tweak things.
It also makes templating a bit faster
Hey there, part of the Codux team here - following a lot of user requests, we added Tailwind support in our latest version, and components using it now render properly in Codux. There's still lots planned to do there to improve the experience, but you can already get started today. :)
@@tomraviv6165 Thank you guys for listening to our feedback. I think every one greatly appreciates it. I'm going to check this out tomorrow when I get to work
@@tomraviv6165 What's the codux tailwind to component flow like?
What I've been looking for a loong time is being able to rapid prototype with tailwind,or other frameworks utility/tokens but then be able to componentize once a lot of UI parts start have similar behavior, along with sanely organizing the offshoots/variants/modifiers that always end up being created.
Basically rolling up all the low level utility classes from something like tailwind in to higher level style libraries UI class; the copying and pasting for componentizing tailwind et is a lot of fricking and goodness help you if you copy an extra quote mark
This would be perfect as a workflow between designers and developers. The designers can build their components, and layout, and the devs can quickly hook it up to a backend server and make it dynamic. I'm excited to see where this will take us.
Its what I've always wanted figma to be.
It’s nice to get some non Ai content
so true
This video was written by chat GPT4.
I feel kinda sad the my first reaction to the thumbnail was "oh, another AI tool".
I just started learning web development and I think this is really awesome. I will definitely try this! The visuals will really help me code UIs especially in display property. Thank you Codux team! keep up the great work
This looks awesome for designers that want to try out some things straight into the code, like some do in the developer tools, but with better feel. The possibilities are great. For developers, would be nice to have a vscode plugin of some sort that could integrate everything. Really impressive!
Oh my god. This feels like how I started out in web development. Dreamweaver for the HTML, and then the code editor to break into PHP! I dig it!
I like turtles
Turtles are neat
As an artist that is learning UI and HTML and CSS, Codux looks very promising.
Thank you Codux for sponsoring this video!
Bro, you just made me watch an entire unskippable Wix ad 💀
The nostalgia slammed into me so hard when you showed Dreamweaver. I learned my first bits of coding in high school on that. 😍
I have missed Dreamweaver. I can't wait to try this tool!!!
DW could still be relevant in a production pipeline. There are some things on DW that are not essential but if your org is paying for it could be of us.
This just simultaneously made and wrecked my day. I had specific tasks planned, and they probably just got pushed to tomorrow. I'm gonna play.. I'm gonna play so friggin hard..
This is super cool can’t wait to try this out
Part of the Codux team here, thanks for kind words - we'd love to see you on our discord later on to share what your experience was like. :)
I think this is definitely something I would adopt. I wouldn't make this my new way of building websites, however, it does seem like it can help cut down on development time for simple yet large components. Not sure if that makes sense but in my head it does, I think it'll be a good tool to adopt.
I’ve always feared the verbosity and weirdness of js and react and as such haven’t learned how to make a react app yet. This looks like a lovely way of finally learning how!
as an old Visual C# developer turned Web Developer, this brings back memories! im also learning react so this is good news for me. Definitely gonna try when I get home
dude that’s crazy i was literally looking for a visual editor that uses actual code and does the code the way you want. but just like you said, i wasn’t able to find any that lets you use any framework (ex: react, svelte, etc.). I really hope someone out there builds a product for this, where you can choose your entire stack (frontend, backend, middle-end, all of it) but build visually and still be able to edit the code whenever you want. Would be genius
Looks really cool, especially for beginners to React. A good visual way to learn. However, it does state it's only free "during the beta stage", so I wouldn't want to become reliant on a tool like this as it will probably end up costing a lot.
I love that the community immediately got engaged in the conversation. I was watching a tutorial of Codux the other day and my first response was shock. A couple of months ago, I asked why we didn't have something like this already. To see it now is impressive. Hopefully an extension for VS surfaces. I'd love to try it directly from VS
SO excited for this. Once you have a firm grasp of coding, a tool like this becomes such a time and life saver particulary if the project you are working on has a lot of intricate front end features. You get to make them do what you want AND look how you want in real time. Love it. Wonder if regular .js files will work... let me try it out.
Awesome, I'm keen to play with this!
I think it is a clear upgrade over the storybooks, I will definitely try this in my next big project, loved the way that it's loose coupled to the source code
Fireship is on fire with the quality and quantity of videos he is making currently!
Always has been
Also quantity
Definitely want to try it out. Thank you.
I think this is an awesome visual aid to people just learning css but also for component structure/templating your components!
This is good for creating a design system, kind of replacing storybook. But still for complex apps it's a bit of a overhead to use it
until they give it dark mode to help me slowly loose my eye sight 💀ill stick with vs code
You look like you don't need another dark 🌑 mode 😂
@@alainportant6412 What is that even supposed to mean?
@@Seeking_Solace
Oh hey, what's up Al-Qaeda? No, I'm totally kidding. I'm diffusing the tension with humor.
@@alainportant6412 Ah, a troll. (I'm not even Muslim, btw.)
@@Seeking_Solace
Seriously, though, no beheadings, all right 😂😂 ?
As others said, I've love to have this as a VS-code plugin. I used nextJS for my personal website. While it does instantly refresh in the browser (with a dev server) when you save a file, it's not AS good as having it directly side by side in the IDE. The visual interface is also welcome for CSS or to quickly reorder and place elements.
I will definately try this for some of my personal projects!
Reminds me of Bootstrap Studio
This is not for me, but I’m always happy to see new attempts in this space. Aside from a few elements like the shadow editor (something you won’t use all that often), I don’t think this would be all that useful for an experienced web dev who already had their own workflow. But for newer devs this could be a great starting point.
Exactly how I feel. I'm open to changing it, but seeing how you had to switch back and forth to hook up the logic didn't feel like a huge time saver. Copilot alone is more helpful since I can basically get at the code snippets way faster.
I kinda hate it coz I love writing my own code but its great to see stuff like this, but I would never use it
Yeh, it's close to the right solution for sharing with a designer though... They could tweak your components to fix any visual issues without having to go back and forth
@@tomrowe2181 Yeah, that's what I feel it is. Either small tools, or just let designers have a tool that helps streamline the development process. No longer need to spend hours trying to get the Figma design right.
Totally gonna try this out in my next project
I have wanted something like this for so long .
I work on a low-code builder tool myself, and find this demo to be pretty compelling despite the constraints. I'll have to check it out
There are a lot of similar concerns between the two types of applications. Element tree, canvas, DnD, element selection, property config, event config, project nav, etc. Always interesting to see the comps and learn and give feedback. Codux is definitely not a competitor to our product and I would love to participate
I don't know if the use case is really clear because tools like webflow exist where it's the same thing but 1000x better and you don't have to touch the code ever 90% of the time, and it still spits out fast (fast enough for most cases) code. The UI is also heavily reliant on the box-model style of design so the thought process is really similar to the way you would code as well, just a million times faster. Unless theres some highly specific reason you need to use react or some other framework (or library don't kill me pls) I don't see too much of a point, this exists in like the space of being *almost* a good product
Wix and web flow are the same this is for developers to be able to see what they are doing as they do it.
@@succatash I mean live servers exist, I'm still kinda failing to see what this point is
@Anush Gopalakrishnan its just for people who want to customly build their websites. I can't import an npm package on a webflow site, meaning they are basic sites not web apps.
This looks promising for certain use cases! Love the styling aspect of it.
Looked great. will try it out now
Codux is the new vim killer!
Maybe this is the next big thing after sliced bread, but I'll still write HTML/CSS and JS just like my ancestors did.
Looks awesome! I'm about to try it out and see actually how user friendly it is in doing other things like a responsive title bar.
This one is gonna be a gamechanger in a near future for web dev
Interested to see how hard it would be to adapt to provide a CMS to client's to edit their cintenty
Looks pretty cool! I think it's okay to use GUI. Because programmers always simplified job from "0" & "1" to programming language, I think next step is GUI
I am hyped for the Properties tab and Css Styles. That was always a hassle, remembering what exists and how it affects the current code
I feel as a synchronicity that you uploaded this video today..
Thanks! Trying it on some sketches for new apps
Not for me, if I want instant feedback to my design changes I would rather just use the inspect tab to tweak properties. I even find myself not using that though since hot reloading is a thing. I'm sure this could be a good introduction to coding though.
That's the thing though, is it even for introduction? Because you introduce a message to the juniors, and I'm not sure it's a good one
Ya but the WYSIWYG is only a small part of it, the idea is really to provide a GUI for the coding of components, like in the examples at the beginning of the video. Not as a replacement, but as a complement. I'm not sure it succeeds, but looking at it simply as a way to preview changes is kinda missing the point.
They said Vue and Svelte support for this is planned for later, and I cannot wait 😭😭
There are always some tedious parts you have to do manually for your UI components, so I can probably see myself using this at some point, looks pretty neat!
this could cut my headache meds in half just on the css stuff alone. I'm gonna give it a fair shake when i'll get on some react development later this year.
0:47 As someone who used Wordpress and Elementor extensively before fully learning how to code I felt these words to my soul.
What year is it again?
Best visual editor yet ! I like it because it simply interops with existing coding tools instead of trying to replace it. I thinks it’s biggest advantage is that it lets you get into the actual product building really fast without wasting those precious few minutes setting up. It would also save a few seconds by not having to switch context from your code editor and browser constantly. Overall it will provide productivity boosts (maybe around 5%). However I do if it can support more complex things like monorepos, nextjs, page transitions etc
Brings me back to Netscape Composer. Never again.
EDIT: Okay, this is better than that 😆
I have to admit that it was actually the first time in my 30-year life that I heard someone pronounce 'WYSIWYG'.
Finally! I tried out a tool before getting a fireship video about it.
This on my path is progress! Hurray!!
I love when someone tries to make these kind of tools. Someone out there is trying to make cool stuff that defies developers egos
Really better than the currently known solutions (Figma). But, could be better with VSCode extension.
As far as I know Figma is totally a different thing compared to this.
@Lalan Desai true, any other software which is similar to this?
@@ugotisa i would say webflow is somewhat similar, but its is not really for interactivity
Bootstrap studio and dreamweaver is the closest comparison imo
@@ugotisa There was Bootstrap Studio. I don't know if it is still in development or they abandoned the project.
Is there one like this for React Native?
Yes, we definitely needed that
@@amjed-ali-k I had heard of BuilderX but I think its has not been updated in a LONG time
wow this is amazing i will definitely try this later
as a beginner, this will be extremely helpful for learning good CSS styling intuition. the setup reminds me a lot of XCode’s UI sidebar.
This will be extremely useful for UI design, prototyping, and templating. So you don't need to replicate Figma models piece by piece in a React app. Teach the designer how to use this and let them design their stuff. You as a dev just think about the rest of the code (the behavior of the UI).
Or if you're just making a small tool, this avoids wasting time in UI design.
I don't think it will be widely adopted
1. Frontend dev is very fragmented with lots of frameworks "react, svelte, vue, angular,..." and many diff styling frameworks bootstrap, mui, tailwind,..
2. For a developer with a good editor, intellisense, live preview,.. It's much easier to stick to the keyboard and do the changes instead of having to switch constantly between keyboard and mouse
3. CSS is massive trying to put It's attributes in a UI will make it complex for most experienced devs who can just type the attributes instead trying to figure out where it's located in the UI
Really cool, im going to be trying it
Learning to be a web dev myself, and this is just what I need to learn it well. Mainly coz I suck at UI elements
This looks like it slows down development a lot , hmr and a 2nd monitor to see your browser seems like less hassle. You need to know css anyway
this nobody is talking about this, you cant do no-code without knowing how to code
Yeah, that was my first thought as well that this would just slow down the process quite a bit.
don't bother figuring it out...chatGPT will do it for you in a couple years.
Just came in time, thanks. Working on a React Project with TypeScript and SCSS.
This is really cool tbh and like him I was kinda sketchy and distasteful about it but now I'm actually really looking forward to seeing it be expanded to other frameworks.
me before realising you need to know typescript: 😀
me now: 😑
JS -> TS = 🙂
TS -> Rust = 😎
Seems long.
Kind of thing I would build myself and think it's really cool, and use it for jobs that I do for people, but then try to explain it to someone else and realise that it is esoteric in that it comes down to how you prefer to code.
My current setup with multiple monitors with the inspector window on a dedicated monitor, ide on main screen and browser window on another. I can work fast in that regard.
Tools like the drop shadow slider is cool but then how fast is it compared to googling "CSS drop shadow creater". Not much in it for me. So to learn a whole new way of doing something in a world where they could stop developing it in a year's time is not appealing to me.
That aside, as I said before, if I made this I would be pumped and would love to show it to people.
Amazing. I was thinking of building a visual editor and here it is lol
I just went through this kind of process in JavaFX and its scene builder. It was a pain to use but it seemed a very good idea. It's really nice I can see this done properly. Can't wait to have this in Figma.
What’s more painful than seeing you favourite youtuber promoting a sh*t product
Why shit?
Raise your hand if you've been watching Fireship for a long time🤚
✋
spam
will definitely give it a try
I recently got started with React, so this is honestly fairly interesting to me
ok my nigga
honestly, this seems overcomplicated for something that was supposed to make things easier
Exactly what I thought, feels like it's adding an extra layer in development when I don't really buy how much it can enhance/speed up the processes
Neat. Imma try this once Angular is supported.
that's so cool!
I remember writing code in notepad when I started learning web dev about 10 years ago 😀
Seems too complicated for sites that can be built via Squarespace and such and too simple to actually make a decently sized interactive app.
A GUI? _Only fake programmers use that._ /s
Wow, this is going to be a game changer for me!
Damn, this so cool! Time to try wix again!
I don't like these editors. You need to memorize how to click out everything in IDE instead of just writing code.
In my opinion, for experience developers, it's a waste of time. In some cases for beginners it could be fine.
I am due to start a React project as part of my course soon and will give this a try :)
I was looking for something like this ❤❤
We need this as a plugin in popular editors & ides.
no wayyy. I was literally trying to find some free plugin for figma that does this. You are a mind reader I swear.
we need more tutorials on this its amazing!!
Options are always nice to have.
nice thing to finally have. i would love to have visual tool, where i can do a quick blockout of my app, and after that aplly featchures like animations and other mechanics in code. looking forward to this thing. thank you
I am more of a visual coder and I think this will be a great tool to add to my arsenal, I am really impressed by codux. The problem is, it does seem to read my current React projects, its probably a problem with my file structure. Otherwise great job guys and please also make more comprehensive tutorials.