The Journey of building Print-On-Demand Editor
Tags: react, javascript, html
Published: 2022-08-08 17:40:00

**_This is not a technical article it is just will be an introduction to a list of technical articles about canvas and print-on-demand coding_**
Print-On-Demand, ...MMM nice topic and you can't find good posts about it, or even you will not find the post, and btw this post won't be the best post I will write in Print-On-Demand because I am intending to write more and more. This article is about a journey I started, and I am still on this journey, but I decided to share some of it with you. when talking about print-on-demand, you must be aware that you will use HTML 5 Canvas, well it is a little difficult but it is so fun to work with, you can learn the basics of canvas from [here](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
Let's break this article into subparts:

<u>1. **What is Print-on-demand-editor**</u>
print-on-demand is a platform where users can edit and customize their products (T-shirts - hoodies - mugs...etc.) I think the best example to know more about print-on-demand is [zazzle](https://www.zazzle.com/) I think that Zazzle is offering the most advanced Print-on-demand editor. So To Build a product Editor, you need to think about some stuff: 
1. **the products you are targeting** is your platform going to offer only clothes, so you will have to build a simple editor only. if you are targeting many complex products as Mugs then wow you will have to build a much more complex editor. 
<u>2. **What are the best tools to use **</u>
when I started this project, I had many tools that can help, for example:
1. Fabric js [docs](http://fabricjs.com/): well, the fabric is the most famous canvas lib and it is a very good tool 
2. Konva Js [docs](https://konvajs.org/docs/index.html): for the most. far after I have used many canvas libs this one is the best canvas tool I have ever used it has many out-of-box features
-------------
so I had these two tools I can use one of them but then started to search for a ready design editor to integrate it with our tool, and I found [React-design-editor ](https://salgum1114.github.io/react-design-editor/): React-design-editor is design editor and open source and I can easily change it to product editor (or that what I thought at first ). 
I cloned this tool and started working, and I faced some issues:
1. the used React version is very old, and it has many detracted tools 
2. the documentation for this tool wasn't good at all
But that didn't stop me, I started to play around and converted the react-design-editor to a really basic editor for clothes: you can see this [video](https://drive.google.com/file/d/17OZVxv9v9yPVCkFML6Z8LWKjIGK09DLP/view?usp=sharing). was pretty good, and I was still improving it until I found a nice tool.

3.**_<u>the nice i tool i found was Poltono</u>_**
Poltono Means Canvas in Russian you can view its docs from [here](https://polotno.com/). Poltono is built with canvas it offers SDK and studio editor(like react-design-editor) but is easy to integrate and customize. So I moved from React-design-editor and Fabric JS to Konva JS and Poltono and I moved poltono to this you can see the video from [here](https://drive.google.com/file/d/1TVGS-PgKSduAZYPedUdxjzMbbRjYSMaJ/view?usp=sharing)and btw you can see poltono editor from here: 
https://studio.polotno.com/

i still have much to do to make this editor fully functional so wish me good luck