---
title: 'Next.js Canva Clone for Image Background Removal with TensorFlow & BodyPix'
source: 'https://youtube.com/watch?v=yaMYFvXT28U'
video_id: 'yaMYFvXT28U'
date: 2026-07-28
duration_sec: 349
---

# Next.js Canva Clone for Image Background Removal with TensorFlow & BodyPix

> Source: [Next.js Canva Clone for Image Background Removal with TensorFlow & BodyPix](https://youtube.com/watch?v=yaMYFvXT28U)

## Summary

This video demonstrates a full-stack Next.js single-page application that removes image backgrounds in the browser using open-source libraries. The creator shows two tools: a background remover and a background changer, both powered by TensorFlow, MediaPipe, and BodyPix. The source code is available for purchase.

### Key Points

- **Introduction to the Application** [00:01] — Builds a Next.js Canva clone for image background removal directly in the browser.
- **Demo of Background Removal Tool** [00:15] — Select an image, the app automatically analyzes and removes the background, then you can download the result.
- **Open-Source Libraries Used** [00:54] — No paid APIs; uses TensorFlow, MediaPipe, and BodyPix for all processing.
- **Source Code Available for Purchase** [01:06] — The full source code is for sale, link in description.
- **Local Development and Deployment** [01:21] — Runs with npm run, easy to deploy Next.js app.
- **Change Background Tool** [01:36] — Removes background and lets you pick a static color to replace it.
- **Single Page, No Backend** [02:22] — All processing happens client-side in the browser.
- **Additional PDF Tools** [02:37] — Includes PDF conversion, merge, split, and PDF to Word features.
- **Detailed Library Explanation** [03:50] — TensorFlow is an open-source ML library, MediaPipe is a Python-based library, BodyPix does real-time segmentation.
- **Performance: ~1 Second Processing** [04:49] — Background removal completes in about one second.

### Conclusion

The video primarily serves as a demo and sales pitch for a pre-built Next.js application that leverages open-source machine learning libraries for image background removal. It highlights the speed and simplicity of the tool.

## Transcript

to this video. So in this video I'll show you I built out a fullstack nextjs single page application similar to Canva clone to actually remove your image backgrounds directly in the browser with a single click. So this is actually the
demo of the application. So we have this image background removal tool right here. And uh let me show you the demo and then first after that I will show you the source code. So first of all here the interface is quite simple. You
simply select the input image. After that the application will automatically analyze the image and then on the right hand side you will see the output here and then you can easily download the output
image really simply. So now the image is successfully downloaded successfully downloaded and you can easily see the output image. So for this we haven't using the any sort of API. So we are not using any
paid API instead we are using open-source libraries such as open-source libraries such as TensorFlow, Media Pipe and Body Pix. So all the source code is given. You can directly purchase it. The link is given
in the description. So after you purchase it, uh the source code will be automatically. So each and every component is divided into its appropriate TypeScript file here. So we are running this uh application in the
terminal and locally as you can see npm run. So it's started this nextjs application locally. It's very easy for you to deploy the application as well. And the second tool is the change background tool. So this also does the
same thing. It first of all removes the background from the input image and then it allows you to actually pick a color from the color picker and click on change background and instantly the background of the image is
successfully uh changed. First of all it change removes the background and then it actually allow you to change the background with a static color. So here you can change the color. Just select your favorite color and click on change
background and instantly in a matter of second all the processing is taking place directly in the browser. It's a single page tool. So it doesn't have a back end. So all the processing is directly happening it in the browser.
So if you are interested in this, you can actually purchase this project and get this full source code. And once you get the source code, you will be able to see how I coded this using those free libraries. And you also will be able to
modify it or add additional features as well. Apart from that, we also have tools for converting your images into PDF, merge PDF, split PDF, PDF to doc as
well. So using this tool, you can actually convert your PDF file. [snorts] just select your PDF file and then it will convert that PDF into word document. So you just click on convert and then
automatically that PDF file will be converted to word document file. So as converted to word document file. So as you can see it's a Canva clone uh image background removal and PDF editor tool as well. It has all the features here.
as well. It has all the features here. You can see it converted this PDF into word document file and then you can open that word document and then you can open that word document dox file in any editor.
converted this into word document. So it will save you a lot of time as well because uh you don't require any special editor rather than you can use this you can use it with any image. Let me try out with different image and show it
to you. So basically all the background that you see is successfully removed here and you can these are the two tools here remove background and change background. So for building this we are using if you don't
know about TensorFlow it's it's a very popular library we are using this TensorFlow it's a basically an open-source Python based machine learning library which allows you to actually remove background
so we are using this and we are also using this library media pipe which is again a Python based library. So we are actually
using these Python based libraries inside our nextJS project so that we can use these libraries directly in the browser. So this is another machine learning library and also we are using body pix
which is again a realtime segmentation library which actually analyzes the image. First of all, as you select the image, first of all, we are using these libraries in nextJS to first of all analyze the image pixel by pixel and
then we are removing the background and you are seeing this result. So the application is really fast as you select the image. It doesn't take larger than 1 second. It just take 1 second for uh background removal. So you can basically
background removal. So you can basically use this tool. So again in the same tool we the change background tool first of all it removes the background and then you can select any background and click the it will the
color will be applied in a matter of seconds. So it's coded inside NexJS it's a single page tool. So if you're interested guys the link is given in the description you can directly purchase it.