GitHub - micouy/koper: Peer-to-peer collaborative code playground in a single
/" data-turbo-transient="true" />
Skip to content
Search or jump to...
Search code, repositories, users, issues, pull requests...
-->
Search
Clear
Search syntax tips
Provide feedback
--><br>We read every piece of feedback, and take your input very seriously.
Include my email address so I can be contacted
Cancel
Submit feedback
Saved searches
Use saved searches to filter your results more quickly
-->
Name
Query
To see all available qualifiers, see our documentation.
Cancel
Create saved search
Sign in
/;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up
Appearance settings
Resetting focus
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
micouy
koper
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>9 Commits<br>9 Commits
.github/workflows
.github/workflows
src
src
types
types
.gitignore
.gitignore
README.md
README.md
eslint.config.js
eslint.config.js
index.html
index.html
package-lock.json
package-lock.json
package.json
package.json
tsconfig.json
tsconfig.json
vite.config.ts
vite.config.ts
View all files
Repository files navigation
koper
Peer-to-peer collaborative code playground in a single
koper-demo.mp4
Getting started
Easiest way: open https://koper.powierz.art on both devices and connect.
Or download index.html from the release on your device. The person you want to collaborate with needs to download the same file on their device. Then both of you need to open the file.
One of you needs to copy your ID (just click on it) and give it to the other person, who needs to paste it into their app and click Connect. When you see 'connected', you're good to go.
The app should work on any device with a web browser.
Using the app
Once you're paired, you can start collaborating. The easiest way is to click on Load Example and then Run . You can extend (or reduce) the game in any way you want using p5.js, just remember to prefix any p5-specific variables with p5..
The code and the app state are persisted even if you close the tab.
Using shared state
In koper, you have two types of synced state: shared state and player state.
Shared state is for data that is not specific to any player. All players read and write the same shared values.
// Shared state - everyone sees and can modify this<br>state.set('gameStarted', true);<br>state.set('totalCount', 10);
Player state is specific to each peer. Each player has their own state that only they can write to, but everyone can read all players' states.
// Get this player's state - only you can write here<br>const player = state.getPlayer();<br>player.set('score', 5);
// Get all players' states - read-only<br>const allPlayers = state.getPlayers();
Local state is not synced and exists only on your device.
let temp = 0; // Local - only your device sees this
Troubleshooting
Multiple tabs on the same device
Opening the same HTML file in multiple tabs will not work properly. Use separate devices.
Peers not connecting
WebRTC connections are blocked in some networks, for example behind corporate firewalls, on university networks, or with restrictive VPNs. If the connection fails or stays in "connecting" state, you may need to use TURN. TURN servers relay traffic between peers when direct connection is not possible. Options include Twilio, Metered, or self-host with Coturn.
To add a TURN server to koper:
Click the chevron (▸) in the navbar to expand settings
Enter your TURN server details:
TURN URL: turn:your-server.com:3478
Username: your TURN username
Credential: your TURN password
Reconnect
How It Works
koper uses peer-to-peer WebRTC to connect devices without a central server. Code synchronization uses Y.js, a CRDT system that handles concurrent edits without conflicts.
When you type, the change is captured in Y.js, a diff is computed, and sent via WebRTC to peers. The receiving device applies the diff to its Y.js document. Both devices remain synced.
Tech stack: WebRTC via PeerJS, Y.js for synchronization, IndexedDB for local persistence, P5.js for code execution.
Development
To modify or build the app, clone the repo and run:
npm install<br>npm run dev
This starts a development server with hot reload.
To build for production:
npm run build
The built dist/index.html contains everything bundled. Upload it anywhere and it works.
License
MIT
About
Peer-to-peer collaborative code playground in a single
koper.powierz.art
Resources
Readme
Uh oh!
There was an error while loading. Please reload this...