The Journey of building Print-On-Demand Editor

Othman — Mon, 08 Aug 2022 17:40:00 +0000

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.
Let's break this article into subparts:

1. What is Print-on-demand-editor
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 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:

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. 2. *What are the best tools to use * when I started this project, I had many tools that can help, for example:
Fabric js docs: well, the fabric is the most famous canvas lib and it is a very good tool

2. Konva Js docs: 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 : 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:

the used React version is very old, and it has many detracted tools
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. was pretty good, and I was still improving it until I found a nice tool.

3.the nice i tool i found was Poltono
Poltono Means Canvas in Russian you can view its docs from here. 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 hereand 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

DEV Community: Othman

The Journey of building Print-On-Demand Editor

2. Konva Js docs: 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