--- title: 'This React App Destroys Canva and Photoshop - Here''s How I Built It' source: 'https://youtube.com/watch?v=l2IcAQT3CL0' video_id: 'l2IcAQT3CL0' date: 2026-07-28 duration_sec: 315 --- # This React App Destroys Canva and Photoshop - Here's How I Built It > Source: [This React App Destroys Canva and Photoshop - Here's How I Built It](https://youtube.com/watch?v=l2IcAQT3CL0) ## Summary This video showcases a React-based all-in-one editor that claims to rival Canva and Photoshop, featuring image, PDF, and video editing capabilities. The creator demonstrates the app's functionality and promotes the source code for purchase. ### Key Points - **App Overview** [00:02] — Demonstrates a React application that can edit images, PDFs, and videos, presented as a Canva/Photoshop alternative. - **Canvas Interface** [00:16] — Shows an empty canvas similar to Canva and Photoshop, with background color change option. - **Text Editing** [00:29] — Add text, adjust size, and change content; top bar offers bold, italic, underline, and animation. - **Export Options** [00:57] — Download as image, PDF, HTML, or GIF file. - **Source Code Availability** [01:13] — Full source code is available for purchase; requires Node.js to run. - **Running the App** [01:28] — Uses Node.js v22.17.0 and 'npm run start' to launch on localhost:3000. - **Stock Images Integration** [02:11] — Integrated Unsplash API for stock images; users can search and embed images. - **Custom Images** [02:28] — Upload own images via file button. - **Drawing Tool** [02:43] — Brush tool for freehand drawing. - **Video and Backgrounds** [02:59] — Embed videos via Pixels, and apply pre-built backgrounds. - **Icons and Templates** [03:11] — Third-party icons via IconFinder API; pre-made templates for instant editing. - **Export to PDF** [03:41] — Exports edited template to PDF. - **Code Structure** [04:10] — Source code uses React 18.2.0 and is written in JavaScript; modifiable. - **Positioning and Effects** [04:24] — Alignment options, blur, transparency, opacity adjustments. - **Page Management** [04:53] — Duplicate, add, and remove pages. ### Conclusion The video presents a fully functional React-based editor with extensive features, but serves primarily as a promotional demo for purchasing the source code. ## Transcript in this video, I'll show you a react application that I created that will actually destroy Canva and Photoshop. It's actually a all-in-one editor where you can edit your images, PDF, videos, everything. So I'm running this application on localhost 3000. As you can see here, this is a React application. So right here we have this empty canvas similar to Canva and Photoshop. So here you can actually change the background color and then we inside the left hand se section you can add actually add text here. So simply click on this similar to canva and photoshop you can adjust the size of it and just change the text here and we have all these options of at the top bar. You can bold, itallic, underline, everything is present. You can even animate the text present. You can even animate the text as well. You can see that and then we also have the export options download button. So if you click on that you can actually export this to a image PDF HTML GIF file. So if I select image click on download PNG. So now it will export this everything into a image. So this is the overall project here uh of inside ReactJS. So if you need the full source description. So you can directly purchase it. uh after purchasing it, you will actually get a zip file here. Uh once you extract the zip file, simply you need to run the project. I'm simply running it on localhost 3000. And for installed. So I'm just running the latest version of NodeJS, which is 22.17.0. After that, you just need to say npm run start. So this will start your ReactJS application locally application locally at your local host 3000. So I have given the link you can directly go to it and purchase it. After purchasing it you will automatically get the source code from Google drive once the payment is done. So you will see that we also have options to add different kinds of shapes as well. So you can even change the background color. Then we also integrated the support for stock images using Unsplash. You can actually click on any of these stock photo images. You can even search for it in real time. So it will search the images for you and then you can embed those images. Use it. You can also use your own images as well inside the upload section. So right here, click on the add file button to actually upload your own images as well. And you can add those images as well. So it's very simple. And uh we also have the support for drawing. You can use the brush here. draw something and uh we also have the support for embedding videos as well which is pixels. We have integrated this support here and then we have a set of backgrounds that Canva and Photoshop supports. So you can actually use these backgrounds as well like this instantly change it and see the result here. So it's a really awesome ReactJS application that I created. We also have the support for integrating third party icons using icon finder API. And then we also have a set of templates that you can ready templates. You can simply click on those templates and edit those templates instantly. And then you can export this let's suppose to PDF file. Now you can click on download PDF. So instantly this template will be exported to PDF file. So this is the support. you will see that you can export it to a image file, PDF file, HTML, GIF, animation as well. So, it's an all-in-one editor which can even compete see here. So, it's very easy to run. As I already told you, you should have just NodeJS installed. And once you get the source code, you can modify the source code as well. So you can just see here all the files have been coded inside JavaScript. So if you understand the code here, you can easily modify it to add additional features as well. So you have actually used as you can see the latest version of React here 18.2.0. The link is given. If you like it, you can directly purchase it. And uh you can just see here we have all these options here. You also have the position option which Canva supports. You can align them accordingly. You also have different effects as well. We can blur the text here. We can change the transparency, opacity, everything we can do. We can even duplicate this page here if you like it. Click on copy. Then it will create a duplication of this page here. So you can add a new page. You can add multiple pages as well. Remove certain pages. So all these things are there. You can directly integrate this everything here. Just select the page here and select the template here as well. So definitely check out this editor.