ribbit/examples/flask-collab

Flask Collaboration Example

A minimal Flask server demonstrating ribbit's collaboration features: real-time sync, presence, locking, and revisions.

Setup

pip install flask flask-sock

Copy (or symlink) the ribbit dist into the static directory:

ln -s /path/to/ribbit/dist/ribbit static/ribbit

Run

python server.py

Open http://localhost:5000 in multiple browser tabs. Edits in one tab appear in the others in real time.

What it demonstrates

• Real-time sync: WebSocket relays document updates between clients
• Presence: colored badges show connected users and their status
• Revisions: save button creates named revisions, click to restore
• Locking: (available via console: editor.lockForEditing())
• Source mode: entering markdown mode pauses sync, shows remote change count

Architecture

Browser A ──┐
            ├── WebSocket ──→ Flask server ──→ WebSocket ──→ Browser B
Browser C ──┘                     │
                                  ├── /api/revisions (REST)
                                  └── /api/lock (REST)

The server is ~160 lines. In production you'd replace the in-memory stores with a database and add authentication.