React Scribble Pad

Transparent Overlay for Sketch, Text, and Stickers.

🛠️ Installation

npm install --save-dev react-scribble-pad
yarn add react-scribble-pad

import React from 'react';

import { ScribblePad } from "react-scribble-pad";
import "react-scribble-pad/dist/react-scribble-pad.css";   // Must include the css file
  
function App(){

  return (
    <div>
      <ScribblePad />
    </div>
  );
}

🚀 Features

React Scribble Pad lets you add a fully transparent sketching layer on top of any webpage. Users can freely draw, type notes, place stickers and use as a whiteboard while still seeing and interacting with the content beneath.

• Color Palette – Choose colors and sketch freely on the canvas.
• Eraser Tool – Remove sketches with ease.
• Customization – Adjust text size and cursor thickness.
• Notes – Add text notes directly on the overlay.
• Whiteboard Mode – Switch to a clean screen and use it as a digital whiteboard.
• Motive - perfect for education, presentations, and live annotations.

🎹 Keyboard Shortcuts

Key	Action
1	🎨 Open the Palette – choose colors and adjust stroke size
2	🩹 Open the Eraser – erase parts of your sketch
3	🖱️ Open Cursor Tools – change cursor size or appearance
4	🔄 Reset Everything – clear the canvas
5	✏️ Add Texts – insert text anywhere on the canvas
6	📝 Make Draggable Notes – create sticky-style notes you can move around
7	🖥️ Switch to Whiteboard Mode – expand into fullscreen whiteboard
Esc	🔄 Reset Configured Tools
Del	🚮 Pressing Delete key on draggable notes, will simply delete them

Demo 🗿

A demo is more powerful than storytelling.

---

You know what's absolutely free?

• Leaving a ⭐ star
• 🍴Forking the repository
• No hidden fees, no subscriptions - just pure open-source love 🥰!

---

Powered by ☕️ & 🎧
Aryan Kalra