Pebble
Pebble is companion for your Obsidian second brain, it helps you capture atomic notes on the go with your mobile phone. It offers one way syncronization with obsidian vault.
The Problem
I have been using obsidian for more than 2 years now and I just love it and its community driven plugins. My setup is that I don't have premium so my notes are not synced. I tried some plugins to sync using cloud based storage and it was in vain, so I ditched the idea of syncing the notes. I was using google keep to capture my thoughts and quick atomic notes and this had lots of fictions with it. So I developed Pebble and Pebble sync obsidian plugin to solve the problem of quick capture.
The Idea
I was working on my personal website with Cloudflare workers and pages and then I came across lots of other service cloudflare provides for free. I also find about service workers, indexed db. And then I connected the dots and got the idea that I can create ofline first Progressive Web App (PWA) that is fully ofline and can sync the data with cloudflare KV when connected to the internet.
To talk about the background of naming this project, I was in biratnagar and walking at evening and I saw lots of pebble on the construction site, and then I got the idea that collective pebbles can build the empire and I named it pebble.
How It Works
Firstly to fully test this you need to host it with Cloudflare workers. You have three components to setup, First is cloudflare workers, you can find detailed guide on how to host it on cloudflare workes in the the github repo or I will create a guide and link here in this post. Second is PWA, you will be able to access it once you deploy your workers. And last is Obsidian plugin to sync with your obsidian vault. I have submited the plugin to the be listed in community plugins, may be in 2-3 days you will be able to find it in community plugins of obsidian.
Cloudflare Workers: Cloudflare workers is used to host it because it provides the computing service necessary for our needs for free. It has the edge computing which makes our application super fast and KV is amazingly good key value storage servie that we can use for free. Progressive Web APP: I went to Progressive Web Approach because it is easy to develop and you don't need to install it from any other platform, you just use your browser and browse to your URL and thats it you can install and your device has all the data stored on it. Obsidian Plugin: I have made it such a way that you cannot store the data in cloudflare KV for the long run it is made to make sure you are the owner of your notes. So you need a place to store your notes securely forever and your Laptop's is in your control and obsidian is great tool to create notes in markdown file. So, to sync your capture notes into your Obsidian vault this plugin is necessary.
You create notes in your phone -> CloudFlare KV -> Obsidian Vault
Tech Stack
List of the technology that I used to develop this awsome project.
- SvelteKit: It simplifies to create beautiful and super fast front end and backend
- shadcn-svelte: It is a UI components library
- Tailwind CSS: it is a CSS framework to stylize web page fast and easily
- Vite PWA plugin for offline functionality
- Local Persistance with Dexie(Indexed DB)
- Cloudflare Workers + Cloudflare KV for syncing
Challenges & Learning
Challenges that I faced
API keys management: I faced major challenge while working with syncing and authentication, I initially thought of making user able to create API keys through the App itself but it required communicating with server and it was too slow also, API keys was easily accessible so what I did was utilized the variables in workers deployement. Now user can create keys at time of deployement and use that key in syncing.
Things that I learned
I learned that we can create any kind of near native performance web app with the help of the PWA and indexed db. Service workers make web app installable onto the user's device and it also make offline possible.
Results
Working offline first PWA to capture your thoughts and sync with your obsidian vault.
Try It Yourself
I have made this project open sourced so that you can deploy this in cloudflare yourself.
GitHub Repository: https://github.com/sapienskid/pebble Obsidian Plugin Repository: https://github.com/sapienskid/pebble-sync
Live Demo: https://pebbledemo.savinpokharel.workers.dev/
What's Next
I am open for collaboration to make this tool better for everyone, I am open for suggestion and feedback, you can contact me anytime and I will try my best to reach out to you.