Project studyDesign Editor

Canva Clone

A browser-based multi-page design editor with drawing tools, layers, SVG processing, image frames, and multi-format export.

Role
Frontend engineer responsible for editor architecture and interaction implementation.
Project type
Portfolio build
Content depth
Project study
Category
Design Editor
Core stack
React, TypeScript, Fabric.js, SVG, Canvas APIs

01 / Overview

Project overview

A frontend engineering project exploring complex browser-canvas interactions and document state across multi-page designs.

02 / Contribution

Key contributions

  • Built multi-page canvas architecture.
  • Implemented drawing tools, layering, and SVG processing.
  • Developed frame-based image rendering and drag-and-drop placement.
  • Added PNG, JPG, PDF, SVG, and ZIP export support.

03 / Engineering

Engineering focus

The work centered on keeping React controls, canvas objects, document pages, and export behavior synchronized through a consistent editor state model.

Evidence

Inspect the work

This portfolio build does not currently have a public deployment or repository. The case study therefore describes only the implementation evidence available in this portfolio.