Excalidraw Clone Demo

Excalidraw is a popular open-source whiteboard tool that allows users to create drawings and diagrams easily. In this demo, we will be creating a clone of Excalidraw using React.js and Konva.js.

React.js is a popular JavaScript library for building user interfaces, while Konva.js is a 2D canvas library for drawing shapes, images, and text on the web. By combining these two libraries, we can create a powerful whiteboard tool similar to Excalidraw.

To get started, make sure you have Node.js installed on your machine. Then, you can create a new React project using Create React App:

    
    npx create-react-app excalidraw-clone
    cd excalidraw-clone
    
    

Next, install the Konva.js library using npm:

    
    npm install konva
    
    

Now, you can start building your Excalidraw clone by creating a new React component that will draw shapes on the canvas using Konva.js. You can find the complete code for the demo here.

Remember to import the necessary Konva components in your React component:

    
    import { Stage, Layer, Rect, Circle, Text } from 'react-konva';
    
    

Then, you can start creating your whiteboard tool by adding shapes and text to the canvas:

    
    function ExcalidrawClone() {
        return (
            <Stage width={window.innerWidth} height={window.innerHeight}>
                <Layer>
                    <Rect
                        x={20}
                        y={20}
                        width={100}
                        height={100}
                        fill='red'
                    />
                    <Circle
                        x={200}
                        y={200}
                        radius={50}
                        fill='blue'
                    />
                    <Text
                        text='Hello, World!'
                        x={400}
                        y={400}
                        fill='black'
                    />
                </Layer>
            </Stage>
        );
    }
    
    

That’s it! You have now created a simple Excalidraw clone using React.js and Konva.js. Feel free to play around with the code and add more features to make it even more powerful.

Thanks for reading!