# Build Apps Visually with AI | Replit Canvas Full Tutorial

## Метаданные

- **Канал:** Code with Ania Kubów
- **YouTube:** https://www.youtube.com/watch?v=uWyrqW4TSAA
- **Дата:** 20.05.2026
- **Длительность:** 16:09
- **Просмотры:** 2,445
- **Источник:** https://ekstraktznaniy.ru/video/51675

## Описание

Click here to follow along: https://replit.com/refer/ania36 (I'm a Replit partner)

This channel is totally free to watch! I sign up for partner links when I can as a way to keep this channel going. If you like watching, please give me a click :)

00:00 Introduction
01:08 How Replit Canvas Actually Works
01:35 How to Build Apps Visually Using AI
04:08 How to Redesign Interfaces Instantly
08:02 How to Deploy Your Apps
11:42 How to Generate Slides, Dashboards, and Even Animations From a Single App Design
13:05 How to Run Multiple Things Building at Once


⭐ Learn JavaScript with my Course here: https://www.codewithania.com

⭐ Check out my IDE here: https://jb.gg/GetWebStormForFree

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

## Транскрипт

### Introduction []

So, this feels like one of the biggest shifts in software development that I've seen in a long time. And why? Because people are no longer just coding apps, they're building them visually. By this, I mean generating visuals on a canvas, annotating them just like you would with a pen, and the AI picks that up and works with it. In this video, I'm going to show you how to use this technology to build apps so that you can stay in the know with the latest developments in technology. So, we're going to learn how to use tech to design manual apps, edit layouts, move components around, generate entirely new UI directions, and build full features. So, today I'm going to teach you exactly how to use Replica Canvas step-by-step by building a real app from scratch. Here's what we will cover: how Replica Canvas actually works, how to build apps visually using AI, how to redesign interfaces instantly, how to deploy your apps, and how to have multiple things building at once. So, what are we waiting for? Let's start by clicking on the link in the video description below. How Replica Canvas actually works. In most tools

### How Replit Canvas Actually Works [1:08]

design and development happens in two separate places. So, in the past, I've been switching from my code editor to design platform to even a pitch deck if I need. But, you know, it's now 2026, so we don't need to do that. You can now design in Canvas by generating multiple images and even animations and even edit them by annotating using these tools or talking to Agent Four here. Let's have a look at this now.

### How to Build Apps Visually Using AI [1:35]

How to build apps using AI. Okay, so let's get to building our first app visually using AI. In the first section, we covered how Replica Canvas works. And in this section, we will put it to use by building an English language course platform. Let's go. So, as you can see here, we can choose whether we want to build a website, build a mobile app, start off designing, build some slides, create an animation, or perhaps we are into analytics and want to build a data visualization platform, a 3D game, a document, or even a spreadsheet. So, a lot to choose from. I'm going to go ahead and start with design because we don't have any designs and that's what I want to work on. So, let's put in a prompt, build a platform for selling English language courses, and let's hit design, and there we go. So, now Agent Four is doing its thing. Okay, it's going to tell you what it's doing along the way, which I think is super useful. So, it's going to start off with planning the sandbox artifact setup. And what is cool is that you can see the actions that it's taking. So, the first step took two actions, and the second one took 11 actions. You can also kind of see visually what those actions were. You've got a little paint palette for the creative and a brain for the logical parts. You can even expand them. So, if you click on this here, it will show you the two actions, such as loaded mock-up sandbox skill and planning mock-up sandbox workflow under the brain. Great. So, once that is done, you will see a canvas placeholder is live, and you can see the preview of the app. It looks great, and most importantly, it's interactive. So, if you go down here, we can of course move it around, or we can make it go full screen by clicking on the play button and actually seeing what the website will look like. So, here I'm just scrolling down to show you. It's fully built, the front end is fully built. And as you can see, it's not just static, you can interact with the elements too. So, this looks great. I absolutely love it. It's created pages for me, too. The whole front end has been done. And what is even cooler, if you go back to Canvas, is that if you don't really like this, if you're not quite into it, you can click on design and then a few options shows up. Reimagine is the one that we want to look at now.

### How to Redesign Interfaces Instantly [4:08]

How to redesign interfaces instantly. When generating apps, it's nice to have a few options to choose from, of course. Before this would take weeks of designing before anything is even built, but today you can come up with a few different options and select from the following. So, let's go ahead and click here on reimagine and you can explore different approaches for your design. You can try different layouts. You can explore different vibes. You can make more like this but better. You can optimize for usability. You can show the opposite of this or you can go with surprise me. A nice extra bonus is that you don't like any of the above, you can even write your own prompt. So, I'm going to go ahead and choose explore different approaches and go ahead and click on that. And this will trigger Agent four to come up with four different options for me. Okay, so it's even explaining what it's seeing. So, at the moment the premium dark hero with navy gold palette is the vibe of the current site and it's going to create four completely different design approaches and hopefully we'll like one of those. Okay, so you can see it's popping up and amazing. Our first one is there, our second, our third, and our fourth. Four versions, same app. I love it. Now, just as before you can preview each one. For me, I like this one, so let's go ahead and preview it. I like that it's a bit more fun and friendly. Of course, I don't love everything on it. So, I'm going to show you how to edit certain elements now. So, to edit certain elements, you can just click on the edit button here, and then you can interact with elements that you want to change. So, if I want to change this image right here, I would just select the element. A div shows up here in the prompt box, and I'm just going to write change the image to one of a woman talking on the phone. So, what you will notice here is I'm not even supplying the image. Okay, I'm not supplying the image at all. I am using Repla AI to generate a new image for me that, you know, is unique and doesn't get me in any copyright hot water. So, amazing. And once again, Repla is doing its thing, and a woman on a phone that is now Elena M has been generated for me. So, it really is that easy to edit specific elements. Just click on them, make sure they show up in the prompt box, and write whatever you need to do. Another cool way of working, so let's just go back. It's to literally draw on the canvas. So, if perhaps you're lacking the words to explain something, or you want to be really specific about what you want to do, you can literally draw on the design. I'm going to show you how that works. So, for example, I think this is too square. I want it to be a little bit more rounded. So, perhaps like this shape. Okay, let's just zoom in. And now I can just write a annotation. The annotation says round this off more. And then I'm just work on my annotation. Agent will then take a screenshot of what our annotation is marking on the outcomes variant. Okay, so it's taking a screenshot so you can see what's under our annotation, and of course, it picks up the black square. So, then it's going to round it off for us. Now, I can of course chat to it again like a human if I want this to be more rounded, for example. so round off more, so it's more like an oval. And an increase in border radius will be applied. So, this is great if you're a team and you're visual workers, you can draw on this as much as you want. You can say just change the red annotations or just apply the blue annotations. It is completely up to you. The world's your oyster. How to deploy your apps.

### How to Deploy Your Apps [8:02]

Now that we have built our front end, I'm going to show you how to deploy this fast. Usually deploying an app can be tricky, but using AI I can quickly make my site live on a free Replit URL. I'll also show you how to add a back end for your app. This includes having an admin login for your platform as well as a database using Replit so that you can manage and store your users, your courses, as well as your users' progress. Okay, so deploying the app could not be easier. I'm going to go with the one that I like, so this one right here. And we're just going to select build this design. And Replit is doing its thing. So, this will take a while as there is a lot to do. It's creating a React app for us and wiring everything up as well as setting the Vite config in order to deploy it onto the internet. So, here we are. Here is our free Replit URL and I'm just going to select publish. So, this will start publishing. It's going to go through provision, security scans, build, bundle, and then finally, amazing. So, we have done it. We published our app. And if we go to this URL, tada, there it is. Now, of course, we have some things to do. One of the things we need to do is, of course, figure out a way to store our users, store their progress, even store our courses. At the moment, our database is empty, so let's go ahead and fill it out. But, first we have to create schema logic, you name it. So, I'm going to write, "Please build out the back end to my app so that I can manage users, upload my courses, as well as store users, courses, and user progress in a database. " So, this is going to take a bit longer as back ends are a little bit more complicated. It's going to have to create the schema files, all packages for allowing us to log in and sign up, everything like that. So, I'm just going to fast forward this and great. So, now if you look on our database, you will see there's tables. So, we're storing courses, we're storing lessons, we're storing sessions, users, progress, and even enrollments. So, we should really test this, but you know, I'm just going to publish this for the sake of time. So, let's republish that and on the preview, let's check out what was built. So, I'm going to check this works. I'm going to follow the try out instructions. So, students can register at {slash} register. So, that is good. We can create an account. And the admin login, well, for that, I'm just going to use the same platform. So, let's sign in and I'm going to use the admin login. So, admin@fluentpath and the password of admin1234! And great. So, here we are on the admin dashboard. That is pretty cool that you can use the same platform, but see something else visually based on your logins. So, you will see the courses that I have here and of course, a way to edit or delete courses, as well as create a new course. I like how this looks. Okay, this pop-up essentially starts a new course process. And now let's check out the users. So, we're storing the courses, we have a total of five. And under users, we have the total amount of users that have enrolled in our course. And again, the option to edit or delete. Wonderful. I think this looks great. How

### How to Generate Slides, Dashboards, and Even Animations From a Single App Design [11:42]

to build slides, dashboards, and even animations. As you might suspect when building an app, you end up needing quite a lot more. Perhaps you need to turn it into a mobile app, create slide decks for pitches to investors or sales, data dashboards to track analytics, or even animations for marketing purposes. I'm going to show you how to do all of this in one platform. So, if you remember back here, we did have the option to start with one of these. So, whether it's the option to start by creating a website, a mobile app, start off just with some designs, start off by creating slides, start off by making an animation, start off with your data, so a data-driven app, start off by maybe creating a 3D game, a document, or a spreadsheet. So, you could have chosen that from the beginning, or you can do it now. So, this could not be easier. Of course, you could just talk to Replit here. Or if you want to be a little bit more organized about it, you can click right here in the corner, and this will bring up your taskboard. So, I'm going to start by creating a completely new task, and that is create a video animation of this app for marketing purposes. Okay? And that's just going to run and do its thing as a new task, so you can work on it in a separate thread.

### How to Run Multiple Things Building at Once [13:05]

How to have multiple things building at once. Now that the app is built, I can build a mobile app from it, or I can generate slides for a pitch deck, all from one prompt. But the best part, I've decided I want to do both, and I can run these two prompts in tandem. What this means is that I don't have to sit there twiddling my thumbs waiting for one to finish before starting my next task. Let's have a look at this. Now, in the previous section, I showed you how to create a task so that you can run things on a separate thread while still on the same project. As a quick reminder, this happens by clicking in this corner to open the task board and selecting a new task and then just writing your prompt. So, I'm just going to hit enter and run that task. Okay? So, you will see it started to work. Now, I'm going to create another task because I'm impatient and I know I need to create slides for investors and I don't want to wait for that to finish. So, let's start a new task such as create slides for an investors pitch deck for this app. So, once again, I'm simply writing a prompt. I'm triggering it to start and you will see in my task board two tasks are running at the same time. How cool is that? I'm even going to create a third. So, create a mobile app from this platform and amazing. Let's trigger that to start. So, now we have three tasks. One's turned blue. Let's have a look at the task board fully. So, here we go. We can see all our drafts. So, this essentially is a board where you can see the progress of all your tasks. It starts off as a draft and when it's planned, so as you can see the app marketing video is now planned, you can view it. So, let's go ahead and click on it. It's created our task plan for us. Now, of course, we can revise this. I'm not going to for the video. I'm just going to click start building. So, that's going to now move to active. And again, the draft has been updated. So, the investor pitch deck is now ready to be started. So, I'm going to click start and the last mobile app creation platform is still running. So, this looks great. I love how you visually see all of your tasks running, and you can kind of keep an overview of them, kind of like a manager managing a multitude of employees, or in this case, agents. And once those tasks are completed, tada, you will see that my marketing video has been created. You will also see that my investor pitch deck has been created. It looks great. And you'll also see my mobile app has been created. So, all in the same platform, all editable in the same platform. I love it. Okay, and that's it. I hope you've enjoyed this video. Please do let me know what you think of the tool, and what tools you would like me to cover next.