From fac0eea05f78f04ce616c6264082dfd5fb5910d7 Mon Sep 17 00:00:00 2001 From: Chris Nicholas Date: Thu, 9 Jul 2026 10:58:03 +0100 Subject: [PATCH 1/3] Mention rendering custom components (#3573) --- .../api-reference/liveblocks-react-ui.mdx | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/docs/pages/api-reference/liveblocks-react-ui.mdx b/docs/pages/api-reference/liveblocks-react-ui.mdx index 8149264e3b..85d6fec11f 100644 --- a/docs/pages/api-reference/liveblocks-react-ui.mdx +++ b/docs/pages/api-reference/liveblocks-react-ui.mdx @@ -1045,6 +1045,95 @@ import { Comment, Thread } from "@liveblocks/react-ui"; />; ``` +##### Rendering custom components + +You can render fully custom components in comment threads, instead of showing +the default `Comment` component. This is particularly useful for inserting +custom UI into threads, such as data visualizations, tables, +[custom AI commenting components](/docs/get-started/nextjs-comments-ai), and +more. + +Picture a thread that features a graph visualization instead of a comment. This +comment will most likely by created on the server, using +[`liveblocks.createComment`](/docs/api-reference/liveblocks-node#post-rooms-roomId-threads-threadId-comments). +Use [comment metadata](/docs/ready-made-features/comments/metadata) to define +the data in the graph, or the source of the graph’s data. + +```ts +const comment = await liveblocks.createComment({ + roomId: "my-room-id", + threadId: "th_d75sF3...", + data: { + body: { + version: 1, + content: [ + { type: "paragraph", children: [{ text: "Graph placeholder" }] }, + ], + }, + userId: "bot@example.com", + }, + // +++ + metadata: { + type: "graph", + graphId: "revenue-by-month", + }, + // +++ +}); +``` + +To render this graph inside a comment thread, check for the `type: "graph"` +value you defined in `comment.metadata`, and return a custom component instead +of a `Comment`. Make sure to return `Comment` for all regular comments. + +```tsx +import { Comment, Thread } from "@liveblocks/react-ui"; + + { + // Render your custom graph inside a comment UI + // +++ + if (comment.metadata.type === "graph") { + return ; + } + // +++ + + return ; + }, + }} +/>; +``` + +If you’d like to render a custom component _inside_ a comment UI, for example +with avatar, author, date, then +[customize the comment component](#Customize-comments) instead of returning a +fully custom component. + +```tsx +import { Comment, Thread } from "@liveblocks/react-ui"; + + { + // Render your custom graph component + // +++ + if (comment.metadata.type === "graph") { + return ( + + + + ); + } + // +++ + + return ; + }, + }} +/>; +``` + ##### Customize dropdown items `Thread` shows a dropdown menu for threads and comments which contains actions From 1c7e0a3fa77ae18c6b6d4d3e63b75aee30b0cb36 Mon Sep 17 00:00:00 2001 From: Chris Nicholas Date: Thu, 9 Jul 2026 10:58:29 +0100 Subject: [PATCH 2/3] Update pricing docs (#3570) Co-authored-by: Cursor --- docs/pages/pricing/billing.mdx | 54 ++++-- docs/pages/pricing/faqs.mdx | 113 ++++++++++- docs/pages/pricing/limits.mdx | 170 +++++------------ .../pricing/limits/fair-use-guidelines.mdx | 2 +- docs/pages/pricing/overview.mdx | 72 ------- docs/pages/pricing/plans.mdx | 180 ++++++++---------- docs/pages/pricing/plans/enterprise.mdx | 8 +- docs/pages/pricing/plans/free.mdx | 8 +- docs/pages/pricing/plans/pro.mdx | 8 +- docs/pages/pricing/plans/team.mdx | 8 +- docs/routes.json | 4 - 11 files changed, 290 insertions(+), 337 deletions(-) delete mode 100644 docs/pages/pricing/overview.mdx diff --git a/docs/pages/pricing/billing.mdx b/docs/pages/pricing/billing.mdx index 6c17fd9815..d840bd5605 100644 --- a/docs/pages/pricing/billing.mdx +++ b/docs/pages/pricing/billing.mdx @@ -5,17 +5,30 @@ meta: description: "How billing works on Liveblocks, from credits to your invoice." --- -This page explains how credits, billing cycles, overage, and invoices work. For -plan prices and metered rates, see [Pricing overview](/docs/pricing/overview). +Understand how your bill is calculated: monthly credits, overage, annual +billing, invoices, and tracking your usage. For plan prices and metered rates, +see [Plans](/docs/pricing/plans). ## Credits -Every paid plan includes a monthly credit allowance. Credits are applied -automatically to your metered usage, like realtime collaboration minutes, -comments, custom notifications, and storage. You only pay once you have used up -your credits. Your plan base is what buys those credits, and on higher Team -tiers the included credits are worth more than the base price, so you get more -usage for the same spend. +Every plan includes a monthly credit allowance that covers your metered usage +first. Credits are denominated in US dollars. If your usage exceeds the amount +of credits in your base plan, you'll be billed at the per-unit rates at the end +of the month. Credits reset at the start of each billing cycle and do not roll +over. + +The Team plan offers multiple credit packages that include more credit value +than they cost, effectively lowering your per credit rate. + +### Team plan options + +| Monthly credits | Monthly price | Annual price | +| ---------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------ | +| | per month | per month billed annually | +| | per month | per month billed annually | +| | per month | per month billed annually | +| | per month | per month billed annually | +| | per month | per month billed annually | ## Billing cycle @@ -24,9 +37,16 @@ at the start of each cycle and do not roll over. ## Overage -Usage above your monthly credits is overage. It is charged at the per-unit rates -in each plan's [Metered usage](/docs/pricing/plans/pro#Metered-usage) table and -added to your invoice. Your total is always your plan base plus any overage. +Usage above your monthly credits is overage. If your usage exceeds the amount of +credits in your base plan, you'll be billed at the +[per-unit rates](/docs/pricing/plans#Metered-usage) at the end of the month. + +## Free plan usage + +Even though the Free plan has no cost, usage follows the same monthly cycle. If +your account exceeds a limit, the affected feature pauses until limits reset at +the start of the next calendar month or you +[upgrade your account](/dashboard/billing) to a paid plan. ## Annual billing @@ -36,11 +56,11 @@ reset each month. ## Invoices and payment Paid plans are billed by card. Invoicing is available on Enterprise. -[Contact sales](/contact/sales) to set this up. You can view and download past -invoices from your [dashboard billing settings](/dashboard). +[Contact sales](/contact/sales) to discuss upgrading to an Enterprise plan. + +You can view and download past invoices from your [dashboard](/dashboard). -## Tracking your spend +## Tracking your usage -See your usage and remaining credits at any time on your -[dashboard usage page](/dashboard/usage), so there are no surprises on your -invoice. +Usage and remaining credits are accessible to all account Owners in the +[Liveblocks dashboard](/dashboard/usage). diff --git a/docs/pages/pricing/faqs.mdx b/docs/pages/pricing/faqs.mdx index f55cd4f2a1..fd480e2dd1 100644 --- a/docs/pages/pricing/faqs.mdx +++ b/docs/pages/pricing/faqs.mdx @@ -8,20 +8,22 @@ meta: ## How does pricing work in Liveblocks? Each plan includes a monthly credit allowance you spend across all features. -Credits reset at the start of each billing cycle and don't roll over. Pro is -$30/month with $30 of credits, and Team plans range from $600 to $3,750/month -with up to $5,000 of credits. Once you've used your credits, additional usage on -Pro and Team is billed at metered rates. Free hits hard limits per feature -instead. +Credits reset at the start of each billing cycle and don't roll over. Pro +includes +{/* prettier-ignore */} of credits, and Team plans start with +{/* prettier-ignore */} of credits. Once you've used your +credits, additional usage on Pro and Team is billed at metered rates. Free hits +hard limits per feature instead. For full per-metric rates and worked examples, see our -[pricing overview](/docs/pricing/overview). +[plans](/docs/pricing/plans). ## What counts as a realtime collaboration minute? Realtime collaboration minutes measure time when two or more people or agents are in the same room together. Each connected user-minute counts. Two users in a -room for 5 minutes is 10 collaboration minutes, billed at $0.002 each. +room for 5 minutes is 10 collaboration minutes, billed at +{/* prettier-ignore */} . Solo sessions cost $0. If only one person or agent is in a room, it is not billed. @@ -91,7 +93,7 @@ For a full plan-by-plan breakdown, see the [plans docs](/docs/pricing/plans). Yes. The Free plan is permanently free, no credit card required. You can build, test, and even ship commercial apps on Free as long as the Liveblocks watermark stays visible. To remove the watermark and unlock overage, upgrade to Pro at -$30/month. [Get started for free](/auth/signup). +{/* prettier-ignore */} per month. [Get started for free](/auth/signup). ## Are there discounts for startups, nonprofits, or students? @@ -112,7 +114,7 @@ broken down by metric, current credit consumption, and projected month-end spend. We also send automated email alerts as you approach your limits. For predictable spend, your monthly credits give you a fixed ceiling unless you allow overage, and annual Team plans lock in a fixed monthly cost while saving -up to 38% versus monthly billing. +two months compared with monthly billing. ## Can I pay by invoice instead of credit card? @@ -125,9 +127,100 @@ Yes, on Enterprise. We currently support EU and US, with more coming. ## How secure and reliable is Liveblocks? -We run on edge infrastructure with 99.99% uptime, monitored on our +We run on edge infrastructure, monitored on our [status page](https://liveblocks.statuspage.io). We're SOC 2 and HIPAA compliant, and GDPR-compliant with a Data Processing Agreement (DPA) available on request. Enterprise plans support data residency in specific regions. For more, see our [security page](/security) and [data storage docs](/docs/platform/data-storage). + +## What is a monthly active room? + +Monthly active rooms represents the number of rooms that have been used within a +given month. Rooms are identified by their `roomId`. + +Specifically, a room counts as active when any of these occur: + +- A user connects on the front-end. +- A comment is added or modified. +- A document is updated. Any of the following: Storage, Tiptap, BlockNote, + Lexical, Yjs. +- An attachment is uploaded. + +If a room contains content from the previous month, it is not active until it is +used in the current month. For example, if a text document is created in +January, it is not active in February until a user connects to the document or +updates its content. + +## What is a monthly active user? + +Monthly active users represents the number of users that have used any +Liveblocks features within a given month. Users are identified by the `userId` +property provided in your [authentication endpoint](/docs/authentication). This +`userId` generally comes from your database or your authentication provider. + +One unique `userId` corresponds to one user, no matter how long they connect +for. For example, a user that connects for 5 minutes on 2 different days is +counted as 1 MAU, and a user that connects 8 hours a day for a month is also +counted as 1 MAU. This applies so long as usage falls under our +[Fair Use Policy](/docs/pricing/limits/fair-use-guidelines). + +## What's a connection? + +A connection occurs when a user opens a web page containing a Liveblocks room. +Each tab counts as one connection, which means that a user with two open tabs +has two connections. A room is joined when using +[`RoomProvider`](/docs/api-reference/liveblocks-react#RoomProvider) in React or +[`enterRoom`](/docs/api-reference/liveblocks-client#Client.enterRoom) in +JavaScript. Liveblocks connections are analogous to WebSocket connections, +representing a realtime link to our server. + +## What's a room? + +A room is the virtual space where people collaborate. For most products, a room +corresponds to a document. + +## What's a simultaneous connection per room? + +A simultaneous connection per room is when a user or multiple users are +connected to the same Liveblocks room at the same time. Learn more about +handling simultaneous room connection limits in our guide about +[joining rooms at maximum capacity](/docs/guides/what-happens-when-a-user-joins-a-room-at-maximum-capacity). + +## What's a simultaneous connection per project? + +A simultaneous connection per project is when a user or multiple users are +connected to the same project at the same time. + +## How is realtime data storage calculated? + +Realtime data storage is a cumulative calculation that represents all realtime +data that is currently stored in your rooms. It does not reset monthly, and the +total usage will continue to accrue over time as you add more content and data. +You can monitor your usage at any time in the [dashboard](/dashboard). + +## What happens when limits are reached? + +Liveblocks returns a different error for each limit that a user might reach. +That way, you can decide how to best handle those cases in your product. + +## Do you count monthly active rooms during testing? + +Yes, if test users connect to a room during automated testing, the room will be +counted as a monthly active room. To prevent hitting limits during testing, you +may want to provide a set of reusable `roomId`s. + +## How do I remove the “Powered by Liveblocks” badge? + +By default, Liveblocks displays a “Powered by Liveblocks” badge in your +application. You need a [paid plan](/docs/pricing/plans) to remove the badge. To +remove it, follow these steps: + +1. In the Liveblocks dashboard, navigate to your + [team’s settings](/dashboard/settings). +2. Under **General**, toggle the option to remove “Powered by Liveblocks” + branding. + +If you’d instead like to adjust the position of the badge, set the +[`badgeLocation`](/docs/api-reference/liveblocks-react#Powered-by-Liveblocks-branding) +property. diff --git a/docs/pages/pricing/limits.mdx b/docs/pages/pricing/limits.mdx index 1e4198384c..34d8807e44 100644 --- a/docs/pages/pricing/limits.mdx +++ b/docs/pages/pricing/limits.mdx @@ -6,127 +6,61 @@ meta: "A list of all the limits and limitations that apply on Liveblocks." --- -## General limits - -There are four plans: Free, Pro, Team, and Enterprise. Each plan has its own set -of limits. - -| Limit | Free | Pro | Team | Enterprise | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Monthly active rooms | | | | | -| Monthly active users | | | | | -| Projects | included | included | included | Up to }> included | -| Team members | included | included | included | Up to }> included | -| Simultaneous connections per room | | | | | -| Simultaneous connections per project | | | | | -| Monthly anonymous connections | | | | | -| Realtime data stored per room | | | | | -| Comments stored | | | | | -| Monthly collaboration notifications | | | | | -| Webhook event frequency | | | | Down to }> | -| Version history | | | | | -| Event log retention | | | | Up to }> | -| Max file upload size | | | | Up to }> | - -Metered usage like realtime collaboration minutes, comments, storage updates, -data stored, custom notifications, and file storage is billed through monthly -credits. See each [plan page](/docs/pricing/plans) for rates and included -credits. - -## Other limits - -| Item | Limit | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -| roomId | 128 characters | -| userId | 128 characters | -| userInfo | 1024 characters once serialized to JSON | -| Broadcast event message | 32 MB | -| Thread metadata | 50 properties, key length 40 characters, value length 4000 characters | -| Comment metadata | 50 properties, key length 40 characters, value length 4000 characters | -| LiveObject | 2 MB when totalling the size of the keys and values | -| LiveMap | Unlimited, so long as each individual value does not exceed 2 MB | -| LiveList | Unlimited, so long as each individual value does not exceed 2 MB | +Understand the limits that apply to your account: plan limits, overage, and +technical limits. + +## Plan limits + +Each plan has limits that protect your account and your costs. + +| Metric | Free | Pro | Team | Enterprise | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| The number of users who used Liveblocks features in a given month. Learn more.}>Monthly active users | | | | | +| The number of rooms used in a given month. Learn more.}>Monthly active rooms | | | | | +| Users connected to the same room at the same time. Learn more.}>Simultaneous connections per room | | | | | +| Users connected to rooms in the same project at the same time. Learn more.}>Simultaneous connections per project | | | | | +| Separate environments for organizing your Liveblocks integration. Learn more.}>Projects | | | | Up to }> | +| Dashboard members with Owner or Member role. They can configure projects, roll keys, and more. Learn more.}>Dashboard seats | | | | Up to }> | +| Realtime data stored per room | | | | | +| Comments stored | | | | | +| Monthly collaboration notifications | | | | | +| Monthly custom notifications | | Included in credits | Included in credits | Custom | +| Public key only recommended for prototyping. Learn more.}>Monthly anonymous connections | | | | | +| Average connections per user | — | 200 | 200 | Custom | +| Active room hours per month | — | | | Custom | +| Max file upload size | | | | Up to }> | +| The frequency at which `yDocUpdated` (Yjs) and `storageUpdated` (Liveblocks Storage) events are sent to your webhook endpoint. Learn more.}>Webhook event frequency | | | | Down to }> | +| Version history | | | | | +| Event log retention | | | | Up to }> | +| Project environments\* | | | | | + +### What happens when you reach a limit + +On Free, limits are hard caps. Liveblocks emails your account owners and shows a +dashboard banner as you approach one, then pauses that activity until it resets +at the start of the next month. Upgrade to [Pro](/dashboard/billing?plan=pro) or +[Team](/dashboard/billing?plan=team) to lift the cap. + +On Pro and Team, there are no hard caps for metered usage. Usage above your +monthly credits keeps running and is billed as overage, with alerts along the +way so nothing is interrupted. + +## Technical limits + +| Item | Limit | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | +| The unique identifier for a room. Learn more.}>roomId | 128 characters | +| userId | 128 characters | +| userInfo | 1024 characters once serialized to JSON | +| Broadcast event message | 32 MB | +| Thread metadata | 50 properties, key length 40 characters, value length 4000 characters | +| Comment metadata | 50 properties, key length 40 characters, value length 4000 characters | +| A realtime data structure that stores key-value pairs. Learn more.}>LiveObject | 2 MB when totaling the size of the keys and values | +| A realtime data structure that stores key-value pairs in a map. Learn more.}>LiveMap | Unlimited, so long as each individual value does not exceed 2 MB | +| A realtime data structure that stores an ordered list of items. Learn more.}>LiveList | Unlimited, so long as each individual value does not exceed 2 MB | Note that when one realtime data structure is nested inside another, it does not count towards the limit. Only the JSON leaves of your data structure count towards the limit. For example, if a `LiveList` is nested inside a `LiveObject`, the `LiveList` and its contents do not count towards the `LiveObject`'s data limit. - -## FAQs - -### What is a monthly active room? - -Monthly active rooms represents the number of rooms that have been used within a -given month. Rooms are identified by their `roomId`. - -Specifically, a room counts as active when any of these occur: - -- A user connects on the front-end. -- A comment is added or modified. -- A document is updated. Any of the following: Storage, Tiptap, BlockNote, - Lexical, Yjs. -- An attachment is uploaded. - -If a room contains content from the previous month, it is not active until it is -used in the current month. For example, if a text document is created in -January, it is not active in February until a user connects to the document or -updates its content. - -### What is a monthly active user? - -Monthly active users represents the number of users that have used any -Liveblocks features within a given month. Users are identified by the `userId` -property provided in your [authentication endpoint](/docs/authentication). This -`userId` generally comes from your database or your authentication provider. - -One unique `userId` corresponds to one user, no matter how long they connect -for. For example, a user that connects for 5 minutes on 2 different days is -counted as 1 MAU, and a user that connects 8 hours a day for a month is also -counted as 1 MAU. This applies so long as usage falls under our -[Fair Use Policy](/docs/pricing/limits/fair-use-guidelines). - -### What's a connection? - -A connection occurs when a user opens a web page containing a Liveblocks room. -Each tab counts as one connection, which means that a user with two open tabs -has two connections. A room is joined when using -[`RoomProvider`](/docs/api-reference/liveblocks-react#RoomProvider) in React or -[`enterRoom`](/docs/api-reference/liveblocks-client#Client.enterRoom) in -JavaScript. Liveblocks connections are analogous to WebSocket connections, -representing a realtime link to our server. - -### What's a room? - -A room is the virtual space where people collaborate. For most products, a room -corresponds to a document. - -### What's a simultaneous connection per room? - -A simultaneous connection per room is when a user or multiple users are -connected to the same Liveblocks room at the same time. Learn more about -handling simultaneous room connection limits in our guide about -[joining rooms at maximum capacity](/docs/guides/what-happens-when-a-user-joins-a-room-at-maximum-capacity). - -### What's a simultaneous connection per project? - -A simultaneous connection per project is when a user or multiple users are -connected to the same project at the same time. - -### How is realtime data storage calculated? - -Realtime data storage is a cumulative calculation that represents all realtime -data that is currently stored in your rooms. It does not reset monthly, and the -total usage will continue to accrue over time as you add more content and data. -You can monitor your usage at any time in the [dashboard](/dashboard). - -### What happens when limits are reached? - -Liveblocks returns a different error for each limit that a user might reach. -That way, you can decide how to best handle those cases in your product. - -### Do you count monthly active rooms during testing? - -Yes, if test users connect to a room during automated testing, the room will be -counted as a monthly active room. To prevent hitting limits during testing, you -may want to provide a set of reusable `roomId`s. diff --git a/docs/pages/pricing/limits/fair-use-guidelines.mdx b/docs/pages/pricing/limits/fair-use-guidelines.mdx index 772b9b3f32..36fc0a635e 100644 --- a/docs/pages/pricing/limits/fair-use-guidelines.mdx +++ b/docs/pages/pricing/limits/fair-use-guidelines.mdx @@ -75,7 +75,7 @@ usage will be automatically charged at the following rates: | Item | Included | Pay-as-you-go | | ----------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| Monthly active rooms | | | +| Monthly active rooms | | | | Dashboard seats | | | | Realtime data storage | | | | File storage | | | diff --git a/docs/pages/pricing/overview.mdx b/docs/pages/pricing/overview.mdx deleted file mode 100644 index e5f937354c..0000000000 --- a/docs/pages/pricing/overview.mdx +++ /dev/null @@ -1,72 +0,0 @@ ---- -meta: - title: "Pricing overview" - parentTitle: "Pricing" - description: - "How Liveblocks pricing works: plans, credits, metered usage, and billing." ---- - -Liveblocks is usage-based. You choose a plan, each plan includes a monthly -credit allowance, and your credits are applied to what your app actually uses. -You only pay more if your usage goes above your credits. For full plan details, -see the [pricing page](/pricing/). - -## Plans - -There are four plans, so you can pick the one that fits where you are: - -- **Free:** for personal development, prototyping, and testing. No credit card - required. -- **Pro:** for developers shipping collaborative features in production. -- **Team:** for teams shipping collaborative features at scale, with added - security and support. -- **Enterprise:** a custom plan for premium security and partnership needs. - -| Plan | Monthly base | Included credits | -| ---------- | -------------------------------- | -------------------- | -| Free | $0 | Free monthly credits | -| Pro | $30 ($25 billed annually) | $30 | -| Team | from $600 ($500 billed annually) | from $600 | -| Enterprise | Custom | Custom | - -See [Plans](/docs/pricing/plans) for full details on each plan. - -## How usage is metered - -Liveblocks charges for what your app uses, applied against your monthly credits -first. The main metered units: - -| Unit | Description | Rate | -| ----------------------------------------------------------------------- | ------------------------------------------------------------ | ----------------- | -| [Realtime collaboration minutes](/docs/pricing/plans/pro#Metered-usage) | When 2+ people are in the same room, each user-minute counts | $0.002 per minute | -| [Comments created](/docs/pricing/plans/pro#Metered-usage) | Each comment posted in your app | $0.01 per comment | -| [Realtime data storage updates](/docs/pricing/plans/pro#Metered-usage) | Each change written to stored data | $1 per 1M updates | -| [Realtime data stored](/docs/pricing/plans/pro#Metered-usage) | Total data kept in storage | $0.15 per GB | -| [Monthly custom notifications](/docs/pricing/plans/pro#Metered-usage) | Notifications you trigger from your own code | $0.005 per event | -| [File storage](/docs/pricing/plans/pro#Metered-usage) | Total files stored | $0.15 per GB | - -Rates shown here are indicative. See -[Pro](/docs/pricing/plans/pro#Metered-usage) and -[Team](/docs/pricing/plans/team#Metered-usage) for current per-unit prices. - -[Collaboration notifications](/docs/ready-made-features/notifications/concepts#Collaboration-notifications), -like mentions and thread replies, are included free. - -## Credits - -Every plan includes a monthly credit allowance that covers your metered usage -first. Credits reset at the start of each billing cycle and do not roll over. -Higher Team tiers include more credit value than they cost, so you get more -usage for the same base. Usage above your credits is overage, billed at the -per-unit rates above. - -## Limits - -Each plan has limits that protect your account and your costs. See -[Limits](/docs/pricing/limits) for the full list. - -## Billing - -You're billed monthly: your plan base plus any overage from the previous cycle. -Pay annually to get two months free. See [Billing](/docs/pricing/billing) for -details. diff --git a/docs/pages/pricing/plans.mdx b/docs/pages/pricing/plans.mdx index fda6d0f112..0998df87a9 100644 --- a/docs/pages/pricing/plans.mdx +++ b/docs/pages/pricing/plans.mdx @@ -5,102 +5,84 @@ meta: description: "Learn about the different plans available on Liveblocks." --- -Liveblocks offers three plans: Free, Pro, and Enterprise. Each plan is designed -to meet the needs of different types of developers, from personal projects to -large enterprises. - -## Free - -The Free plan is ideal for personal projects, prototyping, and testing. It -includes access to Liveblocks’ collaboration infrastructure, ready-made features -(Comments, Multiplayer, AI Agents, Notifications), and pre-built components, -with free monthly credits included. When you exceed your free limits, users -won’t be able to join rooms. - -[Learn more about the Free plan](/docs/pricing/plans/free) - -## Pro - -The Pro plan is designed for developers shipping collaborative experiences in -production. It includes everything in Free, but enables you to remove the -"Powered by Liveblocks" badge. Pro comes with -monthly credits. - -[Learn more about the Pro plan](/docs/pricing/plans/pro) - -## Team - -The Team plan is designed for teams shipping collaborative experiences in -production with the ability to scale. It includes everything in Pro, plus SAML -Single Sign-on (SSO), SOC 2, and a private Slack channel. - -Team comes with monthly credits, and volume -discounts can be applied by purchasing more credits. You can also request a -HIPAA Business Associate Agreement (BAA) as a paid add-on. - -[Learn more about the Team plan](/docs/pricing/plans/team) - -### Add-ons - -| Add-on | Price | -| ------------------------------------------------------------- | -------------- | -| HIPAA BAA | $350 per month | - -## Enterprise - -The Enterprise plan is tailored for organizations with advanced security, -compliance, and scalability requirements. It includes everything in Team, plus -multi-region hosting, a management API, SCIM/directory sync, advanced -permissions, custom usage allocations, and higher-touch support options such as -SLAs and solution engineering. - -[Learn more about the Enterprise plan](/docs/pricing/plans/enterprise) - -## General billing information - -### Where do I understand my usage? - -You can monitor usage for your projects on the [usage page](/dashboard/usage) of -your dashboard. - -### What happens when I reach 100% usage? - -All plans receive notifications by email when they are approaching and exceed -their [usage limits](/docs/pricing/limits). - -Free plans will be paused when they exceed the included free tier usage. - -For Pro and Enterprise plans, when you reach 100% usage your projects are not -automatically stopped. Rather, Liveblocks continues billing metered usage as -your application grows. It’s important to be aware of -[the usage page](/dashboard/usage) of your dashboard to see if you are -approaching your limit. - -## Powered by Liveblocks branding - -By default, Liveblocks displays a "Powered by Liveblocks" badge in your -application. You can adjust the position of the badge by setting the -`badgeLocation` property on -[`LiveblocksProvider`](/docs/api-reference/liveblocks-react#LiveblocksProvider). - -```tsx title="Set badge location" -// "top-right", "bottom-right", "bottom-left", "top-left" - - - -``` - -If you wish to remove remove the badge entirely, you can do so by following -these steps: - -1. In the Liveblocks dashboard, navigate to your - [team’s settings](/dashboard/settings). -2. Under **General**, toggle on the remove "Powered by Liveblocks" branding - option. - - - -Removing the "Powered by Liveblocks" badge on your projects requires a -[paid plan](/pricing/). See the [pricing page](/pricing/) for more information. - - +Liveblocks provides the realtime infrastructure to power collaborative +experiences for human and agentic users. + +Pricing is usage-based, metered on the infrastructure your app actually uses, +like collaboration time, storage, comments, and notifications. Each plan +includes a monthly credit allowance that your usage draws from, so your cost +aligns with how your app uses Liveblocks. + +Four plans scale from prototype to production: Free, Pro, Team, and Enterprise. + +| | Free | Pro | Team | Enterprise | +| -------------------- | ----------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- | +| **Best for** | Personal development, prototyping, and testing. | Developers shipping collaborative features. | Teams shipping collaborative features at scale. | Organizations with premium security and partnership needs. | +| **Monthly base** | $0 | per month | from per month | Custom | +| **Included credits** | [Free monthly credits](#Free-monthly-credits) | | from | Custom | + +Choose annual billing to get two months free: + +- Pro: per month billed annually. +- Team: starts at per month billed + annually. + +## Credits + +Every plan includes a monthly credit allowance that covers your metered usage +first. Credits are denominated in US dollars. If your usage exceeds the amount +of credits in your base plan, you'll be billed at the per-unit rates at the end +of the month. Credits reset at the start of each billing cycle and do not roll +over. + +The Team plan offers multiple [credit packages](#Credits) that include more +credit value than they cost, effectively lowering your per credit rate. + +## Metered usage + +Metered usage is billed per unit, only for what you actually use. Your monthly +credits cover this first, so you only pay for anything above them. + + + +| Metric | Description | Rate | +| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | +| Realtime collaboration minutes | Measured in cumulative seconds. Solo sessions cost $0. If only one person or agent is in a room, it is not billed.

A user counts as connected when they have an open connection to a room.

Metering pauses when a room is inactive for 10 seconds.}>Cumulative time spent by two or more people or agents are actively together in the same room. | | +| Realtime data storage updates | Each change written to stored data, billed per million updates. | | +| Realtime data stored | Total data kept in storage, billed per GB. | | +| Comments created | Number of net new comments created. | | +| Monthly custom notifications | Notifications you trigger from your own code. | | +| File storage | Total amount of files stored, such as comment attachments. | | + +
+ +## Free monthly credits + +The Free plan includes monthly usage allowances for each metered unit. If your +account exceeds a limit, the affected feature pauses until limits reset at the +start of the next calendar month or you +[upgrade your account](/dashboard/billing) to a paid plan. + +| Metric | Included amount | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | +| Realtime collaboration minutes | | +| Realtime data storage updates | | +| Realtime data stored | | +| Comments created | | +| Monthly custom notifications | | +| File storage | | + +## Plan inclusions + +| | Free | Pro | Team | Enterprise | +| ------------------------------------------------------------------------- | ---- | -------- | ------------------------------------------------- | ---------- | +| Remove "Powered by Liveblocks" badge | — | Included | Included | Included | +| Multi-region hosting | — | — | — | Included | +| SOC 2 report | — | — | Included | Included | +| [SAML SSO](/docs/platform/account-management/saml) | — | — | Included | Included | +| [SCIM / directory sync](/docs/platform/account-management/directory-sync) | — | — | — | Included | +| Private Slack channel | — | — | Included | Included | +| HIPAA BAA | — | — | per month add-on | Included | +| [Management API](/docs/platform/management-api) | — | — | — | Included | +| Role-based access control | — | — | Team level | Included | +| Uptime SLA | — | — | — | 99.99% | diff --git a/docs/pages/pricing/plans/enterprise.mdx b/docs/pages/pricing/plans/enterprise.mdx index 435c4f0e1a..725ff7d577 100644 --- a/docs/pages/pricing/plans/enterprise.mdx +++ b/docs/pages/pricing/plans/enterprise.mdx @@ -30,12 +30,12 @@ Enterprise limits are customized for your organization. See | Item | Enterprise limit | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Monthly active users | | -| Monthly active rooms | | +| Monthly active users | | +| Monthly active rooms | | | Projects | Up to }> included | | Dashboard seats | Up to }> included | -| Simultaneous connections per room | | -| Simultaneous connections per project | | +| Simultaneous connections per room | | +| Simultaneous connections per project | | | Monthly anonymous connections | | | Realtime data stored per room | | | Max file upload size | Up to }> | diff --git a/docs/pages/pricing/plans/free.mdx b/docs/pages/pricing/plans/free.mdx index 6b102d3025..67bd201a43 100644 --- a/docs/pages/pricing/plans/free.mdx +++ b/docs/pages/pricing/plans/free.mdx @@ -33,12 +33,12 @@ define what's included before you need to upgrade. | Item | Free limit | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| Monthly active users | | -| Monthly active rooms | included | +| Monthly active users | | +| Monthly active rooms | included | | Projects | included | | Dashboard seats | included | -| Simultaneous connections per room | | -| Simultaneous connections per project | | +| Simultaneous connections per room | | +| Simultaneous connections per project | | | Monthly anonymous connections | | | Realtime data stored per room | | | Max file upload size | | diff --git a/docs/pages/pricing/plans/pro.mdx b/docs/pages/pricing/plans/pro.mdx index 09eabd1452..8f686257ca 100644 --- a/docs/pages/pricing/plans/pro.mdx +++ b/docs/pages/pricing/plans/pro.mdx @@ -40,12 +40,12 @@ define what's included before you need to upgrade. | Item | Pro limit | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| Monthly active users | | -| Monthly active rooms | | +| Monthly active users | | +| Monthly active rooms | | | Projects | included | | Dashboard seats | included | -| Simultaneous connections per room | | -| Simultaneous connections per project | | +| Simultaneous connections per room | | +| Simultaneous connections per project | | | Monthly anonymous connections | | | Average connections per user | | | Active room hours per month | | diff --git a/docs/pages/pricing/plans/team.mdx b/docs/pages/pricing/plans/team.mdx index 91dd926ff1..cf1f93c134 100644 --- a/docs/pages/pricing/plans/team.mdx +++ b/docs/pages/pricing/plans/team.mdx @@ -45,12 +45,12 @@ define what's included before you need to upgrade. | Item | Team limit | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -| Monthly active users | | -| Monthly active rooms | | +| Monthly active users | | +| Monthly active rooms | | | Projects | included | | Dashboard seats | included, | -| Simultaneous connections per room | | -| Simultaneous connections per project | | +| Simultaneous connections per room | | +| Simultaneous connections per project | | | Monthly anonymous connections | | | Average connections per user | | | Active room hours per month | | diff --git a/docs/routes.json b/docs/routes.json index 83b0cb9ec3..8aa4867dbd 100644 --- a/docs/routes.json +++ b/docs/routes.json @@ -829,10 +829,6 @@ "title": "Pricing", "defaultCollapsed": true, "routes": [ - { - "title": "Overview", - "path": "/pricing/overview" - }, { "title": "Plans", "path": "/pricing/plans", From c6cd538a5e7113ec2ee466151c5cfa0e8333cd6a Mon Sep 17 00:00:00 2001 From: Chris Nicholas Date: Thu, 9 Jul 2026 12:41:07 +0100 Subject: [PATCH 3/3] Update comments metadata info (#3574) --- .../pages/api-reference/liveblocks-client.mdx | 15 ++++- .../liveblocks-react-lexical.mdx | 1 + .../api-reference/liveblocks-react-tiptap.mdx | 1 + .../api-reference/liveblocks-react-ui.mdx | 55 ++++++++++++++++--- docs/pages/api-reference/liveblocks-react.mdx | 28 +++++++++- .../bin/templates/init/config-file.ts | 46 ++++++++++++++++ 6 files changed, 136 insertions(+), 10 deletions(-) diff --git a/docs/pages/api-reference/liveblocks-client.mdx b/docs/pages/api-reference/liveblocks-client.mdx index 76879bd9a3..9f013c0e63 100644 --- a/docs/pages/api-reference/liveblocks-client.mdx +++ b/docs/pages/api-reference/liveblocks-client.mdx @@ -3563,7 +3563,20 @@ const body: CommentBody = { #### Defining comment metadata [#defining-comment-metadata] Custom metadata can be attached to each comment. `string`, `number`, and -`boolean` properties are allowed. +`boolean` properties are allowed. First, type your data with `CommentMetadata`. + +```ts file="liveblocks.config.ts" +declare global { + interface Liveblocks { + CommentMetadata: { + priority: number; + reviewed: boolean; + }; + } +} +``` + +Then use it in your code. ```ts const metadata: Liveblocks["CommentMetadata"] = { diff --git a/docs/pages/api-reference/liveblocks-react-lexical.mdx b/docs/pages/api-reference/liveblocks-react-lexical.mdx index 09a1a93b92..befbf4eb1d 100644 --- a/docs/pages/api-reference/liveblocks-react-lexical.mdx +++ b/docs/pages/api-reference/liveblocks-react-lexical.mdx @@ -1093,6 +1093,7 @@ import { Composer } from "@liveblocks/react-ui/primitives"; body: comment.body, attachments: comment.attachments, metadata: ..., + commentMetadata: ..., }); editor.dispatchCommand(ATTACH_THREAD_COMMAND, thread.id); diff --git a/docs/pages/api-reference/liveblocks-react-tiptap.mdx b/docs/pages/api-reference/liveblocks-react-tiptap.mdx index 6cd1249dba..32d8cee91b 100644 --- a/docs/pages/api-reference/liveblocks-react-tiptap.mdx +++ b/docs/pages/api-reference/liveblocks-react-tiptap.mdx @@ -1017,6 +1017,7 @@ import { Composer } from "@liveblocks/react-ui/primitives"; body: comment.body, attachments: comment.attachments, metadata: ..., + commentMetadata: ..., }); editor.commands.addComment(thread.id); diff --git a/docs/pages/api-reference/liveblocks-react-ui.mdx b/docs/pages/api-reference/liveblocks-react-ui.mdx index 85d6fec11f..bd286e947b 100644 --- a/docs/pages/api-reference/liveblocks-react-ui.mdx +++ b/docs/pages/api-reference/liveblocks-react-ui.mdx @@ -1053,11 +1053,37 @@ custom UI into threads, such as data visualizations, tables, [custom AI commenting components](/docs/get-started/nextjs-comments-ai), and more. -Picture a thread that features a graph visualization instead of a comment. This -comment will most likely by created on the server, using +Picture a thread that features a graph visualization instead of a comment. To +render it in the thread, you can create a comment and use its +[comment metadata](/docs/ready-made-features/comments/metadata) to define its +data. First, set up your metadata typing in your config file. We’ll define two +types of comments, a normal comment and a graph comment, and pass both to +`CommentMetadata`. Any data can go in here, but in this example, graphs are +defined with `type: "graph"` and a `graphId`. + +```ts file="liveblocks.config.ts" +type NormalComment = {}; + +// +++ +type GraphComment = { + type: "graph"; + graphId: string; +}; +// +++ + +declare global { + interface Liveblocks { + // +++ + CommentMetadata: NormalComment | GraphComment; + // +++ + } +} +``` + +Next, create the comment. This comment will most likely by created on the +server, using [`liveblocks.createComment`](/docs/api-reference/liveblocks-node#post-rooms-roomId-threads-threadId-comments). -Use [comment metadata](/docs/ready-made-features/comments/metadata) to define -the data in the graph, or the source of the graph’s data. +Set your graph’s metadata in the comment’s `metadata` option. ```ts const comment = await liveblocks.createComment({ @@ -1094,7 +1120,7 @@ import { Comment, Thread } from "@liveblocks/react-ui"; Comment: ({ comment, ...props }) => { // Render your custom graph inside a comment UI // +++ - if (comment.metadata.type === "graph") { + if (comment.metadata?.type === "graph") { return ; } // +++ @@ -1119,7 +1145,7 @@ import { Comment, Thread } from "@liveblocks/react-ui"; Comment: ({ comment, ...props }) => { // Render your custom graph component // +++ - if (comment.metadata.type === "graph") { + if (comment.metadata?.type === "graph") { return ( @@ -1595,7 +1621,19 @@ function Component({ threadId }) { ##### Adding comment metadata If you’d like to attach custom metadata to a reply, you can add a -`commentMetadata` prop. +`commentMetadata` prop. This prop is typed as `CommentMetadata`. + +```ts file="liveblocks.config.ts" +declare global { + interface Liveblocks { + CommentMetadata: { + tag?: string; + spam: boolean; + slackMessageTs: string; + }; + } +} +``` ```tsx import { Composer } from "@liveblocks/react-ui"; @@ -2293,6 +2331,7 @@ function MyComposer() { body, attachments, metadata: {}, + commentMetadata: {}, }); // +++ } @@ -3243,6 +3282,7 @@ function MyComposer() { body, attachments, metadata: {}, + commentMetadata: {}, }); }} > @@ -3290,6 +3330,7 @@ function MyComposer() { body, attachments, metadata: {}, + commentMetadata: {}, }); }} > diff --git a/docs/pages/api-reference/liveblocks-react.mdx b/docs/pages/api-reference/liveblocks-react.mdx index 340dda8dc4..327affbc91 100644 --- a/docs/pages/api-reference/liveblocks-react.mdx +++ b/docs/pages/api-reference/liveblocks-react.mdx @@ -2629,6 +2629,13 @@ type Storage = { // quote: string; // time: number; // }; +// +// Optionally, when using Comments, CommentMetadata represents metadata on +// each thread. Can only contain booleans, strings, and numbers. +// export type CommentMetadata = { +// tag: string; +// spam: boolean; +// }; export const { RoomProvider, @@ -2640,7 +2647,7 @@ export const { } = createRoomContext< Presence, Storage - /* UserMeta, RoomEvent, ThreadMetadata */ + /* UserMeta, RoomEvent, ThreadMetadata, CommentMetadata */ >(client); ``` @@ -6726,6 +6733,9 @@ declare global { // Custom metadata set on threads, for useThreads, useCreateThread, etc. ThreadMetadata: {}; + // Custom metadata set on comments, for useCreateThread, useCreateComment, etc. + CommentMetadata: {}; + // Custom room info set with resolveRoomsInfo, for useRoomInfo RoomInfo: {}; @@ -6781,6 +6791,13 @@ declare global { y: number; }; + // Custom metadata set on comments, for useCreateThread, useCreateComment, etc. + CommentMetadata: { + // Example, attaching a tag and a spam flag to a comment + tag: string; + spam: boolean; + }; + // Custom room info set with resolveRoomsInfo, for useRoomInfo RoomInfo: { // Example, rooms with a title and url @@ -6864,6 +6881,13 @@ type Storage = { // quote: string; // time: number; // }; +// +// CommentMetadata represents metadata on each comment. Can only contain +// booleans, strings, and numbers. +// export type CommentMetadata = { +// tag: string; +// spam: boolean; +// }; export const { RoomProvider, @@ -6875,7 +6899,7 @@ export const { } = createRoomContext< Presence, Storage - /* UserMeta, RoomEvent, ThreadMetadata */ + /* UserMeta, RoomEvent, ThreadMetadata, CommentMetadata */ >(client); ``` diff --git a/tools/create-liveblocks-app/bin/templates/init/config-file.ts b/tools/create-liveblocks-app/bin/templates/init/config-file.ts index e030c75606..977f0c3f66 100644 --- a/tools/create-liveblocks-app/bin/templates/init/config-file.ts +++ b/tools/create-liveblocks-app/bin/templates/init/config-file.ts @@ -37,12 +37,35 @@ declare global { // y: number; }; + // Custom metadata set on comments, for useCreateComment, useEditCommentMetadata, etc. + CommentMetadata: { + // Example, attaching coordinates to a comment + // tag: string; + // spam: boolean; + }; + + // Custom group info set with resolveGroupsInfo, for useGroupInfo + GroupInfo: { + // Example, groups with a name and a badge + // name: string; + // badge: string; + }; + // Custom room info set with resolveRoomsInfo, for useRoomInfo RoomInfo: { // Example, rooms with a title and url // title: string; // url: string; }; + + // Custom activities data for custom notification kinds, for useInboxNotifications + ActivitiesData: { + // Example, a custom $alert kind + // $alert: { + // title: string; + // message: string; + // }; + }; } } @@ -88,12 +111,35 @@ declare global { // y: number; }; + // Custom metadata set on comments, for use in React + CommentMetadata: { + // Example, attaching coordinates to a comment + // tag: string; + // spam: boolean; + }; + + // Custom group info set with resolveGroupsInfo, for use in React + GroupInfo: { + // Example, groups with a name and a badge + // name: string; + // badge: string; + }; + // Custom room info set with resolveRoomsInfo, for use in React RoomInfo: { // Example, rooms with a title and url // title: string; // url: string; }; + + // Custom activities data for custom notification kinds, for use in React + ActivitiesData: { + // Example, a custom $alert kind + // $alert: { + // title: string; + // message: string; + // }; + }; } }