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

https://discord.gg/fireship

🔗 Resources

Codux https://codux.hopp.to/fireship
I tried 10 code editors https://youtu.be/8PhdfcX9tG0
VS Code Tips https://youtu.be/ifTF3ags0XI

🔥 Get More Content - Upgrade to PRO

Upgrade at https://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
2024-02-04T05:07:48.018Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
67d2258e-a807-4c67-8492-0f95052530b0
f674d9778adc9fef60edd7a82e83ffa3e9d13bd668773859ac67a7aaef6321cb
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
When I first started to learn web development, I paid $400 for a CD of Adobe Dreamweaver.
Unlike the text editors we use today, what you see is what you get.
WYSIWYGs have been around forever.
Visual Basic from Windows came out 30 years ago, game developers write code by dragging and popping in tools like Unreal, and mobile IDs like Android Studio always keep the UI by your side.
But on the web, we choose to write most of our code with a blindfold on.
I think this is due to the challenge of responsive designed during the browser wars, but those days are mostly behind us.
In today's video, we'll build an image carousel inspired by Airbnb's website using a visual IDE called codecs, created by Wix, the sponsor of this video, that brings drag and drop productivity to React apps.
As web developer myself, I was a bit skeptical to try it, but what I found is that it can dramatically simplify certain jobs, and does so in a noninvasive way.
One thing I've always hated about visual tools is they tend to create code that you don't understand, but that's not the case with codecs.
It works in tandem with Versus Code while providing a robust visual they are on top of your code.
It'll be easier if I just show you, so let's take a look at what we're building today.
We have a collection of cards for various Airbnbs, which are made responsive with CSS Rit, each card has its own collection of images, which can be rotated through by clicking this button.
Nothing too crazy, but the way we'll build this is like nothing you've ever seen before when it comes to React development.
The first step is to download it from the website, and it's entirely free by the way, then create a new project.
You have the option to import an existing project.
The only requirement is that it uses TypeScript and either CSS modules, Sass, or Stylable for your styling.
The main thing I don't like about this editor is that it only supports React.
I would love a tool like this for Svelte, Vue, Angular, and so on.
In any case, I'm gonna start from scratch and go with the built in Vite template.
After after it creates and installs the dependencies, you'll notice it creates a board.
A board is just a component itself that allows you to isolate your own components, very similar to a tool like Storybook, if we go ahead and click on a board, that'll bring us into the main editor.
Down here at the bottom, it contains the code for that board.
Again, it's just a component that, in this case, renders the app component.
There's a lot to talk about here, but, first, I wanna back up.
Back on there's the app component.
There's a lot to talk about here, but first, I wanna back up.
Back on the home tab, you'll notice a few other icons here in the bottom left corner like the file explorer to look at the actual files in this project, which can be edited just like you would in Versus Code with syntax highlighting and code completion.
And then you also have a full Git integration as well, where you can easily make and revert commits as needed.
What's important to understand though is that this is not trying to be a replacement for Versus Code, but rather it complements if we go back into the board, you'll notice this little menu here next to the component that allows us to open it directly in Versus Code.
Looking closer at the file structure, you'll notice a folder named codex.
This contains any boards or templates that aren't part of your main application.
There's also a codex config file that can modify its behavior, but the cool thing is that anything you edit in the project in Versus Code will be instantly reflected in codecs.
As you can see here, I've got the app component open, but I wanna get rid of all this boiler played.
As I go through and delete elements and save the file, it's instantly updated in the codecs UI.
But here's where things start to get fun.
If we go into codecs and click on a component, it brings up the editor, which gives us a hierarchy of elements in the DOM.
If we click on one, its bounding box is highlighted in the UI, which is useful, but we can also add new elements to the DOM by clicking the add button.
And that brings us an entire list of all the possibilities.
Personally, I find this extremely useful for building complex forms because we can just drag and drop all the form elements we need and rearrange them, which is far more efficient than trying to do that in code no matter how good you are in BIM.
Then on the other side of the screen, properties on any element can be modified.
We can easily filter and update them here, and it will modify the code automatically.
That's pretty cool, but now it's time to build our first yeah, component.
Back in the home screen, I'll go ahead and click add, followed by new component.
We'll give it a name of b and b card, which will represent our image carousel.
It's also worth noting that you can create custom templates, if you find yourself implementing the same patterns in multiple components.
Once created, you'll notice back in the home tab that it also creates a new board for us, which allows us to develop this component in isolation.
Now go to the component and click the pencil icon to bring up its code.
Notice how we have a TypeScript interface here called b and b card props.
When we add props to this interface, we can automatically start using them in codecs from the properties panel, and that's why it's required to use TypeScript when using codecs.
For each one of these cards will need a title, a price, and an array of image URLs.
Now go back to the board and click on that component, and we can modify its props right here to give it some dummy data.
To build this card will first structure out its elements, delete the default text, then drop in a div below the root.
That'll be our main card.
Then inside that div, we have 2 other divs, the first one for the carousel and the second one for the main content below the images.
Now in the top div, we can add at a dummy image for now.
And then in the bottom div, we can drag in a heading as well as a paragraph, and then we can rearrange these elements as needed by simply and dropping.
And just like that, we have a basic card, but it's lacking in style.
Luckily, codecs has an awesome style editor, which might be my favorite feature of all.
Go ahead and click on the outer then on the right side, you'll see a couple of other icons.
Computed styles will give you a breakdown of all the styles that currently apply to that element.
This is huge because I always find myself going back and or in the browser dev tools, you look at computed styles.
It's extremely convenient to have this information directly in your IDE.
Now click on the paintbrush to go to the style editor.
Click plus to add a new class to this div, and give it a name of card.
That will add the card class to our chosen CSS module and also apply it to the div in the code.
Then the CSS editor is amazing.
We can filter any CSS if we know what its name is, or we can go down here and do everything visually.
Like, I'll go ahead and make it a flex box, make it flow vertically, set the overflow to hidden, and set a max width of 300 pixels.
That's convenient, but it also has some pretty advanced tools built into the editor.
Like, when it comes to shadows, the shadow editor allows you to change all the various properties which is extremely difficult and tedious to do in code, but now it's time to make this component interactive.
Back in the elements panel, I'm going to add another div inside the carousel along with a couple of buttons inside of it.
When pressed, these buttons should rotate between the images in the carousel.
We could write all this code in codex, but At this point, you may prefer to switch over to Versus Code.
We'll first destructure the props from our interface and then use that to interpolate dynamic data like the title and the price.
From there, we can add some state for the current index of the image that we want to show in the carousel.
After which, we can define a couple of functions like previous image and next image to change the index in a specific direction.
Now let's go ahead and stop there and go back to codecs.
If we look at the component, you can now see it's using our dynamic data that we created earlier.
And if you look in the elements tab, you'll see a gray icon here that tells us it's an expression or a value computed in the React JSX code.
But one thing we forgot to do in our code is bind our carousel functions to the buttons.
Select a button from the elements tab, then go to the properties panel and find the on click property.
Check that box and it will add an on click event handler to that button, then all we have to do is go down to the code and add the appropriate function name.
Then the final step is to update the default image with the current index of the images array.
At this point, click on the eyeball to preview the app here in Kodux, and it should toggle between images in the carousel.
But now that we have a working component, we can put it to use in other places in the application.
For example, if we go back to the app board, we can now drag and drop our custom component there.
It shows an error initially because it's missing the required props.
In my full demo, I took some dummy data and looped over it to show multiple carousels and then style them with CSS Grid here in codecs.
The cool thing about this is I can change the size of the canvas to check its responsiveness without ever having to leave the IDE.
Overall, codecs is a very new tool and won't replace your main editor, but it has some features that I think really any developer could take advantage of whether you're a beginner or highly experienced, but I'm curious to know what you guys think.
Let me know if this is a tool you would actually use in the comments.
Thanks for watching, and I will see you in the next one.

Speaker 0: When I first started to learn web development, I paid $400 for a CD of Adobe Dreamweaver. Unlike the text editors we use today, what you see is what you get. WYSIWYGs have been around forever. Visual Basic from Windows came out 30 years ago, game developers write code by dragging and popping in tools like Unreal, and mobile IDs like Android Studio always keep the UI by your side. But on the web, we choose to write most of our code with a blindfold on.

I think this is due to the challenge of responsive designed during the browser wars, but those days are mostly behind us. In today's video, we'll build an image carousel inspired by Airbnb's website using a visual IDE called codecs, created by Wix, the sponsor of this video, that brings drag and drop productivity to React apps. As web developer myself, I was a bit skeptical to try it, but what I found is that it can dramatically simplify certain jobs, and does so in a noninvasive way. One thing I've always hated about visual tools is they tend to create code that you don't understand, but that's not the case with codecs. It works in tandem with Versus Code while providing a robust visual they are on top of your code.

It'll be easier if I just show you, so let's take a look at what we're building today. We have a collection of cards for various Airbnbs, which are made responsive with CSS Rit, each card has its own collection of images, which can be rotated through by clicking this button. Nothing too crazy, but the way we'll build this is like nothing you've ever seen before when it comes to React development. The first step is to download it from the website, and it's entirely free by the way, then create a new project. You have the option to import an existing project.

The only requirement is that it uses TypeScript and either CSS modules, Sass, or Stylable for your styling. The main thing I don't like about this editor is that it only supports React. I would love a tool like this for Svelte, Vue, Angular, and so on. In any case, I'm gonna start from scratch and go with the built in Vite template. After after it creates and installs the dependencies, you'll notice it creates a board.

A board is just a component itself that allows you to isolate your own components, very similar to a tool like Storybook, if we go ahead and click on a board, that'll bring us into the main editor. Down here at the bottom, it contains the code for that board. Again, it's just a component that, in this case, renders the app component. There's a lot to talk about here, but, first, I wanna back up. Back on there's the app component.

There's a lot to talk about here, but first, I wanna back up. Back on the home tab, you'll notice a few other icons here in the bottom left corner like the file explorer to look at the actual files in this project, which can be edited just like you would in Versus Code with syntax highlighting and code completion. And then you also have a full Git integration as well, where you can easily make and revert commits as needed. What's important to understand though is that this is not trying to be a replacement for Versus Code, but rather it complements if we go back into the board, you'll notice this little menu here next to the component that allows us to open it directly in Versus Code. Looking closer at the file structure, you'll notice a folder named codex.

This contains any boards or templates that aren't part of your main application. There's also a codex config file that can modify its behavior, but the cool thing is that anything you edit in the project in Versus Code will be instantly reflected in codecs. As you can see here, I've got the app component open, but I wanna get rid of all this boiler played. As I go through and delete elements and save the file, it's instantly updated in the codecs UI. But here's where things start to get fun.

If we go into codecs and click on a component, it brings up the editor, which gives us a hierarchy of elements in the DOM. If we click on one, its bounding box is highlighted in the UI, which is useful, but we can also add new elements to the DOM by clicking the add button. And that brings us an entire list of all the possibilities. Personally, I find this extremely useful for building complex forms because we can just drag and drop all the form elements we need and rearrange them, which is far more efficient than trying to do that in code no matter how good you are in BIM. Then on the other side of the screen, properties on any element can be modified.

We can easily filter and update them here, and it will modify the code automatically. That's pretty cool, but now it's time to build our first yeah, component. Back in the home screen, I'll go ahead and click add, followed by new component. We'll give it a name of b and b card, which will represent our image carousel. It's also worth noting that you can create custom templates, if you find yourself implementing the same patterns in multiple components.

Once created, you'll notice back in the home tab that it also creates a new board for us, which allows us to develop this component in isolation. Now go to the component and click the pencil icon to bring up its code. Notice how we have a TypeScript interface here called b and b card props. When we add props to this interface, we can automatically start using them in codecs from the properties panel, and that's why it's required to use TypeScript when using codecs. For each one of these cards will need a title, a price, and an array of image URLs.

Now go back to the board and click on that component, and we can modify its props right here to give it some dummy data. To build this card will first structure out its elements, delete the default text, then drop in a div below the root. That'll be our main card. Then inside that div, we have 2 other divs, the first one for the carousel and the second one for the main content below the images. Now in the top div, we can add at a dummy image for now.

And then in the bottom div, we can drag in a heading as well as a paragraph, and then we can rearrange these elements as needed by simply and dropping. And just like that, we have a basic card, but it's lacking in style. Luckily, codecs has an awesome style editor, which might be my favorite feature of all. Go ahead and click on the outer then on the right side, you'll see a couple of other icons. Computed styles will give you a breakdown of all the styles that currently apply to that element.

This is huge because I always find myself going back and or in the browser dev tools, you look at computed styles. It's extremely convenient to have this information directly in your IDE. Now click on the paintbrush to go to the style editor. Click plus to add a new class to this div, and give it a name of card. That will add the card class to our chosen CSS module and also apply it to the div in the code.

Then the CSS editor is amazing. We can filter any CSS if we know what its name is, or we can go down here and do everything visually. Like, I'll go ahead and make it a flex box, make it flow vertically, set the overflow to hidden, and set a max width of 300 pixels. That's convenient, but it also has some pretty advanced tools built into the editor. Like, when it comes to shadows, the shadow editor allows you to change all the various properties which is extremely difficult and tedious to do in code, but now it's time to make this component interactive.

Back in the elements panel, I'm going to add another div inside the carousel along with a couple of buttons inside of it. When pressed, these buttons should rotate between the images in the carousel. We could write all this code in codex, but At this point, you may prefer to switch over to Versus Code. We'll first destructure the props from our interface and then use that to interpolate dynamic data like the title and the price. From there, we can add some state for the current index of the image that we want to show in the carousel.

After which, we can define a couple of functions like previous image and next image to change the index in a specific direction. Now let's go ahead and stop there and go back to codecs. If we look at the component, you can now see it's using our dynamic data that we created earlier. And if you look in the elements tab, you'll see a gray icon here that tells us it's an expression or a value computed in the React JSX code. But one thing we forgot to do in our code is bind our carousel functions to the buttons.

Select a button from the elements tab, then go to the properties panel and find the on click property. Check that box and it will add an on click event handler to that button, then all we have to do is go down to the code and add the appropriate function name. Then the final step is to update the default image with the current index of the images array. At this point, click on the eyeball to preview the app here in Kodux, and it should toggle between images in the carousel. But now that we have a working component, we can put it to use in other places in the application.

For example, if we go back to the app board, we can now drag and drop our custom component there. It shows an error initially because it's missing the required props. In my full demo, I took some dummy data and looped over it to show multiple carousels and then style them with CSS Grid here in codecs. The cool thing about this is I can change the size of the canvas to check its responsiveness without ever having to leave the IDE. Overall, codecs is a very new tool and won't replace your main editor, but it has some features that I think really any developer could take advantage of whether you're a beginner or highly experienced, but I'm curious to know what you guys think.

Let me know if this is a tool you would actually use in the comments. Thanks for watching, and I will see you in the next one.
When I first started to learn web development, I paid $400 for a CD of Adobe Dreamweaver. Unlike the text editors we use today, what you see is what you get. WYSIWYGs have been around forever. Visual Basic from Windows came out 30 years ago, game developers write code by dragging and popping in tools like Unreal, and mobile IDs like Android Studio always keep the UI by your side. But on the web, we choose to write most of our code with a blindfold on. I think this is due to the challenge of responsive designed during the browser wars, but those days are mostly behind us. In today's video, we'll build an image carousel inspired by Airbnb's website using a visual IDE called codecs, created by Wix, the sponsor of this video, that brings drag and drop productivity to React apps. As web developer myself, I was a bit skeptical to try it, but what I found is that it can dramatically simplify certain jobs, and does so in a noninvasive way.
animation
graphic design
visualization
software development
multimedia
robotics
advertising
video gaming
One thing I've always hated about visual tools is they tend to create code that you don't understand, but that's not the case with codecs. It works in tandem with Versus Code while providing a robust visual they are on top of your code. It'll be easier if I just show you, so let's take a look at what we're building today.
graphic design
visualization
We have a collection of cards for various Airbnbs, which are made responsive with CSS Rit, each card has its own collection of images, which can be rotated through by clicking this button.
Nothing too crazy, but the way we'll build this is like nothing you've ever seen before when it comes to React development. The first step is to download it from the website, and it's entirely free by the way, then create a new project. You have the option to import an existing project. The only requirement is that it uses TypeScript and either CSS modules, Sass, or Stylable for your styling. The main thing I don't like about this editor is that it only supports React. I would love a tool like this for Svelte, Vue, Angular, and so on. In any case, I'm gonna start from scratch and go with the built in Vite template. After after it creates and installs the dependencies, you'll notice it creates a board.
graphic design
software
software development
A board is just a component itself that allows you to isolate your own components, very similar to a tool like Storybook, if we go ahead and click on a board, that'll bring us into the main editor. Down here at the bottom, it contains the code for that board. Again, it's just a component that, in this case, renders the app component. There's a lot to talk about here, but, first, I wanna back up. Back on there's the app component. There's a lot to talk about here, but first, I wanna back up. Back on the home tab, you'll notice a few other icons here in the bottom left corner like the file explorer to look at the actual files in this project, which can be edited just like you would in Versus Code with syntax highlighting and code completion.
And then you also have a full Git integration as well, where you can easily make and revert commits as needed. What's important to understand though is that this is not trying to be a replacement for Versus Code, but rather it complements if we go back into the board, you'll notice this little menu here next to the component that allows us to open it directly in Versus Code.
software development
software
Looking closer at the file structure, you'll notice a folder named codex. This contains any boards or templates that aren't part of your main application.
There's also a codex config file that can modify its behavior, but the cool thing is that anything you edit in the project in Versus Code will be instantly reflected in codecs. As you can see here, I've got the app component open, but I wanna get rid of all this boiler played. As I go through and delete elements and save the file, it's instantly updated in the codecs UI. But here's where things start to get fun. If we go into codecs and click on a component, it brings up the editor, which gives us a hierarchy of elements in the DOM.
software
programming
If we click on one, its bounding box is highlighted in the UI, which is useful, but we can also add new elements to the DOM by clicking the add button. And that brings us an entire list of all the possibilities. Personally, I find this extremely useful for building complex forms because we can just drag and drop all the form elements we need and rearrange them, which is far more efficient than trying to do that in code no matter how good you are in BIM.
Then on the other side of the screen, properties on any element can be modified. We can easily filter and update them here, and it will modify the code automatically. That's pretty cool, but now it's time to build our first yeah, component. Back in the home screen, I'll go ahead and click add, followed by new component. We'll give it a name of b and b card, which will represent our image carousel. It's also worth noting that you can create custom templates, if you find yourself implementing the same patterns in multiple components. Once created, you'll notice back in the home tab that it also creates a new board for us, which allows us to develop this component in isolation.
home improvement
graphic design
crafts
visualization
Now go to the component and click the pencil icon to bring up its code. Notice how we have a TypeScript interface here called b and b card props. When we add props to this interface, we can automatically start using them in codecs from the properties panel, and that's why it's required to use TypeScript when using codecs. For each one of these cards will need a title, a price, and an array of image URLs. Now go back to the board and click on that component, and we can modify its props right here to give it some dummy data. To build this card will first structure out its elements, delete the default text, then drop in a div below the root. That'll be our main card.
Then inside that div, we have 2 other divs, the first one for the carousel and the second one for the main content below the images. Now in the top div, we can add at a dummy image for now. And then in the bottom div, we can drag in a heading as well as a paragraph, and then we can rearrange these elements as needed by simply and dropping.
animation
And just like that, we have a basic card, but it's lacking in style. Luckily, codecs has an awesome style editor, which might be my favorite feature of all. Go ahead and click on the outer then on the right side, you'll see a couple of other icons. Computed styles will give you a breakdown of all the styles that currently apply to that element. This is huge because I always find myself going back and or in the browser dev tools, you look at computed styles.
graphic design
fashion
cosmetics
It's extremely convenient to have this information directly in your IDE. Now click on the paintbrush to go to the style editor. Click plus to add a new class to this div, and give it a name of card. That will add the card class to our chosen CSS module and also apply it to the div in the code. Then the CSS editor is amazing. We can filter any CSS if we know what its name is, or we can go down here and do everything visually. Like, I'll go ahead and make it a flex box, make it flow vertically, set the overflow to hidden, and set a max width of 300 pixels.
That's convenient, but it also has some pretty advanced tools built into the editor. Like, when it comes to shadows, the shadow editor allows you to change all the various properties which is extremely difficult and tedious to do in code, but now it's time to make this component interactive. Back in the elements panel, I'm going to add another div inside the carousel along with a couple of buttons inside of it. When pressed, these buttons should rotate between the images in the carousel. We could write all this code in codex, but At this point, you may prefer to switch over to Versus Code. We'll first destructure the props from our interface and then use that to interpolate dynamic data like the title and the price. From there, we can add some state for the current index of the image that we want to show in the carousel. After which, we can define a couple of functions like previous image and next image to change the index in a specific direction. Now let's go ahead and stop there and go back to codecs. If we look at the component, you can now see it's using our dynamic data that we created earlier. And if you look in the elements tab, you'll see a gray icon here that tells us it's an expression or a value computed in the React JSX code.
modeling
graphic design
animation
visualization
programming
software
But one thing we forgot to do in our code is bind our carousel functions to the buttons. Select a button from the elements tab, then go to the properties panel and find the on click property. Check that box and it will add an on click event handler to that button, then all we have to do is go down to the code and add the appropriate function name.
Then the final step is to update the default image with the current index of the images array. At this point, click on the eyeball to preview the app here in Kodux, and it should toggle between images in the carousel. But now that we have a working component, we can put it to use in other places in the application.
animation
For example, if we go back to the app board, we can now drag and drop our custom component there.
It shows an error initially because it's missing the required props. In my full demo, I took some dummy data and looped over it to show multiple carousels and then style them with CSS Grid here in codecs. The cool thing about this is I can change the size of the canvas to check its responsiveness without ever having to leave the IDE.
animation
Overall, codecs is a very new tool and won't replace your main editor, but it has some features that I think really any developer could take advantage of whether you're a beginner or highly experienced, but I'm curious to know what you guys think. Let me know if this is a tool you would actually use in the comments.
software development
software
Thanks for watching, and I will see you in the next one.
When I first started to learn web development, I paid $400 for a CD of Adobe Dreamweaver. Unlike the text editors we use today, what you see is what you get. WYSIWYGs have been around forever. Visual Basic from Windows came out 30 years ago, game developers write code by dragging and popping in tools like Unreal, and mobile IDs like Android Studio always keep the UI by your side. But on the web, we choose to write most of our code with a blindfold on. I think this is due to the challenge of responsive designed during the browser wars, but those days are mostly behind us. In today's video, we'll build an image carousel inspired by Airbnb's website using a visual IDE called codecs, created by Wix, the sponsor of this video, that brings drag and drop productivity to React apps. As web developer myself, I was a bit skeptical to try it, but what I found is that it can dramatically simplify certain jobs, and does so in a noninvasive way. One thing I've always hated about visual tools is they tend to create code that you don't understand, but that's not the case with codecs. It works in tandem with Versus Code while providing a robust visual they are on top of your code. It'll be easier if I just show you, so let's take a look at what we're building today. We have a collection of cards for various Airbnbs, which are made responsive with CSS Rit, each card has its own collection of images, which can be rotated through by clicking this button. Nothing too crazy, but the way we'll build this is like nothing you've ever seen before when it comes to React development. The first step is to download it from the website, and it's entirely free by the way, then create a new project. You have the option to import an existing project. The only requirement is that it uses TypeScript and either CSS modules, Sass, or Stylable for your styling. The main thing I don't like about this editor is that it only supports React. I would love a tool like this for Svelte, Vue, Angular, and so on. In any case, I'm gonna start from scratch and go with the built in Vite template. After after it creates and installs the dependencies, you'll notice it creates a board. A board is just a component itself that allows you to isolate your own components, very similar to a tool like Storybook, if we go ahead and click on a board, that'll bring us into the main editor. Down here at the bottom, it contains the code for that board. Again, it's just a component that, in this case, renders the app component. There's a lot to talk about here, but, first, I wanna back up. Back on there's the app component. There's a lot to talk about here, but first, I wanna back up. Back on the home tab, you'll notice a few other icons here in the bottom left corner like the file explorer to look at the actual files in this project, which can be edited just like you would in Versus Code with syntax highlighting and code completion. And then you also have a full Git integration as well, where you can easily make and revert commits as needed. What's important to understand though is that this is not trying to be a replacement for Versus Code, but rather it complements if we go back into the board, you'll notice this little menu here next to the component that allows us to open it directly in Versus Code. Looking closer at the file structure, you'll notice a folder named codex. This contains any boards or templates that aren't part of your main application. There's also a codex config file that can modify its behavior, but the cool thing is that anything you edit in the project in Versus Code will be instantly reflected in codecs. As you can see here, I've got the app component open, but I wanna get rid of all this boiler played. As I go through and delete elements and save the file, it's instantly updated in the codecs UI. But here's where things start to get fun. If we go into codecs and click on a component, it brings up the editor, which gives us a hierarchy of elements in the DOM. If we click on one, its bounding box is highlighted in the UI, which is useful, but we can also add new elements to the DOM by clicking the add button. And that brings us an entire list of all the possibilities. Personally, I find this extremely useful for building complex forms because we can just drag and drop all the form elements we need and rearrange them, which is far more efficient than trying to do that in code no matter how good you are in BIM. Then on the other side of the screen, properties on any element can be modified. We can easily filter and update them here, and it will modify the code automatically. That's pretty cool, but now it's time to build our first yeah, component. Back in the home screen, I'll go ahead and click add, followed by new component. We'll give it a name of b and b card, which will represent our image carousel. It's also worth noting that you can create custom templates, if you find yourself implementing the same patterns in multiple components. Once created, you'll notice back in the home tab that it also creates a new board for us, which allows us to develop this component in isolation. Now go to the component and click the pencil icon to bring up its code. Notice how we have a TypeScript interface here called b and b card props. When we add props to this interface, we can automatically start using them in codecs from the properties panel, and that's why it's required to use TypeScript when using codecs. For each one of these cards will need a title, a price, and an array of image URLs. Now go back to the board and click on that component, and we can modify its props right here to give it some dummy data. To build this card will first structure out its elements, delete the default text, then drop in a div below the root. That'll be our main card. Then inside that div, we have 2 other divs, the first one for the carousel and the second one for the main content below the images. Now in the top div, we can add at a dummy image for now. And then in the bottom div, we can drag in a heading as well as a paragraph, and then we can rearrange these elements as needed by simply and dropping. And just like that, we have a basic card, but it's lacking in style. Luckily, codecs has an awesome style editor, which might be my favorite feature of all. Go ahead and click on the outer then on the right side, you'll see a couple of other icons. Computed styles will give you a breakdown of all the styles that currently apply to that element. This is huge because I always find myself going back and or in the browser dev tools, you look at computed styles. It's extremely convenient to have this information directly in your IDE. Now click on the paintbrush to go to the style editor. Click plus to add a new class to this div, and give it a name of card. That will add the card class to our chosen CSS module and also apply it to the div in the code. Then the CSS editor is amazing. We can filter any CSS if we know what its name is, or we can go down here and do everything visually. Like, I'll go ahead and make it a flex box, make it flow vertically, set the overflow to hidden, and set a max width of 300 pixels. That's convenient, but it also has some pretty advanced tools built into the editor. Like, when it comes to shadows, the shadow editor allows you to change all the various properties which is extremely difficult and tedious to do in code, but now it's time to make this component interactive. Back in the elements panel, I'm going to add another div inside the carousel along with a couple of buttons inside of it. When pressed, these buttons should rotate between the images in the carousel. We could write all this code in codex, but At this point, you may prefer to switch over to Versus Code. We'll first destructure the props from our interface and then use that to interpolate dynamic data like the title and the price. From there, we can add some state for the current index of the image that we want to show in the carousel. After which, we can define a couple of functions like previous image and next image to change the index in a specific direction. Now let's go ahead and stop there and go back to codecs. If we look at the component, you can now see it's using our dynamic data that we created earlier. And if you look in the elements tab, you'll see a gray icon here that tells us it's an expression or a value computed in the React JSX code. But one thing we forgot to do in our code is bind our carousel functions to the buttons. Select a button from the elements tab, then go to the properties panel and find the on click property. Check that box and it will add an on click event handler to that button, then all we have to do is go down to the code and add the appropriate function name. Then the final step is to update the default image with the current index of the images array. At this point, click on the eyeball to preview the app here in Kodux, and it should toggle between images in the carousel. But now that we have a working component, we can put it to use in other places in the application. For example, if we go back to the app board, we can now drag and drop our custom component there. It shows an error initially because it's missing the required props. In my full demo, I took some dummy data and looped over it to show multiple carousels and then style them with CSS Grid here in codecs. The cool thing about this is I can change the size of the canvas to check its responsiveness without ever having to leave the IDE. Overall, codecs is a very new tool and won't replace your main editor, but it has some features that I think really any developer could take advantage of whether you're a beginner or highly experienced, but I'm curious to know what you guys think. Let me know if this is a tool you would actually use in the comments. Thanks for watching, and I will see you in the next one.
When
when
I
i
first
first
started
started
to
to
learn
learn
web
web
development,
development
I
i
paid
paid
$400
$400
for
for
a
a
CD
cd
of
of
Adobe
adobe
Dreamweaver.
dreamweaver
Unlike
unlike
the
the
text
text
editors
editors
we
we
use
use
today,
today
what
what
you
you
see
see
is
is
what
what
you
you
get.
get
WYSIWYGs
wysiwygs
have
have
been
been
around
around
forever.
forever
Visual
visual
Basic
basic
from
from
Windows
windows
came
came
out
out
30
30
years
years
ago,
ago
game
game
developers
developers
write
write
code
code
by
by
dragging
dragging
and
and
popping
popping
in
in
tools
tools
like
like
Unreal,
unreal
and
and
mobile
mobile
IDs
ids
like
like
Android
android
Studio
studio
always
always
keep
keep
the
the
UI
ui
by
by
your
your
side.
side
But
but
on
on
the
the
web,
web
we
we
choose
choose
to
to
write
write
most
most
of
of
our
our
code
code
with
with
a
a
blindfold
blindfold
on.
on
I
i
think
think
this
this
is
is
due
due
to
to
the
the
challenge
challenge
of
of
responsive
responsive
designed
designed
during
during
the
the
browser
browser
wars,
wars
but
but
those
those
days
days
are
are
mostly
mostly
behind
behind
us.
us
In
in
today's
today's
video,
video
we'll
we'll
build
build
an
an
image
image
carousel
carousel
inspired
inspired
by
by
Airbnb's
airbnb's
website
website
using
using
a
a
visual
visual
IDE
ide
called
called
codecs,
codecs
created
created
by
by
Wix,
wix
the
the
sponsor
sponsor
of
of
this
this
video,
video
that
that
brings
brings
drag
drag
and
and
drop
drop
productivity
productivity
to
to
React
react
apps.
apps
As
as
web
web
developer
developer
myself,
myself
I
i
was
was
a
a
bit
bit
skeptical
skeptical
to
to
try
try
it,
it
but
but
what
what
I
i
found
found
is
is
that
that
it
it
can
can
dramatically
dramatically
simplify
simplify
certain
certain
jobs,
jobs
and
and
does
does
so
so
in
in
a
a
noninvasive
noninvasive
way.
way
One
one
thing
thing
I've
i've
always
always
hated
hated
about
about
visual
visual
tools
tools
is
is
they
they
tend
tend
to
to
create
create
code
code
that
that
you
you
don't
don't
understand,
understand
but
but
that's
that's
not
not
the
the
case
case
with
with
codecs.
codecs
It
it
works
works
in
in
tandem
tandem
with
with
Versus
versus
Code
code
while
while
providing
providing
a
a
robust
robust
visual
visual
they
they
are
are
on
on
top
top
of
of
your
your
code.
code
It'll
it'll
be
be
easier
easier
if
if
I
i
just
just
show
show
you,
you
so
so
let's
let's
take
take
a
a
look
look
at
at
what
what
we're
we're
building
building
today.
today
We
we
have
have
a
a
collection
collection
of
of
cards
cards
for
for
various
various
Airbnbs,
airbnbs
which
which
are
are
made
made
responsive
responsive
with
with
CSS
css
Rit,
rit
each
each
card
card
has
has
its
its
own
own
collection
collection
of
of
images,
images
which
which
can
can
be
be
rotated
rotated
through
through
by
by
clicking
clicking
this
this
button.
button
Nothing
nothing
too
too
crazy,
crazy
but
but
the
the
way
way
we'll
we'll
build
build
this
this
is
is
like
like
nothing
nothing
you've
you've
ever
ever
seen
seen
before
before
when
when
it
it
comes
comes
to
to
React
react
development.
development
The
the
first
first
step
step
is
is
to
to
download
download
it
it
from
from
the
the
website,
website
and
and
it's
it's
entirely
entirely
free
free
by
by
the
the
way,
way
then
then
create
create
a
a
new
new
project.
project
You
you
have
have
the
the
option
option
to
to
import
import
an
an
existing
existing
project.
project
The
the
only
only
requirement
requirement
is
is
that
that
it
it
uses
uses
TypeScript
typescript
and
and
either
either
CSS
css
modules,
modules
Sass,
sass
or
or
Stylable
stylable
for
for
your
your
styling.
styling
The
the
main
main
thing
thing
I
i
don't
don't
like
like
about
about
this
this
editor
editor
is
is
that
that
it
it
only
only
supports
supports
React.
react
I
i
would
would
love
love
a
a
tool
tool
like
like
this
this
for
for
Svelte,
svelte
Vue,
vue
Angular,
angular
and
and
so
so
on.
on
In
in
any
any
case,
case
I'm
i'm
gonna
gonna
start
start
from
from
scratch
scratch
and
and
go
go
with
with
the
the
built
built
in
in
Vite
vite
template.
template
After
after
after
after
it
it
creates
creates
and
and
installs
installs
the
the
dependencies,
dependencies
you'll
you'll
notice
notice
it
it
creates
creates
a
a
board.
board
A
a
board
board
is
is
just
just
a
a
component
component
itself
itself
that
that
allows
allows
you
you
to
to
isolate
isolate
your
your
own
own
components,
components
very
very
similar
similar
to
to
a
a
tool
tool
like
like
Storybook,
storybook
if
if
we
we
go
go
ahead
ahead
and
and
click
click
on
on
a
a
board,
board
that'll
that'll
bring
bring
us
us
into
into
the
the
main
main
editor.
editor
Down
down
here
here
at
at
the
the
bottom,
bottom
it
it
contains
contains
the
the
code
code
for
for
that
that
board.
board
Again,
again
it's
it's
just
just
a
a
component
component
that,
that
in
in
this
this
case,
case
renders
renders
the
the
app
app
component.
component
There's
there's
a
a
lot
lot
to
to
talk
talk
about
about
here,
here
but,
but
first,
first
I
i
wanna
wanna
back
back
up.
up
Back
back
on
on
there's
there's
the
the
app
app
component.
component
There's
there's
a
a
lot
lot
to
to
talk
talk
about
about
here,
here
but
but
first,
first
I
i
wanna
wanna
back
back
up.
up
Back
back
on
on
the
the
home
home
tab,
tab
you'll
you'll
notice
notice
a
a
few
few
other
other
icons
icons
here
here
in
in
the
the
bottom
bottom
left
left
corner
corner
like
like
the
the
file
file
explorer
explorer
to
to
look
look
at
at
the
the
actual
actual
files
files
in
in
this
this
project,
project
which
which
can
can
be
be
edited
edited
just
just
like
like
you
you
would
would
in
in
Versus
versus
Code
code
with
with
syntax
syntax
highlighting
highlighting
and
and
code
code
completion.
completion
And
and
then
then
you
you
also
also
have
have
a
a
full
full
Git
git
integration
integration
as
as
well,
well
where
where
you
you
can
can
easily
easily
make
make
and
and
revert
revert
commits
commits
as
as
needed.
needed
What's
what's
important
important
to
to
understand
understand
though
though
is
is
that
that
this
this
is
is
not
not
trying
trying
to
to
be
be
a
a
replacement
replacement
for
for
Versus
versus
Code,
code
but
but
rather
rather
it
it
complements
complements
if
if
we
we
go
go
back
back
into
into
the
the
board,
board
you'll
you'll
notice
notice
this
this
little
little
menu
menu
here
here
next
next
to
to
the
the
component
component
that
that
allows
allows
us
us
to
to
open
open
it
it
directly
directly
in
in
Versus
versus
Code.
code
Looking
looking
closer
closer
at
at
the
the
file
file
structure,
structure
you'll
you'll
notice
notice
a
a
folder
folder
named
named
codex.
codex
This
this
contains
contains
any
any
boards
boards
or
or
templates
templates
that
that
aren't
aren't
part
part
of
of
your
your
main
main
application.
application
There's
there's
also
also
a
a
codex
codex
config
config
file
file
that
that
can
can
modify
modify
its
its
behavior,
behavior
but
but
the
the
cool
cool
thing
thing
is
is
that
that
anything
anything
you
you
edit
edit
in
in
the
the
project
project
in
in
Versus
versus
Code
code
will
will
be
be
instantly
instantly
reflected
reflected
in
in
codecs.
codecs
As
as
you
you
can
can
see
see
here,
here
I've
i've
got
got
the
the
app
app
component
component
open,
open
but
but
I
i
wanna
wanna
get
get
rid
rid
of
of
all
all
this
this
boiler
boiler
played.
played
As
as
I
i
go
go
through
through
and
and
delete
delete
elements
elements
and
and
save
save
the
the
file,
file
it's
it's
instantly
instantly
updated
updated
in
in
the
the
codecs
codecs
UI.
ui
But
but
here's
here's
where
where
things
things
start
start
to
to
get
get
fun.
fun
If
if
we
we
go
go
into
into
codecs
codecs
and
and
click
click
on
on
a
a
component,
component
it
it
brings
brings
up
up
the
the
editor,
editor
which
which
gives
gives
us
us
a
a
hierarchy
hierarchy
of
of
elements
elements
in
in
the
the
DOM.
dom
If
if
we
we
click
click
on
on
one,
one
its
its
bounding
bounding
box
box
is
is
highlighted
highlighted
in
in
the
the
UI,
ui
which
which
is
is
useful,
useful
but
but
we
we
can
can
also
also
add
add
new
new
elements
elements
to
to
the
the
DOM
dom
by
by
clicking
clicking
the
the
add
add
button.
button
And
and
that
that
brings
brings
us
us
an
an
entire
entire
list
list
of
of
all
all
the
the
possibilities.
possibilities
Personally,
personally
I
i
find
find
this
this
extremely
extremely
useful
useful
for
for
building
building
complex
complex
forms
forms
because
because
we
we
can
can
just
just
drag
drag
and
and
drop
drop
all
all
the
the
form
form
elements
elements
we
we
need
need
and
and
rearrange
rearrange
them,
them
which
which
is
is
far
far
more
more
efficient
efficient
than
than
trying
trying
to
to
do
do
that
that
in
in
code
code
no
no
matter
matter
how
how
good
good
you
you
are
are
in
in
BIM.
bim
Then
then
on
on
the
the
other
other
side
side
of
of
the
the
screen,
screen
properties
properties
on
on
any
any
element
element
can
can
be
be
modified.
modified
We
we
can
can
easily
easily
filter
filter
and
and
update
update
them
them
here,
here
and
and
it
it
will
will
modify
modify
the
the
code
code
automatically.
automatically
That's
that's
pretty
pretty
cool,
cool
but
but
now
now
it's
it's
time
time
to
to
build
build
our
our
first
first
yeah,
yeah
component.
component
Back
back
in
in
the
the
home
home
screen,
screen
I'll
i'll
go
go
ahead
ahead
and
and
click
click
add,
add
followed
followed
by
by
new
new
component.
component
We'll
we'll
give
give
it
it
a
a
name
name
of
of
b
b
and
and
b
b
card,
card
which
which
will
will
represent
represent
our
our
image
image
carousel.
carousel
It's
it's
also
also
worth
worth
noting
noting
that
that
you
you
can
can
create
create
custom
custom
templates,
templates
if
if
you
you
find
find
yourself
yourself
implementing
implementing
the
the
same
same
patterns
patterns
in
in
multiple
multiple
components.
components
Once
once
created,
created
you'll
you'll
notice
notice
back
back
in
in
the
the
home
home
tab
tab
that
that
it
it
also
also
creates
creates
a
a
new
new
board
board
for
for
us,
us
which
which
allows
allows
us
us
to
to
develop
develop
this
this
component
component
in
in
isolation.
isolation
Now
now
go
go
to
to
the
the
component
component
and
and
click
click
the
the
pencil
pencil
icon
icon
to
to
bring
bring
up
up
its
its
code.
code
Notice
notice
how
how
we
we
have
have
a
a
TypeScript
typescript
interface
interface
here
here
called
called
b
b
and
and
b
b
card
card
props.
props
When
when
we
we
add
add
props
props
to
to
this
this
interface,
interface
we
we
can
can
automatically
automatically
start
start
using
using
them
them
in
in
codecs
codecs
from
from
the
the
properties
properties
panel,
panel
and
and
that's
that's
why
why
it's
it's
required
required
to
to
use
use
TypeScript
typescript
when
when
using
using
codecs.
codecs
For
for
each
each
one
one
of
of
these
these
cards
cards
will
will
need
need
a
a
title,
title
a
a
price,
price
and
and
an
an
array
array
of
of
image
image
URLs.
urls
Now
now
go
go
back
back
to
to
the
the
board
board
and
and
click
click
on
on
that
that
component,
component
and
and
we
we
can
can
modify
modify
its
its
props
props
right
right
here
here
to
to
give
give
it
it
some
some
dummy
dummy
data.
data
To
to
build
build
this
this
card
card
will
will
first
first
structure
structure
out
out
its
its
elements,
elements
delete
delete
the
the
default
default
text,
text
then
then
drop
drop
in
in
a
a
div
div
below
below
the
the
root.
root
That'll
that'll
be
be
our
our
main
main
card.
card
Then
then
inside
inside
that
that
div,
div
we
we
have
have
2
2
other
other
divs,
divs
the
the
first
first
one
one
for
for
the
the
carousel
carousel
and
and
the
the
second
second
one
one
for
for
the
the
main
main
content
content
below
below
the
the
images.
images
Now
now
in
in
the
the
top
top
div,
div
we
we
can
can
add
add
at
at
a
a
dummy
dummy
image
image
for
for
now.
now
And
and
then
then
in
in
the
the
bottom
bottom
div,
div
we
we
can
can
drag
drag
in
in
a
a
heading
heading
as
as
well
well
as
as
a
a
paragraph,
paragraph
and
and
then
then
we
we
can
can
rearrange
rearrange
these
these
elements
elements
as
as
needed
needed
by
by
simply
simply
and
and
dropping.
dropping
And
and
just
just
like
like
that,
that
we
we
have
have
a
a
basic
basic
card,
card
but
but
it's
it's
lacking
lacking
in
in
style.
style
Luckily,
luckily
codecs
codecs
has
has
an
an
awesome
awesome
style
style
editor,
editor
which
which
might
might
be
be
my
my
favorite
favorite
feature
feature
of
of
all.
all
Go
go
ahead
ahead
and
and
click
click
on
on
the
the
outer
outer
then
then
on
on
the
the
right
right
side,
side
you'll
you'll
see
see
a
a
couple
couple
of
of
other
other
icons.
icons
Computed
computed
styles
styles
will
will
give
give
you
you
a
a
breakdown
breakdown
of
of
all
all
the
the
styles
styles
that
that
currently
currently
apply
apply
to
to
that
that
element.
element
This
this
is
is
huge
huge
because
because
I
i
always
always
find
find
myself
myself
going
going
back
back
and
and
or
or
in
in
the
the
browser
browser
dev
dev
tools,
tools
you
you
look
look
at
at
computed
computed
styles.
styles
It's
it's
extremely
extremely
convenient
convenient
to
to
have
have
this
this
information
information
directly
directly
in
in
your
your
IDE.
ide
Now
now
click
click
on
on
the
the
paintbrush
paintbrush
to
to
go
go
to
to
the
the
style
style
editor.
editor
Click
click
plus
plus
to
to
add
add
a
a
new
new
class
class
to
to
this
this
div,
div
and
and
give
give
it
it
a
a
name
name
of
of
card.
card
That
that
will
will
add
add
the
the
card
card
class
class
to
to
our
our
chosen
chosen
CSS
css
module
module
and
and
also
also
apply
apply
it
it
to
to
the
the
div
div
in
in
the
the
code.
code
Then
then
the
the
CSS
css
editor
editor
is
is
amazing.
amazing
We
we
can
can
filter
filter
any
any
CSS
css
if
if
we
we
know
know
what
what
its
its
name
name
is,
is
or
or
we
we
can
can
go
go
down
down
here
here
and
and
do
do
everything
everything
visually.
visually
Like,
like
I'll
i'll
go
go
ahead
ahead
and
and
make
make
it
it
a
a
flex
flex
box,
box
make
make
it
it
flow
flow
vertically,
vertically
set
set
the
the
overflow
overflow
to
to
hidden,
hidden
and
and
set
set
a
a
max
max
width
width
of
of
300
300
pixels.
pixels
That's
that's
convenient,
convenient
but
but
it
it
also
also
has
has
some
some
pretty
pretty
advanced
advanced
tools
tools
built
built
into
into
the
the
editor.
editor
Like,
like
when
when
it
it
comes
comes
to
to
shadows,
shadows
the
the
shadow
shadow
editor
editor
allows
allows
you
you
to
to
change
change
all
all
the
the
various
various
properties
properties
which
which
is
is
extremely
extremely
difficult
difficult
and
and
tedious
tedious
to
to
do
do
in
in
code,
code
but
but
now
now
it's
it's
time
time
to
to
make
make
this
this
component
component
interactive.
interactive
Back
back
in
in
the
the
elements
elements
panel,
panel
I'm
i'm
going
going
to
to
add
add
another
another
div
div
inside
inside
the
the
carousel
carousel
along
along
with
with
a
a
couple
couple
of
of
buttons
buttons
inside
inside
of
of
it.
it
When
when
pressed,
pressed
these
these
buttons
buttons
should
should
rotate
rotate
between
between
the
the
images
images
in
in
the
the
carousel.
carousel
We
we
could
could
write
write
all
all
this
this
code
code
in
in
codex,
codex
but
but
At
at
this
this
point,
point
you
you
may
may
prefer
prefer
to
to
switch
switch
over
over
to
to
Versus
versus
Code.
code
We'll
we'll
first
first
destructure
destructure
the
the
props
props
from
from
our
our
interface
interface
and
and
then
then
use
use
that
that
to
to
interpolate
interpolate
dynamic
dynamic
data
data
like
like
the
the
title
title
and
and
the
the
price.
price
From
from
there,
there
we
we
can
can
add
add
some
some
state
state
for
for
the
the
current
current
index
index
of
of
the
the
image
image
that
that
we
we
want
want
to
to
show
show
in
in
the
the
carousel.
carousel
After
after
which,
which
we
we
can
can
define
define
a
a
couple
couple
of
of
functions
functions
like
like
previous
previous
image
image
and
and
next
next
image
image
to
to
change
change
the
the
index
index
in
in
a
a
specific
specific
direction.
direction
Now
now
let's
let's
go
go
ahead
ahead
and
and
stop
stop
there
there
and
and
go
go
back
back
to
to
codecs.
codecs
If
if
we
we
look
look
at
at
the
the
component,
component
you
you
can
can
now
now
see
see
it's
it's
using
using
our
our
dynamic
dynamic
data
data
that
that
we
we
created
created
earlier.
earlier
And
and
if
if
you
you
look
look
in
in
the
the
elements
elements
tab,
tab
you'll
you'll
see
see
a
a
gray
gray
icon
icon
here
here
that
that
tells
tells
us
us
it's
it's
an
an
expression
expression
or
or
a
a
value
value
computed
computed
in
in
the
the
React
react
JSX
jsx
code.
code
But
but
one
one
thing
thing
we
we
forgot
forgot
to
to
do
do
in
in
our
our
code
code
is
is
bind
bind
our
our
carousel
carousel
functions
functions
to
to
the
the
buttons.
buttons
Select
select
a
a
button
button
from
from
the
the
elements
elements
tab,
tab
then
then
go
go
to
to
the
the
properties
properties
panel
panel
and
and
find
find
the
the
on
on
click
click
property.
property
Check
check
that
that
box
box
and
and
it
it
will
will
add
add
an
an
on
on
click
click
event
event
handler
handler
to
to
that
that
button,
button
then
then
all
all
we
we
have
have
to
to
do
do
is
is
go
go
down
down
to
to
the
the
code
code
and
and
add
add
the
the
appropriate
appropriate
function
function
name.
name
Then
then
the
the
final
final
step
step
is
is
to
to
update
update
the
the
default
default
image
image
with
with
the
the
current
current
index
index
of
of
the
the
images
images
array.
array
At
at
this
this
point,
point
click
click
on
on
the
the
eyeball
eyeball
to
to
preview
preview
the
the
app
app
here
here
in
in
Kodux,
kodux
and
and
it
it
should
should
toggle
toggle
between
between
images
images
in
in
the
the
carousel.
carousel
But
but
now
now
that
that
we
we
have
have
a
a
working
working
component,
component
we
we
can
can
put
put
it
it
to
to
use
use
in
in
other
other
places
places
in
in
the
the
application.
application
For
for
example,
example
if
if
we
we
go
go
back
back
to
to
the
the
app
app
board,
board
we
we
can
can
now
now
drag
drag
and
and
drop
drop
our
our
custom
custom
component
component
there.
there
It
it
shows
shows
an
an
error
error
initially
initially
because
because
it's
it's
missing
missing
the
the
required
required
props.
props
In
in
my
my
full
full
demo,
demo
I
i
took
took
some
some
dummy
dummy
data
data
and
and
looped
looped
over
over
it
it
to
to
show
show
multiple
multiple
carousels
carousels
and
and
then
then
style
style
them
them
with
with
CSS
css
Grid
grid
here
here
in
in
codecs.
codecs
The
the
cool
cool
thing
thing
about
about
this
this
is
is
I
i
can
can
change
change
the
the
size
size
of
of
the
the
canvas
canvas
to
to
check
check
its
its
responsiveness
responsiveness
without
without
ever
ever
having
having
to
to
leave
leave
the
the
IDE.
ide
Overall,
overall
codecs
codecs
is
is
a
a
very
very
new
new
tool
tool
and
and
won't
won't
replace
replace
your
your
main
main
editor,
editor
but
but
it
it
has
has
some
some
features
features
that
that
I
i
think
think
really
really
any
any
developer
developer
could
could
take
take
advantage
advantage
of
of
whether
whether
you're
you're
a
a
beginner
beginner
or
or
highly
highly
experienced,
experienced
but
but
I'm
i'm
curious
curious
to
to
know
know
what
what
you
you
guys
guys
think.
think
Let
let
me
me
know
know
if
if
this
this
is
is
a
a
tool
tool
you
you
would
would
actually
actually
use
use
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker discusses the benefits of web development, including simplifying code and reducing development time. They then proceed to build a responsive web page using codecs and Svelte, including a tool called Svelte and Git integration. The process includes downloading and creating a project, design files, and editing code. The speaker also demonstrates how to use the code editor, including modifying props, creating a new board, and updating images and default image. The benefits of codecs include their ability to use responsive elements and create a new tool for developers.
I built a react app… but with a visual editor
When I first started to learn web development, I paid $400 for a CD of Adobe Dreamweaver. Unlike the text editors we use today, what you see is what you get. WYSIWYGs have been around forever. Visual Basic from Windows came out 30 years ago, game developers write code by dragging and popping in tools like Unreal, and mobile IDs like Android Studio always keep the UI by your side. But on the web, we choose to write most of our code with a blindfold on. I think this is due to the challenge of responsive designed during the browser wars, but those days are mostly behind us. In today's video, we'll build an image carousel inspired by Airbnb's website using a visual IDE called codecs, created by Wix, the sponsor of this video, that brings drag and drop productivity to React apps. As web developer myself, I was a bit skeptical to try it, but what I found is that it can dramatically simplify certain jobs, and does so in a noninvasive way. One thing I've always hated about visual tools is they tend to create code that you don't understand, but that's not the case with codecs. It works in tandem with Versus Code while providing a robust visual they are on top of your code. It'll be easier if I just show you, so let's take a look at what we're building today. We have a collection of cards for various Airbnbs, which are made responsive with CSS Rit, each card has its own collection of images, which can be rotated through by clicking this button. Nothing too crazy, but the way we'll build this is like nothing you've ever seen before when it comes to React development. The first step is to download it from the website, and it's entirely free by the way, then create a new project. You have the option to import an existing project. The only requirement is that it uses TypeScript and either CSS modules, Sass, or Stylable for your styling. The main thing I don't like about this editor is that it only supports React. I would love a tool like this for Svelte, Vue, Angular, and so on. In any case, I'm gonna start from scratch and go with the built in Vite template. After after it creates and installs the dependencies, you'll notice it creates a board. A board is just a component itself that allows you to isolate your own components, very similar to a tool like Storybook, if we go ahead and click on a board, that'll bring us into the main editor. Down here at the bottom, it contains the code for that board. Again, it's just a component that, in this case, renders the app component. There's a lot to talk about here, but, first, I wanna back up. Back on there's the app component. There's a lot to talk about here, but first, I wanna back up. Back on the home tab, you'll notice a few other icons here in the bottom left corner like the file explorer to look at the actual files in this project, which can be edited just like you would in Versus Code with syntax highlighting and code completion. And then you also have a full Git integration as well, where you can easily make and revert commits as needed. What's important to understand though is that this is not trying to be a replacement for Versus Code, but rather it complements if we go back into the board, you'll notice this little menu here next to the component that allows us to open it directly in Versus Code. Looking closer at the file structure, you'll notice a folder named codex. This contains any boards or templates that aren't part of your main application. There's also a codex config file that can modify its behavior, but the cool thing is that anything you edit in the project in Versus Code will be instantly reflected in codecs. As you can see here, I've got the app component open, but I wanna get rid of all this boiler played. As I go through and delete elements and save the file, it's instantly updated in the codecs UI. But here's where things start to get fun. If we go into codecs and click on a component, it brings up the editor, which gives us a hierarchy of elements in the DOM. If we click on one, its bounding box is highlighted in the UI, which is useful, but we can also add new elements to the DOM by clicking the add button. And that brings us an entire list of all the possibilities. Personally, I find this extremely useful for building complex forms because we can just drag and drop all the form elements we need and rearrange them, which is far more efficient than trying to do that in code no matter how good you are in BIM. Then on the other side of the screen, properties on any element can be modified. We can easily filter and update them here, and it will modify the code automatically. That's pretty cool, but now it's time to build our first yeah, component. Back in the home screen, I'll go ahead and click add, followed by new component. We'll give it a name of b and b card, which will represent our image carousel. It's also worth noting that you can create custom templates, if you find yourself implementing the same patterns in multiple components. Once created, you'll notice back in the home tab that it also creates a new board for us, which allows us to develop this component in isolation. Now go to the component and click the pencil icon to bring up its code. Notice how we have a TypeScript interface here called b and b card props. When we add props to this interface, we can automatically start using them in codecs from the properties panel, and that's why it's required to use TypeScript when using codecs. For each one of these cards will need a title, a price, and an array of image URLs. Now go back to the board and click on that component, and we can modify its props right here to give it some dummy data. To build this card will first structure out its elements, delete the default text, then drop in a div below the root. That'll be our main card. Then inside that div, we have 2 other divs, the first one for the carousel and the second one for the main content below the images. Now in the top div, we can add at a dummy image for now. And then in the bottom div, we can drag in a heading as well as a paragraph, and then we can rearrange these elements as needed by simply and dropping. And just like that, we have a basic card, but it's lacking in style. Luckily, codecs has an awesome style editor, which might be my favorite feature of all. Go ahead and click on the outer then on the right side, you'll see a couple of other icons. Computed styles will give you a breakdown of all the styles that currently apply to that element. This is huge because I always find myself going back and or in the browser dev tools, you look at computed styles. It's extremely convenient to have this information directly in your IDE. Now click on the paintbrush to go to the style editor. Click plus to add a new class to this div, and give it a name of card. That will add the card class to our chosen CSS module and also apply it to the div in the code. Then the CSS editor is amazing. We can filter any CSS if we know what its name is, or we can go down here and do everything visually. Like, I'll go ahead and make it a flex box, make it flow vertically, set the overflow to hidden, and set a max width of 300 pixels. That's convenient, but it also has some pretty advanced tools built into the editor. Like, when it comes to shadows, the shadow editor allows you to change all the various properties which is extremely difficult and tedious to do in code, but now it's time to make this component interactive. Back in the elements panel, I'm going to add another div inside the carousel along with a couple of buttons inside of it. When pressed, these buttons should rotate between the images in the carousel. We could write all this code in codex, but At this point, you may prefer to switch over to Versus Code. We'll first destructure the props from our interface and then use that to interpolate dynamic data like the title and the price. From there, we can add some state for the current index of the image that we want to show in the carousel. After which, we can define a couple of functions like previous image and next image to change the index in a specific direction. Now let's go ahead and stop there and go back to codecs. If we look at the component, you can now see it's using our dynamic data that we created earlier. And if you look in the elements tab, you'll see a gray icon here that tells us it's an expression or a value computed in the React JSX code. But one thing we forgot to do in our code is bind our carousel functions to the buttons. Select a button from the elements tab, then go to the properties panel and find the on click property. Check that box and it will add an on click event handler to that button, then all we have to do is go down to the code and add the appropriate function name. Then the final step is to update the default image with the current index of the images array. At this point, click on the eyeball to preview the app here in Kodux, and it should toggle between images in the carousel. But now that we have a working component, we can put it to use in other places in the application. For example, if we go back to the app board, we can now drag and drop our custom component there. It shows an error initially because it's missing the required props. In my full demo, I took some dummy data and looped over it to show multiple carousels and then style them with CSS Grid here in codecs. The cool thing about this is I can change the size of the canvas to check its responsiveness without ever having to leave the IDE. Overall, codecs is a very new tool and won't replace your main editor, but it has some features that I think really any developer could take advantage of whether you're a beginner or highly experienced, but I'm curious to know what you guys think. Let me know if this is a tool you would actually use in the comments. Thanks for watching, and I will see you in the next one.
The speaker discusses the benefits of web development, including simplifying code and reducing development time. They then proceed to build a responsive web page using codecs and Svelte, including a tool called Svelte and Git integration. The process includes downloading and creating a project, design files, and editing code. The speaker also demonstrates how to use the code editor, including modifying props, creating a new board, and updating images and default image. The benefits of codecs include their ability to use responsive elements and create a new tool for developers.