react-scribble-pad/README.md

React transparent overlay just made easy.

# React Scribble Pad

### Transparent Overlay for Sketch, Text, and Stickers.

<img width="1435" height="785" alt="image1" src="https://github.com/user-attachments/assets/d94fde81-537e-49c3-a8e6-931e6ca4a8bd" />
<img width="400" height="985" alt="iamge2" src="https://github.com/user-attachments/assets/f6ee340d-6926-42f1-8d58-c37043e0c149" />
<img width="400" height="985" alt="image3" src="https://github.com/user-attachments/assets/d3bb64ee-b970-4260-bc5f-67d8c33ed998" />

## 🛠️ Installation

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

**React**

```
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>
  );
}
```

**Next.js (App Router)**

```
"use client";

import { ScribblePad } from "react-scribble-pad";
import "react-scribble-pad/dist/react-scribble-pad.css"; // Must include the CSS file

export default function Page() {
  return (
    <div>
      <ScribblePad />
    </div>
  );
}

```

<br>

## 🚀 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.

<br>

## 🎹 Keyboard Shortcuts & Toolpad

| Key   | Action                                                                                               |
| ----- | ---------------------------------------------------------------------------------------------------- |
| `🔒`  | Enabling screen lock for touch users, prevents scrolling and lets them sketch directly on the canvas |
| `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                                   |

<br>

## 🗿 Demo

**[A demo is more powerful than storytelling.](https://scribble-pad-psi.vercel.app/)**

<br/>

## 🎁 Donate

[<img width="1090" height="306" alt="image" src="https://github.com/user-attachments/assets/ad84946b-d4b9-472f-b4e6-daea70872927" />](https://buymeacoffee.com/aryansmartb)

<br/>

---

<details>
  <summary>You know what's absolutely free?</summary>

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

</details>

---

<div align="center">

<br>
Powered by ☕️ & 🎧 <br>
Aryan Kalra

</div>