Working code samples for adding QuickBlox in-app chat to JavaScript and React web applications. Each tutorial is a runnable project — clone the folder, paste your App Credentials into the config file, run npm start, and open the dev server in two browser tabs to see two users chat in real time.
The QuickBlox JavaScript SDK is the same library across all of these tutorials. What changes is the surrounding stack: a static HTML page versus a React + TypeScript app, and within React, the build tool you already use.
Read these in order if you're new to QuickBlox — each one assumes the concepts from the one before it. If you already know the basics, skip straight to the topic you need.
- One-to-One Chat — private 1:1 real-time messaging between two authenticated users with persistent history
- Vanilla JavaScript — plain HTML page, the SDK is loaded from a pinned CDN URL, no build step
- React — React 19 + TypeScript with two build-tool variants (Vite primary, Webpack alternative)
More topics — group chat, file sharing, typing indicators, read receipts, and backend token authentication — will be added here.
Folders are named by topic, not by tutorial number — one-to-one-chat instead of 01-one-to-one-chat. The order is set by the numbered list above, so adding or rearranging tutorials does not change URLs that have already been picked up by search engines.
Each project folder contains:
- A
README.mdthat names the result and lists the run steps - A
package.jsonthat declares all dependencies - A config file (
js/config.jsfor vanilla,src/config.tsfor React) — the only file you need to edit - A
tutorial-assets/screenshots/folder with the images used in the published tutorial
Sign up for a free QuickBlox account, create an application in the Dashboard, and add two test users on the Users tab. You'll copy the App Credentials (Application ID, Authorization Key, Authorization Secret, Account Key) and both users' logins, passwords, and numeric IDs into the config file of whichever tutorial you run.
- JavaScript SDK reference — docs.quickblox.com/docs/js-quick-start
- JavaScript SDK source code — github.com/QuickBlox/quickblox-javascript-sdk
- Q-municate Web — open-source production-grade React/TS chat client built on the same SDK → github.com/QuickBlox/q-municate-web
- QuickBlox React UI Kit — pre-built React components for the chat interface → npmjs.com/package/quickblox-react-ui-kit