Liveblocks Integrations

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM. We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. The interactive course with quizzes will guide you through everything you need to know to use Next.js. Next.js has built-in support for internationalized (i18n) routing since v10.0.0. You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.

Lexical is comprised of editor instances that each attach to a single content editable element. A set of editor states represent the current and pending states of the editor at any given time. Lexical is designed for everyone. It follows best practices established in WCAG and is compatible with screen readers and other assistive technologies. Lexical is minimal. It doesn't directly concern itself with UI components, toolbars or rich-text features and markdown. The logic for these features can be included via a plugin interface. It's super easy to get started with Lexical in any environment. Lexical is framework agnostic, but provides a set of bindings for React to help you get off the ground even quicker. After the initial setup, delightfully ergonomic APIs make building custom functionality straightforward and downright fun!

​Tiptap is a headless, open-source rich-text editor framework designed for developers building modern, collaborative applications. Built on ProseMirror, it offers a modular architecture with over 100 extensions, enabling the creation of custom editors tailored to specific user needs. Tiptap supports real-time collaboration through its open source backend, Hocuspocus, allowing multiple users to edit documents simultaneously with features like live cursors and offline editing. It also integrates AI capabilities, such as the content AI extension, which provides in-line text transformations and AI-driven suggestions to enhance content creation. Developers can further extend functionality with features like commenting systems, document management, and import/export options for formats like DOCX. Tiptap's UI components and React templates facilitate rapid development of editors resembling applications like Notion or Google Docs.

JavaScript is a scripting language and programming language for the web that enables developers to build dynamic elements on the web. Over 97% of the websites in the world use client-side JavaScript. JavaScript is one of the most important scripting languages on the web. Strings in JavaScript are contained within a pair of either single quotation marks '' or double quotation marks "". Both quotes represent Strings but be sure to choose one and STICK WITH IT. If you start with a single quote, you need to end with a single quote. There are pros and cons to using both IE single quotes tend to make it easier to write HTML within Javascript as you don’t have to escape the line with a double quote. Let’s say you’re trying to use quotation marks inside a string. You’ll need to use opposite quotation marks inside and outside of JavaScript single or double quotes.

Velt is a full-stack collaboration SDK that enables developers to embed rich, real-time, and asynchronous collaboration features into web applications with minimal effort. With Velt, you can add contextual comments (à la Figma or Google Docs), live presence indicators, shared editing, “follow me” view modes, and Slack/Meet-style huddles (audio, video, screen sharing). Velt also offers built-in Loom-style recording (screen, camera, or audio), complete with AI-powered transcription and auto-summaries, so users can leave video or voice feedback and later search or scrub to relevant bits. Additional collaboration tools include in-app notifications, mentions, reactions, arrows/highlights for annotation, analytics dashboards for tracking engagement, and flexible UI components you can style to match your app’s branding. It handles all the complexity, real-time syncing, conflict resolution (via CRDTs), offline handling, scaling, and optional self-hosting.