Create diagrams, sketches, and notes with this free online whiteboard tool. Features include undo/redo, custom brush sizes, and image export. No login needed.
AI Generation Prompt
Technical Specification: Free Browser-Based Whiteboard Tool
Overview
A high-performance, single-file browser application designed for quick sketching, diagramming, and brainstorming. The tool uses the HTML5 Canvas API to provide a smooth, low-latency drawing experience in a clean, professional interface.
Core Features
- Responsive Canvas: Automatically adapts to window size with coordinate mapping for mouse and touch inputs.
- Drawing Tools: Brush, Eraser, Line, Rectangle, and Circle primitives.
- Customization: Color palette selector (preset colors) and configurable brush/stroke thickness.
- Undo/Redo: In-memory stack management for up to 50 operations.
- Export: Save canvas content as a PNG image directly to local storage.
- Clear Canvas: One-click reset with a confirmation modal.
UI/UX Design
- Layout:
- Top Navigation Bar: Sticky header containing tool selection, color picker, and utility buttons (Undo, Redo, Clear, Export).
- Main Canvas Area: Takes up the remaining viewport space, styled with a light gray border and smooth drop shadows.
- Aesthetic:
- Color Palette: Soft grays (
#f8f9fa), clean whites (#ffffff), and a primary brand color (e.g.,#3b82f6for active tool indicators). - Typography: Sans-serif, clean UI font (e.g., system-ui, -apple-system).
- Animations: Subtle transitions for button hover states, tool activation, and modal appearances.
- Color Palette: Soft grays (
Technical Constraints & Implementation
- Architecture: Single-file HTML (containing CSS and JS). No external build steps.
- Persistence: Strictly prohibited. No
localStorage,sessionStorage, or cookies. All state is maintained in RAM via Javascript objects (e.g., an array for history steps). - Compatibility:
- Sandboxed Iframe compliant: Use only standard DOM events.
- Modals: Use custom
<div>overlays for confirmation (Clear Canvas) instead ofwindow.confirm(). - Browser API: Use
canvas.toDataURL()for export, triggered via a generated<a>tag download.
- Input Handling: Must support both mouse (mousedown, mousemove, mouseup) and touch (touchstart, touchmove, touchend) events to ensure mobile responsiveness.
Design System (Light Mode Only)
- Background:
#ffffff - Secondary Surface:
#f1f5f9(Toolbar background) - Border/Dividers:
#e2e8f0 - Text:
#1e293b - Accent (Active Tool):
#3b82f6
Development Guidelines
- No Frameworks: Use standard Vanilla JavaScript ES6+.
- CDN Libraries: You may include
Lucide Icons(via CDN) for toolbar icons. - Event Listeners: Efficiently handle canvas resize events to ensure the drawing coordinate system scales correctly without losing existing strokes.
- Performance: RequestAnimationFrame should be used for rendering updates if complex shapes are added, ensuring smooth interaction.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
Is this whiteboard tool free to use?
Yes, this tool is completely free. There are no subscriptions, hidden fees, or premium tiers for accessing the drawing features. You can access all drawing tools, export options, and customization settings without creating an account or providing any personal information. It is designed to be accessible to everyone.
Can I save my drawings for later?
Since this app runs entirely in your browser memory for maximum privacy, drawings are not saved on a server or within browser storage. We prioritize your privacy by keeping all interactions local to your session. To keep your work, you must use the built-in export functionality. This allows you to download your canvas as a high-quality PNG image file directly to your local device at any time.
Does this whiteboard require an active internet connection?
This tool is built as a client-side application. Once the single page is fully loaded in your browser, you can continue drawing, editing, and using all tools even if your internet connection is interrupted. The absence of server-side dependencies ensures high performance and immediate responsiveness for all your sketching needs, regardless of network stability.
Is my drawing data private?
Your data is strictly private and remains local to your current browser session. We do not transmit your sketches to any servers, nor do we store them in cookies or any permanent browser storage. When you refresh or close the browser tab, the session memory is cleared, ensuring that your work remains strictly on your device and is not accessible by anyone else.
