Show HN: Scribble – Realtime Whiteboarding for Developers
notion.so
notion.so
Co-creator of Scribble here. My friends and I are three undergraduate engineering students, and we’re building a digital whiteboard for remote software engineering teams.
Earlier this year, we transitioned to remote work during our software internships because of COVID-19. We noticed that a big thing we missed was being able to just walk over to a coworker's desk and draw something out, or huddling around a whiteboard to brainstorm ideas. Sure, we can type paragraphs over Slack or schedule a Zoom call, but we found they drag on and take a long time to resolve. We tried a few digital whiteboards like LucidCharts or Draw.io, but found them clunky to create simple diagrams.
To fix this, we wanted to create Scribble with a few principles in mind:
1. Asking for help should feel as simple as tapping a coworker on the shoulder. We made a Slack App so you can hop onto a whiteboard mid-conversation with a simple command - just type /scribble into your channel and click join.
2. Digital whiteboards need to feel seamless for synchronous collaboration to work. We give simple shortcuts to all the symbols you need - that means no more searching through hundreds of shapes, or messy freehand on a trackpad. We’re also happy to hear feedback if you feel there are any symbols we missed!
3. It’s your data. We integrate with your own Google Drive sign on and storage solutions. That means zero personally identifiable information or intellectual property gets saved to our servers.
We were able to build a really responsive web app with the help of open source tools such as Excalidraw (their approach to rendering symbols using the Canvas API was very foundational to the way we designed it for other symbols), as well as your everyday favourite web tools such as React, Express, Socket.io, and Typescript.
If you’re a developer who’s been missing that shared context and spontaneous back and forth with your coworkers, we’d love for you to give Scribble a try and let us know what you think!
First, to give some context, we mainly use our app in 2 cases so far. One is where you're explaining some technical concept over Slack, and you need to draw a quick and simple diagram to complement your thought. The other is where you're creating a slide deck for a feature design, and you create a diagram to be copied in one of the slides.
For Miro (or LucidCharts), there's friction to start drawing right away. You need an account to use the app, and making an account is surprisingly cumbersome in a few cases. For example, if your org doesn't have Miro linked with your company SSO, then it would be hard to start using your personal account to draw company-related IP (technical diagrams). In addition, if your org does have Miro linked with SSO, we've heard cases where you need to request access to that app through an IT ticket, which can take a day or two. That’s why we decided to move the SSO stage to the point of long-term storage, rather than at the beginning when you're just using the app.
Assuming you have an account though, there's friction in going to Miro and creating a new board, or using an existing board which may be a messy (kind of like a scratch pad). We personally see the value of being able to open something up from inside a Slack convo or go on a web page, and have a new canvas where you can start drawing right away.
There's some other small UX things that we didn't like. Eg. no easily discoverable keyboard shortcut to access common shapes, not being able to connect arrows to rectangles other than the 4 points prescribed, having to click twice to add a new type of shape.
However, Miro is a fantastic tool and has super cool features for those heavier workflows (templates, tons of integrations, commenting). We just didn't find it as suitable for those 2 lighter cases that I mentioned.
Curious as to what your students are using Miro for?
Thanks for bringing this point up though! Curious as to what your use case is when thinking about using our app? We're still not 100% sure on the most useful symbols/tools to add, so as we get more feedback, we’re happy to look into including free-form drawing.
> We found in our experience, most software developers either don’t have a tablet, or don’t use it regularly
It might be the case today, however if you were to merely plot the Monthly growth for the #users using pencil in 2020. It might show an increased adoption. This is my anecdotal guess, but I suppose you might have to substantiate this if you don't think free form drawing is not compelling
A core reason I love excalidraw so much is because of the handwritten and cartoony ability. It's fantastic and makes everything look like a draft. If that could be added and ease of use a tad nicer, I'd totally use this over Excalidraw for my teaching scratchpad!
Excalidraw is a great tool and we believe their hosted instance also supports collaboration for multiple users. Open sourcing the project is not in our current plan as we’re focused on iterating and adding more integrations that we think are useful to software engineers based on feedback; however, we’re open to the idea in the future if we have more bandwidth to support an open source project.
Thanks for your feedback on the styling of shapes! We wanted to focus Scribble on building more software specific symbols (and we’re looking into adding more scalable support for even more symbols down the road. Part of that meant reducing the amount of styling choices to optimize for speed.
Curious if there’s anything in particular you enjoy about those styles for your use case of a teaching scratch pad?
On a side note, Notion is also surprisingly good at quickly creating a simple landing page (easy formatting, gif support, collaborative editing, no code required)!
As it's described as a whiteboard and called "Scribble" I really expected to be able to use my cursor to draw on it.
- Slack app integration to make it easier to start whiteboarding sessions
- Adding the ability to save and load drawings with Google Drive
- Symbols that we commonly use (e.g., databases, clouds, tables)
- Removing features unnecessary to our use case (sloppy drawing mode, opacity, background colour customizability, etc.)
We're not monetizing this app—we wanted to share a tailored version of it that we found useful ourselves, and hope that you may find it useful too.
We’re open to any other concerns/questions as well.
> An acknowledgement to the contributors of the open source drawing tool Excalidraw. After using Excalidraw for some simple graphics and forking their repository to experiment with their architecture of the Web Canvas API in conjunction with Roughjs, we wondered if it was possible to give software engineers a set of common symbols that could be seamlessly created, almost as fluidly as a physical whiteboard.