I Made Claude Reverse-Engineer Canva (and it Worked)

0:00So, I tried to recreate Canva website that is design editor using REA, reverse engineering anything tool. So, let's see how it looks. So, those who don't know about REA, it's reverse engineering anything and it's a tool that gives your coding agent power to investigate software and trace its functionality and behavior, etc. So, friends, this is the website. You can have a look at it, ra.tools. And this is its GitHub. You can have a look at the fork and star over here. So, what we need to do is we need to have an uh coding agent, let's

0:31say Claude. We can have Claude AI agent. And you can simply give it this prompt to install the REA. It's kind of a MCP that can connect your coding agent with this tool. Or you can simply run this command npx REA hyphen agent at the rate latest. After this, you need to restart your agent as well. Now, let's quickly jump onto the Claude terminal that I have open over here. So, this is the Claude terminal. You simply need to write the Claude command to open this, you know, interactive shell. And inside

1:00this, I've simply given this command. After running that npx command, I've simply written this prompt, the instruction, that use that REA tools to recreate Canva website, the popular graphic design platform. Steps to follow are get the website look and feel from Google Chrome, reverse engineering the Canva design editor, and rebuild the web app, right? So, as you can see, it is doing something like uh loading the

1:22skill and then looking for the Chrome. And then you can also see like it's capturing the editor uh look and feel. Over here, it's saying that uh reverse engineered the Canva layout header side, Canva selection toolbar, right? And then it's scaffolding the app with React. So, this is all the code. It took a like like decent amount of time to produce the output. And at the end, you can see it's done. It has also like mentioned

1:51some of the points. Uh known gaps it has given, and how to run it, npm run dev, simple. So, now what we can do? Quickly jump onto the And friends, this is the stuff that it generated. It generated the entire code base. You can see the React code base. Simple source folder and the entire code base with main.tx, app.tx, app.tsx. Now, the main thing that we can have a look

2:15at is the look and feel, how it looks. So, let's see that. So, friends, this is what it has created, Cloud, right? So, this is the actual Canva editor and this is what it has created, right? So, we can like quickly go on clicking like YouTube thumbnail. And let's see the features. So, it's looking kind of similar and let's have a look at the features. Yeah,

2:39it's providing drag and drop, right? It's providing undo and redo. It's providing, let's say, resizing. Yeah, it's providing resizing as well. Let's have a look at something else, position. So, it's showing like forward, backward, all these things. It's kind of a static because I don't think it's making some API call for this. As we are not using Canva's API because that's they have their like rights or copyright on their code. So, it's kind of just it captured how Canva looks like and kind of tried to mimic that, right? So, you can have a look at it. These are the

3:15shapes that are available. But obvious, like in Canva, there are like lot of features that are available, but it's kind of a a copy, you can say. Let's see if we can download it as well. So, friends, cool. We can download it as well. So, I just wanted to show you like uh what I was experimenting and this is the result that this tool has created using Cloud. So, friends, that's it for this particular video. I just wanted to show you one this amazing tool, REA. You can use it to investigate or like, you know, trace binaries as well. And if you love the content and got to learn

3:52something new, then don't forget to like and subscribe. Follow for more. Thank you. Bye.