React Js Design Editor using Fabric Js

Design Editor
Canva like design editor to design / customize the design templates and export the design in pdf / svg / image. React js + Fabric js (fabricjs.com html5 canvas library) is used to build the application.

PDF Whiteboard Editor - https://diybuilder.in/otherapps/pce/index.html

MVP DEMO - http://kpomservices.com/reactjseditor/index.html

Fabric JS (fabricjs.com) - HTML5 Canvas Library
Install the fabric js libary in react js and initialize it.

npm install --save fabric
import { fabric } from 'fabric';
componentDidMount() {
    // Make a New Canvas
  this.canvas = new fabric.Canvas('main-canvas', {options});
}

Why React JS?
It creates reusable UI components, where those components can be used in other editor projects. The main purpose of React is to be fast, scalable, and simple.

Features of this design editor

1. Editor has ability for creating multiple pages design.
2. Output can be exported into pdf, jpeg, png, svg.
3. Crop / Replace image functionality available.
4. Import images from Social Media (FB, Instagram etc.).
5. Pre-Populated templates can be created easily.
6. Image / Text / shape / svg elements can be added / imported by the user to customize the design.
7. Drag and Drop text/images/elements to the design.
8. Admin can add different type of FONTS.

Advanced Usage PDF Generator
PDFs can be generated from the design editor,
Templates -> Customize -> Save -> Download as PDF.

Please find sample PDF outputs exported from the editor.
http://kpomservices.com/Export-Output_1.pdf
http://kpomservices.com/Export-Output_2.pdf

Where its used
Design Editor is used to create awesome real estate marketing postcards & social media posts / business cards / letterheads in graphicsfactory.com
.