New Project
Collaborative docs app: real-time editing, comments, presence, live cursors, and per-document sharing. Built with Next.js and Velt.
A full collaborative-documents app built with Next.js (App Router) and Velt — like a minimal Google Docs. Sign in, see your documents, create new ones, share them with teammates (viewer / editor), and edit together in real time.
It demonstrates the core Velt features inside a realistic, multi-user app with working access control:
@veltdev/react) + TipTap CRDT & Comments packagesClick the Deploy with Vercel button above. The clone flow will prompt for the
two required Velt environment variables (NEXT_PUBLIC_VELT_API_KEY,
VELT_AUTH_TOKEN) and deploy the tiptap/ directory.
Then add a storage backend so the document directory persists (Vercel's runtime filesystem is read-only, so the local JSON store can't be used in production):
KV_REST_API_URL + KV_REST_API_TOKEN
automatically (the variables lib/documentStore.ts reads).See The document directory: local dev vs. hosting for details.
Create an app at console.velt.dev and copy your API key and Auth Token.
Open http://localhost:3000.
app/userAuth/AppUserContext.tsx stores the demo user you pick on /signin in
localStorage. The fixed demo users live in lib/demoUsers.ts.
In your real app: delete the demo pieces and pass your authenticated user (from NextAuth, Clerk, Auth0, …) to Velt. The only integration point is
components/velt/VeltInitializeUser.tsx.
components/velt/VeltInitializeUser.tsx builds the Velt authProvider. Its
generateToken callback calls POST /api/velt/token, which mints a JWT via the
Velt REST API encoding the user's access to the organization and the document
they're opening (with their viewer / editor role).
Velt is the source of truth for collaboration data and permission enforcement, but it has no "list every document a user can access" query — so the dashboard keeps a small directory of its own.
lib/veltRest.ts — server-only wrapper around the Velt REST API
(create / rename / delete documents, set access type, grant / revoke permissions).lib/documentStore.ts — the per-organization document directory used to
render each user's dashboard. This is the only place that touches storage.| Action | Route | Velt REST calls |
|---|---|---|
| Create | POST /api/documents | documents/add → documents/access/update (restricted) → auth/permissions/add (owner = editor) |
| List | GET /api/documents | — (reads the directory) |
| Rename / Delete | PATCH / DELETE /api/documents/[id] | documents/update / documents/delete |
| Share / Revoke | POST / DELETE /api/documents/[id]/share | auth/permissions/add / auth/permissions/remove |
A newly created document is set to restricted, so only explicitly invited
users can access it. AccessGate (app/documents/[id]/AccessGate.tsx) mirrors
this on the client: no access → locked screen, viewer → read-only editor.
Velt also ships a drop-in
<VeltUserInviteTool />share UI. This kit uses a customShareMenuso sharing is wired to the backend and the dashboard directory, but you can swap in the native tool if you prefer.
lib/documentStore.ts picks its backend automatically:
data/ (gitignored).ENOENT … mkdir '/var/task/.../data').
Provision a Vercel KV (Upstash Redis) store and the directory is kept in Redis
instead.Deploying to Vercel:
KV_REST_API_URL and
KV_REST_API_TOKEN automatically.NEXT_PUBLIC_VELT_API_KEY and VELT_AUTH_TOKEN as environment variables.lib/documentStore.ts is the only place that touches storage, so swapping Redis
for Postgres/SQLite/etc. is a single-file change.
