A simple web app to make drawings that are easy to embed. Made by Evert Heylen. This was made specifically to fill a shortcoming in Notion.
Open the webapp →
Usage
Once you're logged in, simply press the 'New drawing' button. You will have the option to either copy or open the link directly. In Notion, you can use the /embed
command and paste the generated URL. All drawings are visible to anyone who has the URL, but only you can edit them. Works best with pen input (like a wacom or surface pen).
There is also a short video tutorial!
Note: Google may log you out after a while, just go back to the homepage at notation-gcp.appspot.com to log back in so you can edit your drawings.
Features
Pressure sensitivity (using the Pointer events API)
Note: under Linux, start Firefox with MOZ_USE_XINPUT2=1
.
Dark and light mode support
Just like in Notion. Comes with the colors to back it up. (Note: picking a mode is only for logged in users, by default the light mode is used).
Very lightweight
To prevent excessive resource usage, the drawing interface uses the minimal amount of requests and javascript possible. The client-side code has no dependencies.
Usable in Jupyter Notebook
I wanted to draw something in a Jupyter Notebook, and apparantly it works just fine. I quickly cooked up this code snippet (height is optional, but I prefer to put in front of the rather long URL):
FAQ
I can't edit my drawings anymore?
You were probably logged out of your account. You will need to login again on the homepage. If you still can't edit your drawings, try opening the link in a new tab.
Can I edit my drawings inside the desktop or mobile app?
Not really. I need to verify you are logged into the corresponding Notation account to allow editing, and it's currently virtually impossible to log into Notation with your Notion app.
Will this always be free?
Probably, unless it uses more resources than Google App Engine allows on their free tier. Either way, you can of course host your own instance.
More questions?
You can contact me at evertheylen@gmail.com, or through the slack linked below.
Future features/bugs
/draw
command in Notion)For developers
Client is made with old-school Javascript. There are no dependencies on either frameworks, transpilers, minifiers, or libraries. However, a rather modern browser is required since I do use a number of new(-ish) features:
- Pointer events API
- Fetch API
- HTML5 Canvas
window.localStorage
The backend is written in Google Go and runs on Google Appengine. Source code is available on github. I'm not a front-end developer by any means and it's been 4 years or so since I wrote Go code, so both codebases are not as clean as they could be.