# Kindle Snippets Viewer


**TL;DR:** I wrote a little web app to view Kindle Highlights; you can check it
out [here](https://kindle-snippets.netlify.app/).

One of my favorite features of reading books on Kindle is that you can highlight
interesting quotes as you read, and revisit those highlights later. Your Kindle
highlights are saved to The Cloud™️ for books that you've purchased from Amazon,
but books that are loaded directly onto the device don't get their highlights
uploaded.

For non-purchased books, highlights _are_ saved to the device's local storage,
but they're saved in a pretty ugly format:

```
Thinking in Systems (Meadows, Donella H.)
- Your Highlight on page 2 | Location 195-196 | Added on Saturday, April 13, 2019 3:32:30 PM

A system is a set of things—people, cells, molecules, or whatever—interconnected in such a way that they produce their own pattern of behavior over time.
==========
Thinking in Systems (Meadows, Donella H.)
- Your Highlight on page 4 | Location 238-239 | Added on Saturday, April 13, 2019 3:34:58 PM

Ever since the Industrial Revolution, Western society has benefited from science, logic, and reductionism over intuition and holism.
==========
Thinking in Systems (Meadows, Donella H.)
- Your Highlight on page 11 | Location 322-322 | Added on Saturday, April 13, 2019 3:40:07 PM

I have yet to see any problem, however complicated, which, when looked at in the right way, did not become still more complicated.
==========
...
```

There are a variety of services that exist for you to explore your Kindle
highlights -- for example, [clippings.io](https://www.clippings.io/) and
[Readwise](https://readwise.io/) -- but these services are not free, and are
more heavyweight than what I needed. For context,
[I like using Obsidian](/blog/2021/01/12/My-Organization-Stack/#obsidian) to
store notes, so I was mostly looking for an easy interface to scan through
highlights and copy the ones I still think are interesting into Obsidian.

Enter "Kindle Snippets": A super simple web-app that allows you to view your
Kindle snippets, and copy them to your clipboard.

![Screenshot of Kindle Snippets](https://benjamincongdon.me/blog/2022/03/06/Kindle-Snippets-Viewer/screenshot.png)

Kindle Snippets uses the `My Clippings.txt` file I alluded to earlier, which you
can get off your Kindle by connecting it to USB. I use
[Calibre](https://calibre-ebook.com/) to manage my Kindle, but I think you can
copy your clippings file off your device just by treating it as a USB drive. The
advantage to getting your clippings straight from the device instead of relying
on Amazon's cloud sync is that the local clippings file contains highlights from
_all_ books, not just ones that you've purchased from the Kindle store. This
means that you can get/view highlights from books that you've uploaded directly
to your Kindle.

The "Copy to Clipboard" button copies the selected highlight along with the page
number, making it super simple to transfer highlights into other apps, like
Obsidian.

## Implementation Notes

I'm fairly comfortable with React, and it's still quite popular as a frontend
framework, so it was a natural choice. I haven't done a ton of frontend work
recently, so it was interesting to see how the ecosystem has changed in the last
few years.

The biggest difference I noticed with the React ecosystem after not using it for
a while is that [Hooks](https://reactjs.org/docs/hooks-intro.html) have exploded
in popularity. To be honest, I still feel like Hooks are a bit of a hack.
They're a cool idea, and I'm all for increasing the number of purely functional
components, but they still have a bunch of
[footguns](https://typeofnan.dev/solid-js-feels-like-what-i-always-wanted-react-to-be/).

One other pleasant surprise was that using Typescript with React is a lot less
painful than it used to be. Everything Just Worked™️ when I bootstrapped a
project from create-react-app. The developer experience with VSCode is quite
good, too. Two thumbs up. 👍👍

I used [MUI](https://mui.com/) as my component library, and was also pretty
happy with it. It doesn't have a full "kitchen sink" of components, but the
components that it does have compose well with each other, so I was able to get
all the functionality needed without much effort. I was also quite impressed
with how small MUI compiles down to. The full production JS bundle of Kindle
Snippets is ~115kb. That's not _tiny_, but it's many times smaller than I used
to see with old projects I built on [Semantic UI](https://semantic-ui.com/).

---

That's pretty much it! I have a deployed version hosted
[on Netlify](https://kindle-snippets.netlify.app/) that you can try out, if
you're interested. I'd be happy to receive any feedback / feature suggestions.