Kinopio is a spatial thinking canvas for your new ideas and hard problems.
The kinopio-client is the client web app that users use to read and update spaces, cards, connections, etc. – which is saved to localStorage and to the kinopio-server via API requests, queued API operations, and websocket broadcasts.
- Kinopio Architecture and Costs
- How Kinopio is Made (How data is saved)
- Discord
git clone https://github.com/pketh/kinopio-client.git
cd kinopio-client
npm install
npm install -g @vue/cli
npm install -g hostile
hostile set localhost kinopio.local
npm run serve --host
https://kinopio.local:8080
You can force the local app to use the prod API by editing .env.local so that VITE_PROD_SERVER=true. Create env.local by duplicating and renaming .env.local.sample.
When the app starts up, the 🐸 kinopio-server URL will be displayed in the browser logs.
npm run lint
Use the Vue devtools for Firefox and Chrome. For Safari, uncomment code in main.js then,
./node_modules/.bin/vue-devtools
| File | Description |
|---|---|
router |
Client-side routes |
App.vue |
Root component, used by all routes |
store.js |
Vuex store, contains global observables and methods needed by multiple components |
currentSpace.js |
Vuex store module that handles loading spaces |
utils.js |
Functional methods that just do dom manipulations or common tasks. These can't access components or store directly |
views/Space.vue |
Contains the core interaction layer which sends user inputs to painting, connecting, dragging etc. components. Also where new connections are created and checked to see if they connect |
views/Add.vue |
kinopio.club/add page for browser extensions and iOS share sheet |
components/Card.vue |
Displays cards from store.state.currentCards, and shows CardDetails |
components/Connection.vue |
Displays connections from store.state.currentConnections, and shows ConnectionDetails |
components/Box.vue |
Displays boxes from store.state.currentBoxes, and shows ConnectionDetails |
components/Header.vue |
Used for moving between spaces, searching/filter, shows user presence, changing user prefs, and Kinopio meta options. Shown on all routes |
components/layers/MainCanvas.vue |
The layers used for drawing the paint strokes for multiple card and connection selection which reveals MultipleSelectedActions, scroll locking on touch, and other <canvas> elements that need to cover the viewport |
components/NewBlankTemplate.vue |
Template file for new components |
components/NewBlankDialogTemplate.vue |
Template file for new dialog components |
| State | Description |
|---|---|
offline |
indexedDB and API queue operations only |
not signed in |
indexedDB only |
space is read only |
cannot add cards or edit |
space is open |
can add cards, can only edit cards they created |
mobile |
touch handlers, no hover, small screen |
desktop zoom out |
using the zoom bar or cmd+/- |
pinch zoom out/in |
using native touch gesture on mobile |
group member or admin |
can see and edit all spaces in the group |
Post messages are used to communicate with a parent secureAppContext environment, such as the iOS app that wraps the website in a child webview.
The hello space serves as the entry point and marketing page for new users. It's generated within the app from hello.json.
To update it, create the space and export its json. Replace the contents ofhello.json with the new json file.
You shouldn't need to run this or update the cert until 2025, but just in case
To work with code that only works on https (e.g. clipboard copy and paste), mkcert was used to create a local ssl certificate
brew install mkcert
mkcert -install
mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'kinopio.local'