Whiteboard Meets IDE: Code and Draw in Your Browser with pad.ws

Ever wished you could sketch out an idea while writing the code for it—without switching tabs or tools? That’s exactly what pad.ws offers: a browser-based whiteboard that doubles as a lightweight IDE. It’s like Excalidraw and VS Code had a minimalist lovechild, and it’s perfect for brainstorming, teaching, or just thinking visually while you code.

With 2.9k GitHub stars and growing, pad.ws is catching attention for good reason. It’s not just a toy—it’s a practical tool for developers who want to blend diagrams, notes, and code in one collaborative space.

What It Does

Pad.ws is a web app that lets you:

• Draw freely on an infinite canvas (shapes, text, arrows).
• Write and run JavaScript/TypeScript in embedded code blocks.
• Collaborate in real-time with multiplayer editing.
• Export your work as images or code snippets.

It’s built with modern web tech (Vite, React, WebSockets) and even supports Redis for persistent sessions. The UI is intentionally simple—no heavyweight IDE features, just the essentials for sketching and coding side by side.

Why It’s Cool

1. No context switching: Annotate your code with diagrams right next to it, or sketch a UI while prototyping its logic.
2. Multiplayer-first: Share a link and collaborate live, whether you’re pair-programming or workshopping an architecture diagram.
3. It’s open-source: Self-host it (MIT license) or tweak the code to add your own tools. Recent updates even added build-info endpoints and a modal component system.
4. Surprisingly lightweight: Despite real-time sync, it’s snappy. The backend uses Redis for efficiency, and the frontend avoids bloated dependencies.

How to Try It

1. Visit pad.ws and start drawing/coding immediately (no login required).
2. For local dev:

   git clone https://github.com/pad-ws/pad.ws  
   cd pad.ws  
   cp .env.template .env  # Configure Redis if needed  
   npm install && npm run dev  
   

3. Check the GitHub repo for advanced setups (Docker, multiplayer config).

Final Thoughts

Pad.ws isn’t trying to replace your IDE—it’s a supplemental tool for when you need to think differently. I’d use it for:

• Explaining concepts during code reviews (draw arrows directly on snippets).
• Drafting state machines or API flows with interactive notes.
• Remote team brainstorms where code and diagrams need to coexist.

The project’s active development (see their recent Redis singleton PR) suggests more features are coming. If you’ve ever scribbled pseudocode on a napkin, this might be your digital upgrade.

Got a cool use case? Let us know @githubprojects.