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):

‣

Code snippet

from IPython.display import HTML

def draw(p1, p2=None):
    if p2 is None:
        url = p1
        height = 500
    else:
        url = p2
        height = p1
    
    return HTML(f'<iframe height="{height}" width="100%" src="{url}"></iframe>')

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

~~Undo functionality~~

Support for erasing instead of clearing all

Easier and better integration (preferably a /draw command in Notion)

Listing a users drawings on the homepage

iOS or Safari support? Pointer Events is not currently supported...

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:

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.

Notation