🖌 Notation

Evert Heylen
Sep 9 '18 · 2 min read · 157 views
The above is not an image, it's an embed :)
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).
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

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.

Interested in these kinds of hacks? There's more at our Notion Hacks community!

Updating...

Share on