Quick Start

Install Triplit to your app

New projects

The fast way to get started with Triplit is to use Create Triplit App which will scaffold a full stack application with Triplit.

npm create triplit-app@latest my-app

Existing projects

If you have an existing project, you can install the triplit init command to create the necessary files and folders and install the required dependencies.

npm install --save-dev @triplit/cli

Follow the instructions in the React + Vite tutorial to finish your setup. The tutorial uses React but is applicable to any framework.

Create your Schema

You'll find a schema already setup in your project. You can modify this file to define the collections in your database. To learn more about schemas, check out the schema guide.

Configure your client

To sync with a Triplit server, your frontend needs a TriplitClient. Create a client.ts file in your triplit folder and export a client.

import { TriplitClient } from '@triplit/client';
import { schema } from './schema';
 
export const triplit = new TriplitClient({
  schema,
  serverUrl: 'http://localhost:6543',
  token:
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ4LXRyaXBsaXQtdG9rZW4tdHlwZSI6InNlY3JldCIsIngtdHJpcGxpdC1wcm9qZWN0LWlkIjoibG9jYWwtcHJvamVjdC1pZCJ9.8Z76XXPc9esdlZb2b7NDC7IVajNXKc4eVcPsO7Ve0ug',
});

This snippet is configured to connect with a default local development server. Once you've deployed your own server or are using Triplit Cloud, you'll need to update the serverUrl and token fields and store them as environmental variables.

Setup your dev server

Triplit has a robust local development environment that you can set up with a single command.

npx triplit dev

The dev command will start a local Triplit server with your schema applied. To learn more about the dev server, check out the local development guide.

Insert and Query Data

To add data to your database you can use the pre-configured client to insert data.

import { triplit } from '../triplit/client.ts';
 
await triplit.insert('todos', { text });

To run a query and subscribe to changes to that query, you can use subscribe.

import { triplit } from '../triplit/client.ts';
 
const query = triplit.query('todos').Where('completed', '=', false);
 
const unsubscribe = triplit.subscribe(query, (data) => {
  console.log(data);
});

There are also specific bindings a number of popular frameworks like React and Svelte that you can use to interact with your data. See the Frameworks section for a full list of supported integrations and details on usage.

Deploy

When you're ready to go live, you'll need Triplit Server running. Check out the other guides to learn how you can self host your own instance or deploy on Triplit Cloud.

With your server running and your .env setup, you can now push your schema to the server

npx triplit schema push

That's it! But there's a lot more you can do with Triplit. Check out the rest of the docs to learn more about how to define relations in your schema, write transactions, add access control, and more.