Drawing in my notes

Last night, while preparing my notes on Vectors, I needed to do some illustrations. The immediate option was to use code to draw them. I had seen this library and wanted to use it because it made the lines look hand-drawn; the perfect aesthetic I was looking for.

So I started; begun to write one line for each stroke. Then I realize this was going to be cumbersome since I may end up having lots of illustrations to do for this note in particular.

Then I thought, why not build a real-time illustrator right into my blog and then do the drawing right there. This gave birth to Draw.tsx. A 600-line React component which I can embed into markdown files and start drawing right away.

The above illustration was done with Draw. I am fascinated with this ease of illustration [myself].

How it works

In development mode, ie, process.env.NODE_ENV === 'development', drawing is enabled. So you can draw lines, rectangles and ellipses. You can also do freehand drawing and add texts. After adding any element, the illustration is saved by calling an endpoint served by express. The server, which is just 30 lines of code, saves the illustration in a JSON format into public/drawings/ directory.

In production mode, when the site is live, editing is disabled. The component then loads the illustration from the public folder mentioned earlier.

Simple!

…and the markdown

In the markdown file, all I do is add entry like:

This is the same draw component in this post

<Draw aspectRatio={16/9} id="illustrator-reality-fantasy" client:load />

Features

I took lots of care in developing this. So here are all the considerations and features:

• Light + dark modes. If you toggled between light and dark modes, the colors change to fit. So black outlines become white in dark mode. Darker colors are slightly brighter in dark mode as well.

• Responsivenes. If you shrink/expand the viewport, the illustration adapts. Also pixel densities have been taken care of.

• Illustration outline. Yupp, so you can remove some elements as and when without having to clear everything.

• Edit after publish: I can always edit an illustration. Even after years, right there!

I’m happy

I’m very happy to have invested in this as it’s going to ease my authoring workflow SIGNIFICANTLY. Compared to the following methods, this beats all:

• Figma/Excalidraw? Using these will mean I open another app and export some SVG, put it in the right directory. Edit the color values to make them responsive to color schemes.