Add to Existing Project

1. Install dependencies

npm install @tthr/schema @tthr/server
npm install -g tthr

Install the SDK for your framework:

npm install @tthr/vue   # or @tthr/react, @tthr/svelte, @tthr/client

2. Initialise Tether

tthr init

This creates the tether/ directory structure in your project root.

3. Configure tether.config.ts

import { defineConfig } from 'tthr';

export default defineConfig({
  projectId: 'your-project-id',
  schema: './tether/schema.ts',
  functions: './tether/functions',
  output: './tether/_generated',
});

4. Define your schema

Create tether/schema.ts:

import { defineSchema, text, integer, timestamp } from '@tthr/schema';

export default defineSchema({
  posts: {
    title: text().notNull(),
    content: text(),
    authorId: text().notNull(),
    publishedAt: timestamp(),
  },
});

5. Create functions

Create tether/functions/posts.ts:

import { query, mutation, z } from '../_generated/db';

export const list = query({
  handler: async ({ db }) => {
    return db.posts.findMany({ orderBy: { _createdAt: 'desc' } });
  },
});

export const create = mutation({
  args: z.object({
    title: z.string().min(1),
    content: z.string().optional(),
  }),
  handler: async ({ args, db }) => {
    return db.posts.insert({
      title: args.title,
      content: args.content ?? '',
      authorId: 'system',
    });
  },
});

6. Generate types

tthr generate

7. Set up the client

Vue/Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@tthr/vue'],
  tether: {
    projectId: 'your-project-id',
    url: 'https://tether-api.strands.gg',
  },
});

React

import { TetherProvider } from '@tthr/react';

function App() {
  return (
    <TetherProvider projectId="your-project-id" url="https://tether-api.strands.gg">
      <YourApp />
    </TetherProvider>
  );
}

Svelte

import { TetherClient } from '@tthr/client';

const client = new TetherClient({
  url: 'https://tether-api.strands.gg',
  projectId: 'your-project-id',
});

8. Use in components

<script setup>
const { data: posts, loading } = useQuery(api.posts.list);
const { mutate: createPost } = useMutation(api.posts.create);
</script>

9. Run locally

tthr dev

10. Deploy

tthr deploy

Migrating existing data

If you have existing data, you can use the direct database access feature to import it. See the Direct Access documentation for details.

Environment variables

Set environment variables in the dashboard under your project's Settings tab. For local development, use a .env file in your project root.