Split Keyboard
A PWA for note taking that uses a custom onscreen split keyboard. This PWA is designed for landscape mobile only in fact I wrote css that prevents rotation.
Key Features
- Support for multiple input buffers
- Customizable keyboards
- Command mode
- Custom commands
- Custom keyboard actions
My Role
Developer and Designer
Technologies Used
- React
- TypeScript
- Vite
- Vite-plugin-pwa
- Dexie
- React Router
- Zustand
Demo
-
Use your phone
split-keyboard.zian.co.za
- check the Source Code
Purpose
I built this project because I was curious as to whether a split digital keyboard would be useful. I first looked to see if there was a way that I could do it without coding, saw it was possible but not on my iphone so I decided to create a UI mock and then that turned into a proof of concept which then turned into a demo and eventually it ended up being this highly customizable offline pwa.
My Brag of the Project
I wanted to make it as customizable as possible so most UI elements are generated based on data allowing people to customize their keyboard to their heart's content be that a key that types the phrase: "I love Linux" or a key that deletes 200 characters.
Lessons Learned
- I could have fun creating something with my sibling, frantically trying to fix the bugs they kept finding in real time using a live server with hot reload.
- Don't ever start with javascript again