--- title: 'Build a React.js Canva Clone Image & PDF Editor in Browser Using Fabric.js and jsPDF' source: 'https://youtube.com/watch?v=8wVV881rW5o' video_id: '8wVV881rW5o' date: 2026-07-28 duration_sec: 309 --- # Build a React.js Canva Clone Image & PDF Editor in Browser Using Fabric.js and jsPDF > Source: [Build a React.js Canva Clone Image & PDF Editor in Browser Using Fabric.js and jsPDF](https://youtube.com/watch?v=8wVV881rW5o) ## Summary This video demonstrates a React-based Canva clone that allows users to edit images and PDFs directly in the browser. It showcases features like adding text, images, shapes, and exporting to various formats. ### Key Points - **Project Overview** [00:02] — A ReactJS Canva clone image and PDF editor running locally, similar to Canva, with features to add text, images, and export to PNG, JPG, SVG, and PDF. - **Export Options** [00:16] — Export to PNG, JPG, SVG, and PDF. The canvas supports background color changes via color picker. - **Text Editing** [00:44] — Add text with a modal window controlling alignment, color, and placement. - **Tech Stack** [01:14] — Built with React, Fabric.js for canvas manipulation, and jsPDF for PDF export. Source code available for purchase. - **Shapes and Layers** [02:14] — Add shapes like rectangle, circle, square, triangle with customizable width, height, fill, shadow. Layer-based editor with visibility, lock, and reorder controls. - **Image and SVG Export** [03:08] — Add third-party images, control size. Export to SVG (scalable vector graphics). - **Background Customization** [04:06] — Gradient backgrounds, patterns, custom image backgrounds. Grid for alignment. ### Conclusion The project is a fully functional Canva clone with a layer-based editor, extensive customization, and multiple export formats. Source code is available for purchase via the link in the description. ## Transcript you I built out a ReactJS Canva clone image and PDF editor directly in the browser. We running this uh locally here as you can see. So this is similar to Canva. All the features we have is simple little canvas where you can actually add text images. We also have different export buttons as well. We can different export buttons as well. We can export to PNG, JPG, SVG and PDF as well. So first of all we have the canvas here. We can simply click on this button to actually change the background color. So here you can choose from the color picker change the background color. And we also have the option to add text. So if you click that your model window will open. So right here you will be able to alignment, color, text. You can control all these properties and place your text. And then if you want to export this as a PNG file, you can click the export button to actually export this as a image file. You also have the option to export this to a PDF file as well. So once you click the it will export this. So it's a overall React Canva clone project here. Uh all the source code you can directly purchase it. I've given the link in the description. So for building this application, we are using React the latest version. As you can see we are also using some third party libraries such as fabricjs and jspdf and uh this is a single page code you will able to be modifying the source code or add additional features and we are running this application locally here by simply running the command npm rundev. So this has started this react application at localhost 3000. So all the basically the components are divided into a JSX file, CSS file and JavaScript file. So each and every code it's coded here. So get the source code, you will be able to see how I built this application. And if any modification you want to make, you can edit any of these files. So every component is customizable. And we also have the options for adding different kinds of shapes as well. So from here you can select which shape you want to add rectangle, circle, square, triangle. After that you can control width, height, you can even fill out with a specific color as well. You can control width, shadow, you can even put and click on add. And you can put this shape right here. It's all the features of canvas. So it's a layer based editor. So it keep track of each layer that you add on the thumbnail on the right hand side. So here you can actually control the visibility. You can lock a particular visibility. You can lock a particular layer or basically move layer down up. layer or basically move layer down up. So all this you can even uh show the visibility. You can change the visibility, hide, unhide. Everything is customizable. So you will see that you also have option to add third party images. You simply simply add the image and then you can simply add the image and then you can control the size of the image. So everything is customizable as you can see. So using this you can make social see. So using this you can make social media thumbnails. You can export your make PDF files as well. So you can export this to a SVG file as well. So you can just see here. So it has basically built out a scalable vector graphic. So in ultimate Canva clone editor which is actually is a purchase the script here. I've given the link in the description. So you will basically get all this source code automatically from Google drive and you'll be able to modify it. So it's basically using JSPDF and fabric JS all the free libraries. So, so right here you can even change this to a gradient. So, just select, you can basically change it to a gradient as well. Or if you have a So, we have a lot of patterns. You can even add your own patterns as well inside this, you can select any of the patterns. Or if you want to put a custom image as a background, you can even put that as well. So custom image as a background, you can even put that as well. So all these customizable options are there. So you can see how easy it is to I shown you all the feature of this Canva clone. So now if you are interested, you can you can even put uh the grid as well to actually measure to place elements accordingly. So to place elements accordingly. So everything is customizable. So project can work loan project the link is given in the description.