Customization

Add review and collaboration UI that looks like your product.

Theme it with CSS variables, restructure it with wireframes, compose it from primitives in your own UI library, or build it headless, and extend behavior with events, hooks, and REST APIs.

// No more collaboration UI that looks like it came from somewhere else.

Get Free API Key Book Demo

Free tier. No credit card. First comment in 5 minutes.

SDSales deck / slide 4 · pricing

live

body--velt-light-mode-accent#4f46e5--velt-border-radius-md12px--velt-default-font-familyInter

Visible toEveryone

Maya2m

Desktop

Source added to the deck, ready for your review before slide 4 ships.

Reply or add others with @

--velt-light-mode-accent: #4f46e5 applied, no Shadow DOM change needed

SDSales deck / slide 4 · pricing

live

const { data } = useGetCommentAnnotations();
// data: CommentAnnotation[] (null while loading)

slide 4 · pricingyour render

data.map() your own pin component, on any surface

useGetCommentAnnotations() · Velt's data, your render

Themes Playground

3M+ comments created in products built on Velt.

Teams that moved from Liveblocks or Cord for design control.Compare Velt

What it is

Velt owns the behavior. You own the look.

Velt customization is how you make the collaboration UI match your product: Velt owns the core behavior, data, and real-time sync, and you own the presentation. Take over as much of the look as you want across four layers, CSS, wireframes, primitives, and headless, and extend behavior through custom actions, events, hooks, and REST APIs. A human or a coding agent can turn a design into a working Velt UI.

View Docs Themes Playground

Sales deck · slide 4 · pricing

Velt default

Visible toEveryone

Maya1w

Desktop

Source added to the deck. Ready for your review before slide 4 ships.

Reply or add others with @

Your design system

Visible toEveryone

Maya1w

Desktop

Source added to the deck. Ready for your review before slide 4 ships.

Reply or add others with @

same behavior, data, and real-time sync · only the look changes

The spectrum

Pick the layer that expresses your design.

Start at CSS and escalate only when the layer below cannot express your design. Mix layers on the same surface.

less effort, Velt does moremore effort, you do more

01CSStheme
02Wireframesyour layout
03Primitivescompose, your UI
04Headlessbuild it all

CSS layers on top of every approach

Behavior, any layer

custom actionsevents (.on)hooks (read / mutate / control)REST APIs

How it works

Pick the layer, extend the behavior.

Install the SDK, choose how much of the look you take over, then wire in your own behavior where needed.

01Install the SDK and drop in a component

app.tsx

// install the SDK and drop in a component
npm install @veltdev/react

import { VeltProvider, VeltComments } from '@veltdev/react';
<VeltProvider apiKey={VELT_API_KEY}>
  <VeltComments />
</VeltProvider>

02Pick your presentation layer

your-theme.css

// pick your presentation layer:
// CSS variables apply globally, no Shadow DOM change needed
body { --velt-light-mode-accent: #4f46e5; }

// or set shadowDom={false} for selector CSS and wireframes
<VeltComments shadowDom={false} />

03Extend behavior where needed

your-file.tsx

// extend behavior where needed
commentElement.on('commentPinClicked').subscribe(onClick);

// read, mutate, control through hooks
const { addComment } = useAddComment();

// REST APIs from your backend
POST https://api.velt.dev/v2/commentannotations/comments/add

With Velt

One system across every layer.

CSS variables pass through the shadow DOM, so variable theming always works. Selector CSS and styled wireframes need shadowDom={false}. Wireframes are cloned markup, so your own interactive components do not run inside a slot. For your own UI library or interactivity, use primitives, which are real React components you can wrap in MUI, shadcn, or Radix. Many parts are off by default (reply avatars, priority, minimap, @here, device badge) and switch on with a prop. Behavior extends through element API methods, subscribable events, headless hooks that read, mutate, and control, and the REST APIs.

mix layers on the same surface, one registry per app

Build it yourself

A component system that stays live.

CSS variable theming through the shadow DOM
Wireframe slots for custom HTML structure
Primitive components to wrap in MUI, shadcn, or Radix
Headless hooks for PDF, canvas, and video surfaces
Custom actions, events, and hooks for behavior extension
Correct against live multiplayer at every layer

A themeable, restructurable, headless-capable component system that also exposes events, hooks, and APIs while staying correct against live multiplayer behavior is a UI framework in its own right. Velt gives you the whole spectrum, from a one-line color change to a fully custom UI, so your team styles and extends the layer instead of building it.

Works across every SDK target

Vue

Showcase

From a color change to a full rebuild.

Four presentation layers plus a behavior axis, mixable per surface. Each card is the live SDK. Toggle to Code for the exact snippet.

01css

your-theme.css--velt-light-mode-accent#4f46e5--velt-border-radius-md14px--velt-default-font-familyInter Tight

Maya2m

Desktop

Source added to the deck, ready for review before slide 4 ships.

Reply or add others with @

the same default dialog, recolored by your variables

// css

// selector CSS needs shadowDom={false}; theme variables apply either way
<VeltProvider apiKey="..."><VeltComments shadowDom={false} /></VeltProvider>

body {
  --velt-light-mode-accent: #4f46e5;
  --velt-border-radius-md: 12px;
}

CSS theming

Recolor, respace, and retype with --velt-* CSS variables, or your own CSS or Tailwind. Variable theming even works through the shadow DOM. The fastest path.

02wireframes

3 commentsResolve all

Maya1m

Source added to the deck.

Reply to Maya…@

// wireframes

<VeltWireframe>
  <VeltCommentDialogWireframe>
    <VeltCommentDialogWireframe.Header>
      <VeltData field="annotation.comments.length" /> comments
    </VeltCommentDialogWireframe.Header>
    <VeltCommentDialogWireframe.Composer />
  </VeltCommentDialogWireframe>
</VeltWireframe>

Wireframes

Supply your own HTML layout per slot (header, thread card, composer, empty state) and add, remove, or reorder parts while Velt keeps the behavior and data wiring.

03primitives

<Card> · shadcn/ui

Velt primitive · <VeltCommentDialog>

Brand Agent2m

This pricing claim needs a source before it ships.

2 Replies

<Button> · MUI

// primitives

import { VeltCommentDialog } from '@veltdev/react';

<MuiCard>
  <VeltCommentDialog annotationId={a.annotationId} />
</MuiCard>

Primitives

Compose Velt's building-block components yourself and wrap them in your own UI library, MUI, shadcn, or Radix. Real React components, full control.

04headless

const { data } = useGetCommentAnnotations();
// CommentAnnotation[] -> your own pins

your <canvas> · PDF · video timeline21

// headless

const { data } = useGetCommentAnnotations();

return data?.map((a) => (
  <MyPin key={a.annotationId} data={a} />
));

Headless hooks

Velt gives you data and actions through hooks. You build 100 percent of the UI, even on surfaces Velt cannot draw, like PDF, canvas, or a video timeline.

05mix

dialog · wireframe

<slot>

Maya

Source added.

sidebar · primitive

Brand Agent

Flagged pricing.

one <VeltWireframe> registry · CSS themes both

// mix

<VeltWireframe>{/* dialog slots */}</VeltWireframe>
<VeltCommentsSidebar />   {/* primitive, same app, one registry */}

Mix per surface

Wireframe the dialog, use the sidebar as a primitive, theme both with CSS, all under one VeltWireframe registry. You are not locked into one layer.

06custom data

SDThread / your fields

in review

Brand Agent2m

This pricing claim needs a source.

custom.channel#brand-review

deal.stageProposal sent

{priority}P1

// custom data

<div>
  <VeltData field="annotation.status.id" />
  <VeltData field="dealStage" />
</div>

Your own data in the UI

Render your app's fields inside Velt components and wireframes with template variables and VeltData, and read that context back out. Threads can show your data, not just Velt's.

07conditional

velt-if · reviewer

Pricing claim needs a source.

reply avatarspriority

viewer

Pricing claim needs a source.

read only

reply avatarspriority

// conditional

<VeltIf condition="{user.role} === 'reviewer'">...</VeltIf>
<VeltComments replyAvatars={true} minimap={true} />

Conditional UI and hidden features

Render differently by user, role, or any condition with VeltIf, and switch on parts that are off by default: reply avatars, priority, minimap, @here.

08variants

variants

compactfullinline

applied everywhere

CommentscompactSidebarcompactInboxcompact

// variants

<VeltComments variant="compact" />

UI variants

Define a collection of reusable component variants once, then apply them consistently across every surface in your product.

09behavior

commentElement.on('commentPinClicked')live

nowcommentPinClicked fired · pinned to slide 4event

nowuseAddComment() mutate via hookhook

nowPOST /v2/commentannotations/comments/add200

// behavior

commentElement.on('commentPinClicked').subscribe(onClick);
const { addComment } = useAddComment();

# REST: create a comment from your backend
POST https://api.velt.dev/v2/commentannotations/comments/add

Extend behavior with APIs, events, and hooks

Velt owns the core sync, but you customize behavior: attach custom actions and handlers, subscribe to events, mutate through hooks, and call the REST APIs.

10agent

Figma · frame

Velt · generated

Maya

Looks good.

// agent

// Decision tree (guide 02):
// only colors? CSS.
// new layout? Wireframes.
// own UI library or interactivity? Primitives.
// own everything? Headless.

Design to code, agent-ready

The customization model is deterministic and documented end to end, so you or a coding agent can turn a Figma design into a working Velt UI.

View Docs Themes Playground

Little big details

The full system, enumerated.

The showcase is the highlight reel. This is the index.

Full set of --velt-* theme variables for color, radius, spacing, and typeSeparate --velt-light-mode-* and --velt-dark-mode-* color variablesStateful CSS classes to target, like --selected and --loadingCustom font-family via --velt-default-font-family and class overridesshadowDom={false} for selector CSS and styled wireframesWireframe components for every Velt surfaceSub-components for each part via dot notation (Header, Body, Composer)Template variables like {annotation.status.id} and {user.name}velt-if, velt-class, and velt-data tokensPer-slot behavior wired by VeltPrimitive components for full control (98+ for the Comment Dialog alone)Sub-component for nearly every child elementWrap in any UI library: MUI, shadcn, RadixTargeted single-component customizationuseGetCommentAnnotations, useAddComment, and more headless hooksRender on PDF, canvas, and video timelinesElement API methods (getCommentElement and more)Subscribable events via .on()Action components (VeltButtonWireframe) with click callbacksCustom data via UI State (client.setUiState)REST APIs (POST /v2/commentannotations/comments/add and more)Reusable named UI variantsReply avatars, priority, minimap, @here, device badge (off by default)Coverage: comments, sidebar, notifications, reactions, presence, cursors, recorder, mentions, activity log, annotationsDark mode and theme presetsFramework targets: React, Next.js, Vue, Angular, HTML

Make it yours

The tools and the system behind it.

Design tools to preview and prototype, and the component system to build on.

Design tools

The Themes Playground lets you design and preview a theme live against real components. The Figma UI Kit gives you the components to design against. The Launch Kit gets you to production faster.

playground.velt.dev

live preview

theme.css

--velt-light-mode-accent#4f46e5

--velt-light-mode-background-0#ffffff

--velt-border-radius-md12px

--velt-default-font-familyInter

// preview your theme live
playground.velt.dev/themes

// design against the Velt Figma UI Kit

The component system

Prebuilt components for the fast path, wireframes for structure, primitives for full control, headless hooks for everything else. All themeable with the variable system, plus events, hooks, and APIs for behavior. Dark mode and theme presets included.

@veltdev/reactone system

CSS variablesrecolor, respace, retypethemeable
Wireframesyour HTML per slotlayout
Primitiveswrap in MUI, shadcn, Radixyour UI
Headless hooksVelt's data, your renderheadless
Events + APIs.on(), hooks, RESTbehavior
Dark modetheme presets includedbuilt in

all themeablestays live

// the whole spectrum in one import
import {
  VeltComments,             // prebuilt
  VeltWireframe,            // wireframes
  VeltCommentDialog,        // primitive
  useGetCommentAnnotations, // headless
} from '@veltdev/react';

In production

Looks like the tools your users already know.

Velt can be styled into any pattern your users trust. These are in production today.

Slide 4 · pricing
2MayaBrand Agent
Canvas commentslike Figma.
forecast.xlsxQ3 pricing
PlanQ2Q31Starter$29$352Pro$79$85
Cell commentslike Google Sheets.
0:420:001:20
Video commentslike Frame.io.
Q3 pricing
Sarah
three editors and an agent, one doc
Co-editinglike Google Docs.
#sales-deck
Jordan started a huddle
live
Huddleslike Slack.
liveJordanBrand Agent
Presence and cursorslike Miro.
Inbox2
Brand Agent flagged pricing
2m
agent
Sarah approved the change
14m
approved
Notificationslike Knock.

Where it fits

Sales enablement Fintech Operations AI-native SaaS

SOC 2 Type IIHIPAA with BAAData residency

Customization is presentation and behavior extension only and does not change where your data lives. The one setup flag it touches is shadowDom. See Enterprise and Self-hosting.

View Trust Center

Proof

Design control, in production.

Teams that kept a cohesive look and feel.

Design system match

Velt's customizable components let us keep a cohesive look and feel. Our users never knew it was a third-party SDK.

Senior PM, Google

FAQ

Questions buyers and agents ask.

Can I make Velt match my design system?

Yes. Theme everything with --velt-* CSS variables, override classes with !important, and reuse your own CSS or Tailwind. For selector-based CSS, set shadowDom={false} so your styles reach inside the component.

Can I change the layout, not just the colors?

Yes. Wireframes let you supply your own HTML layout for each slot (header, thread card, composer, empty state) and add, remove, or reorder parts while Velt keeps the behavior and data wiring. This is the default for structural customization.

Can I customize behavior, not just appearance?

Yes. Velt owns the core sync, but you extend behavior: attach custom actions and handlers to components, subscribe to events with .on(), mutate through headless hooks, and call the REST APIs (for example POST /v2/commentannotations/comments/add).

Can I use my own React component library inside the comment UI?

Yes, with primitives, which are real React components you can wrap in MUI, shadcn, or Radix. Wireframes clone your markup, so interactive components do not run inside a slot. For your own interactivity, use primitives.

Can I build a completely custom UI?

Yes. Headless hooks give you the data and actions, and you build 100 percent of the UI, including on surfaces Velt does not draw, like a PDF, a canvas, or a video timeline.

Why isn't my CSS working?

Velt can render inside a shadow DOM, which your global stylesheets cannot reach. CSS variables still pass through, so variable theming works. For selector CSS or styled wireframes, set shadowDom={false}.

Can I show my own data inside Velt components?

Yes. Template variables and VeltData render your app's fields inside components and wireframes, and you can read that context back out, so a thread can carry your own data.

A part of the component I want is not showing.

Many parts are off by default (reply avatars, priority, minimap, @here, device badge) and switch on with a prop or method. Check the feature flags before assuming it is missing.

Can an AI agent customize Velt from my design?

Yes. The customization model is deterministic and documented end to end, and the docs are available to coding agents through the MCP server, so an agent can turn a Figma design into a working Velt UI.

Does customization cost extra?

No. Customization is part of the SDK, not a separately priced add-on. Velt is priced on usage (monthly active documents), not per seat, with a free tier for development and early production.