triplit

Overview

Triplit is an open-source database that syncs data between server and browser in real-time.

Triplit provides a real-time syncing datastore that you can drop into your app as a Typescript package. Triplit handles storing your data on the server and intelligently syncs your queries to your clients. We call this type of system a “full stack database”—you can watch our presentation to the Local First community on this new paradigm here.

Triplit brings together:

🔄 Real-time sync with incremental updates and conflict resolution at the property level

🏠 Local caching powered by a full-fledged client-side database

💽 Durable server-side storage with an admin dashboard

🔌 Pluggable storage providers like SQLite, IndexedDB, LevelDB, Memory, etc

😃 Optimistic updates to make every interaction feel fast

🔗 Relational querying for complex data models

🛫 Offline-mode with automatic reconnection and consistency guarantees

🔙 Rollback and retry management on failed updates

🗂️ Schemas for data safety and Typescript autocompletion

🔐 Authorization that’s enforced on the server for both read and writes

🤝 Collaboration/Multiplayer powered by CRDTs

🏎️ Low latency with minimal network traffic using delta patches

📝 Simple API for querying and mutating data in both vanilla Javascript and React

✅ Fully open-source!

Monorepo Overview

In triplit/packages you can find the various projects that power Triplit:

• TriplitDB - Designed to run in any JS environment (browser, node, deno, React Native, etc) and provide expressive, fast, and live updating queries while maintaining consistency with many writers over a network.
• Client - Browser library to interact with local and remote TriplitDBs.
• CLI - CLI tool with commands to scaffold a project, run the full-stack development environment, migrate a server, and more.
• React - React bindings for @triplit/client.
• Svelte - Svelte bindings for @triplit/client.
• Console - App for viewing and mutating data in Triplit projects and managing their schemas.
• Server - Node server for syncing data between Triplit clients.
• Server-core - Protocol agnostic library for building servers running Triplit.
• Docs - Triplit docs, built with Nextra.
• Types - Shared types for various Triplit projects.
• UI - Shared UI components for Triplit frontend projects, built with shadcn.

Quick Start

Start a new project.

npm create triplit-app@latest my-app

Or add the dependencies to an existing project.

npm install --save-dev @triplit/cli
npm run triplit init

Define a schema in my-app/triplit/schema.ts.

import { Schema as S, ClientSchema } from '@triplit/client';

export const schema = {
  todos: {
    schema: S.Schema({
      id: S.Id(),
      text: S.String(),
      completed: S.Boolean({ default: false }),
    }),
  },
} satisfies ClientSchema;

Start the Triplit development sync server.

npm run triplit dev

This will output some important environmental variables that your app will need to sync with the server. Add them to your .env file (Vite example below).

VITE_TRIPLIT_SERVER_URL=http://localhost:6543
VITE_TRIPLIT_TOKEN=copied-in-from-triplit-dev

Define a query in your App (React example below).

import { TriplitClient } from '@triplit/client';
import { useQuery } from '@triplit/react';
import { schema } from '../triplit/schema';

const client = new TriplitClient({
  schema,
  serverUrl: import.meta.env.VITE_TRIPLIT_SERVER_URL,
  token: import.meta.env.VITE_TRIPLIT_TOKEN,
});

function App() {
  const { results: todos } = useQuery(client.query('todos'));

  return (
    <div>
      {Array.from(todos.values()).map((todo) => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            =>
              client.update('todos', todo.id, (todo) => ({
                todo.completed = !todo.completed,
              })
            }
          />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

Start your app, open another browser tab, and watch the data sync in real-time.

Read the full getting started guide here. For an even more detailed and explanatory tutorial, check out this step-by-step guide to building a real-time todo app with Triplit, Vite, and React.

Contact us

The best way to get in touch is to join our Discord! We’re here to answer questions, help developers get started with Triplit and preview new features.

You can follow us on Twitter/X to see our latest announcements.