Canva Clone Created

[chloe-bm]

Hi guys, I have started a Canva Clone project.

Take a look here: https://editor.layerhub.io
Source code here: https://github.com/layerhub-io/react-design-editor

Also, created an SDK for creating design editors, which should support vue and react. Source code here: https://github.com/layerhub-io/layerhub-io

I am not having enough time to keep working on everything, so I am looking for Open Source contributors.

Regards,

[ShaMan123]

Your project isn't related to fabric, is it?

[chloe-bm]

Yeah, it is using fabric.js. You can see source code for SDK here: https://github.com/layerhub-io/layerhub-io/tree/main/packages
It should support react and vue.

[asturur]

I ended up on this project because someone at work showed it to me.
It looks very nice.
I have seen you both use pixijs and fabricjs.
indeed initially i was amazed how pixijs text felt like fabricjs one, then i digged in the source code and realized it was fabric.

What are you doing with pixijs in the editor?

[chloe-bm]

Video editor has some pieces:

• Editing area, using fabric.js
• Playback, using pixi.js > It reproduces your scenes/layers in the browser. It works as a preview for our video where we are working on.

[asturur]

fabricJS had some wip animation support that support a timeline like the one you did, i never finished it because the interested people never follow up if they liked it.

The editor is nice and clean, i'm interested to see how you bound the fabricJS state to vue/react/angular whatever you used, could be a nice tutorial for the docs.

[chloe-bm]

Here you can see how I am creating a react binding for the SDK.

https://github.com/layerhub-io/layerhub-io/tree/main/packages/react

Pretty simple actually, same steps for vue. We can follow same steps for any frontend library/framework.

I am still working on the docs.

About animation, I know fabric.js supports it. But, for now, I am going to add gsap. It works pretty well for browser and node .

[EdnaldoNeimeg]

Wooow.
I'm amazed. Well done man. I've created something similar for product customization: https://camisadimona.com.br/estudio/ (it's a work in progress)

[chloe-bm]

Great, I am working on something similar, maybe we can do some collaboration:

• product customization tool
• collage editor

[EdnaldoNeimeg]

It'd be great, but I know nothing about React (I use VueJS)