🪴 gillchristian

Search

SearchSearch

ScriptureStudy

Mar 31, 2025 • 3 min read

My own personal Bible reading application.

Here’s a Twitter thread with updates on the progress.

Goals

I started this project because I’d like to experiment with improvements in the user experience of Bible study.

This is meant as ahome-cooked meal app where I can play around and try out different things.

Ideas & roadmap

Some ideas I want to experiment with

  • Black spaces in between some of the words
  • Inline or show footnotes on the side (Tufte CSS / Nutshell)
  • Comments: Notion style (just UI element, no multi player) per verses.
  • Chapter notes: Block editor on the side of the content, maybe with export/publish functionality.
  • More shortcuts (ie. vim style maybe?)
  • More gestures on touch devices
  • Side by side to compare versions or different chapters
  • Andy’s Working Notes style stacking

Things to fix or make it work:

  • Blank spaces in the HTML don’t get properly rendered. Words collapse to each other when there should be a space in between.
  • Properly extract verse content (plain text) to allow for copying verses.
  • Properly delineate verses so highlights don’t include titles.
  • Mobile: dismiss verse highlighter menu

Here’s a longer version of the list which I totally didn’t forget when I started updating this list here xD

Thoughts

Notes and scribbling

One of the experiments I did was to embed TLDraw on top of the content of each chapter.

But for some reason my fork of TLDraw had huge performance issues on mobile. Mobile made the most for scribbling since TLDraw supports drawing with stylus on touch screens so I wanted to use it on the iPad.

However I’m no fully convinced the scribbling on top of the content, so I didn’t want to fix performance issues to then remove it anyway.

Stacked notes

Andy’s notes popularized this idea of stacking notes.

This is a great UX for Bible study, you can keep opening new chapters and see and compare with the previous ones.

The state is kept in the URL by adding an array of stackedNotes in the search query.

https://notes.andymatuschak.org/About_these_notes?stackedNotes=zVFGpprS64TzmKGNzGxq9FiCDnAnCPwRU5T&stackedNotes=z6cFzJWgj9vZpnrQsjrZ8yCNREzCTgyFeVZTb&stackedNotes=zSn7SX7yMtnh1ZCQEG44TJoxrH7Udpm9oeEm&stackedNotes=z3SjnvsB5aR2ddsycyXofbYR7fCxo7RmKW2be&stackedNotes=z7kEFe6NfUSgtaDuUjST1oczKKzQQeQWk4Dbc&stackedNotes=z8V2q398qu89vdJ73N2BEYCgevMqux3yxQUAC&stackedNotes=z7z6uFero1JXyANDsq7P4RzeUemPWrHD7Ejmn&stackedNotes=z4qhD8UwNAmJDdJUC36BUGp5PEUfgfzZXvkhB

Such approach supports sharing both a single note (or chapter) or a stack of them.

Floating window for editor

I started to play around with drag ‘n drop by implementing myself a floating window were I will place an editor for the chapter notes. I could’ve finished already if I had used a library (like dnd kit) but I want to learn more about Browser APIs and event types that I haven’t used before as much (or at all).

One thing I learned is the drag gives (0, 0) coordinates when the mouse goes out of the screen. Thus if wants want to continue repositioning the element in the cross axis to the edge the mouse left the window through then mousemove has to be using, which is not part of the set of drag ‘n drop events. Thus in a sense reimplementing Browser behavior.

Support for dragging on mobile is also interesting since the touch events should be used in that case.

All of these edge cases are covered by libraries, and it’s probably what should be used when building a quick feature at work, but if I did that I would not learning anything new.

Inspiration

Resources

Graph View

Backlinks