A real-time collaborative word cloud for classrooms, workshops, and live events.
Live Word Cloud is a single-file web app that lets facilitators pose a question on screen while participants submit words from their phones via QR code. All responses appear instantly in a beautiful, animated word cloud — with more popular words displayed larger.
- Real-time collaboration — Submissions appear instantly across all connected devices
- QR code join — Participants scan to join from any device, no app install needed
- Live word cloud — Animated spiral layout with frequency-based sizing and color variation
- Facilitator controls — Edit question, lock/unlock submissions, toggle duplicates, new session, clear all
- Presentation-ready — Fullscreen mode, dark glassmorphism design, export as PNG
- Cloud & list views — Toggle between word cloud and ranked list
- Anti-spam — Rate limiting, profanity filter, input validation
- Zero dependencies — Single HTML file, no build tools, no backend required
- Demo mode — Load sample data to preview the word cloud instantly
| Layer | Technology |
|---|---|
| Frontend | HTML5, CSS3, Vanilla JavaScript |
| Real-time Sync | BroadcastChannel API, localStorage events, polling fallback |
| QR Generation | qrcode-generator (CDN) |
| Design | Glassmorphism, CSS custom properties, responsive layout |
┌─────────────────────────────────────────────────┐
│ index.html │
│ │
│ ┌──────────────┐ ┌───────────────────┐ │
│ │ Facilitator │◄──────►│ localStorage │ │
│ │ View │ │ + Broadcast- │ │
│ │ (word cloud, │ │ Channel │ │
│ │ QR, stats) │ │ (cross-tab sync) │ │
│ └──────────────┘ └───────────────────┘ │
│ ▲ │
│ ┌──────────────┐ │ │
│ │ Participant │◄──────────────┘ │
│ │ View │ │
│ │ (input form, │ │
│ │ feedback) │ │
│ └──────────────┘ │
└─────────────────────────────────────────────────┘
- Any modern web browser (Chrome, Firefox, Safari, Edge)
- A local HTTP server (for cross-tab real-time sync)
-
Clone the repository:
git clone https://github.com/alfredang/wordcloud.git cd wordcloud -
Start a local server:
python3 -m http.server 8080
-
Open the facilitator view:
http://localhost:8080/index.html -
Scan the QR code or open the join link on another device/tab to submit words.
Click Demo Data in the toolbar to instantly populate the word cloud with sample words.
- Facilitator opens the app and a unique room is created automatically
- A QR code and join URL are displayed for participants
- Participants scan the QR code, see the question, and submit words
- Words are synced in real-time via
BroadcastChannel+localStorage - The word cloud renders with spiral placement — frequent words appear larger
- Facilitator can lock submissions, clear data, export PNG, or start a new session
This is a single HTML file — deploy anywhere that serves static files:
- GitHub Pages — Push and enable Pages in repo settings
- Vercel —
vercel deploy - Netlify — Drag and drop the file
- Any web server — Just serve
index.html
Note: For multi-device real-time sync beyond the same browser, connect a backend (WebSocket, Firebase, or Supabase). The code is structured to make this straightforward.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
- qrcode-generator — QR code generation
- Built with vanilla HTML, CSS, and JavaScript