Let's build our own Mini-Figma with React Konva - An Open Source 2D Canvas Library!

Abstract:

To represent our thoughts better, what can be better than a whiteboard or a canvas? How does the tools like Figma, Canva, Excalidraw etc. provide us to jot down our thoughts in the form of elements on a canvas? What if we want to implement such on our own? Well, KonvaJS is is for the rescue (the Open Source world has got something for us, as always! ;D)

React Konva (library based on top of KonvaJS framework) provides us superpowers to carry our complex canvas interactions, elements, shapes, animations, transformations etc. This makes our journey to build our own mini-figma smooth and exciting!

Talk Outline

Introduction:

1. What are we going to learn and build
2. What is Canvas API and limitations for using to in vanilla form
3. Different Open Source Canvas Libraries and Frameworks

React Konva (discussion)

1. What is React Konva
2. Konva Architecture and APIs
3. Components
4. Stage
5. Layers
6. Shapes
7. Transformers

Feature 1: (live coding)

1. Create Infinite Canvas
2. Configure Stage Zoom in-out

Feature 2: (live coding)

1. Create Shape
2. Store in React State
3. Resize Shape
4. Drag and Move the Shape

Bonus (brainstorming)

1. How to add DOM elements in Canvas using Portals with help of `react-konva-utils` - a lib by OSS community (will cover fundamental basics of React Portal)
2. Discussions on Optimizations and Best Practices that the Open Source community has suggested

Q/A (brainstorming)

End Notes

1. The motive (and also the reason of selection of this topic) is to talk about Open Source tool used by millions. How Open Source enables us to build amazing things! And to talk about Web, its concepts and fundamentals served in form of live building at the end!
2. Have worked on this technology for quite a long time, and have got experience of building it from ground up!
3. The content can be trimmed, altered based on requirements, feedbacks and time-bound.