5-Minute Quickstart

Get up and running with Symulate in minutes

Step 1: Install Symulate

npm install @symulate/sdk

Step 2: Get Your API Key

1. Sign up at platform.symulate.dev
2. Go to Dashboard → API Keys
3. Click "Create API Key"
4. Copy your key (starts with sym_live_)

Step 3: Configure Environment

Add your API key to .env.local:

# .env.local
SYMULATE_API_KEY=sym_live_your_api_key_here

Step 4: Configure Symulate

Add this to your app's entry point (e.g., main.ts or App.tsx):

import { configureSymulate } from '@symulate/sdk';

configureSymulate({
  symulateApiKey: process.env.SYMULATE_API_KEY,
  environment: 'development', // Uses mocks
  backendBaseUrl: 'https://api.yourapp.com', // For production
});

Step 5: Define Your First Endpoint

Create a file for your API endpoints:

// src/api/users.ts
import { defineEndpoint, m, type Infer } from '@symulate/sdk';

// Define your data schema
const UserSchema = m.object({
  id: m.uuid(),
  name: m.person.fullName(),
  email: m.email(),
  avatar: m.internet.avatar(),
  role: m.helpers.arrayElement(['admin', 'user', 'guest']),
});

// Type inference (automatic!)
export type User = Infer<typeof UserSchema>;

// Define endpoint
export const getUsers = defineEndpoint<User[]>({
  path: '/api/users',
  method: 'GET',
  schema: UserSchema,
  mock: { count: 10 }, // Generate 10 users
});

Step 6: Use in Your Component

React Example:

// src/components/UserList.tsx
import { useQuery } from '@tanstack/react-query';
import { getUsers } from '../api/users';

export function UserList() {
  const { data: users, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: getUsers,
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <ul>
      {users?.map((user) => (
        <li key={user.id}>
          <img src={user.avatar} alt={user.name} />
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </li>
      ))}
    </ul>
  );
}

Vue Example:

<!-- src/components/UserList.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getUsers } from '../api/users';

const users = ref([]);
const loading = ref(true);

onMounted(async () => {
  users.value = await getUsers();
  loading.value = false;
});
</script>

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">
      <img :src="user.avatar" :alt="user.name" />
      <h3>{{ user.name }}</h3>
      <p>{{ user.email }}</p>
    </li>
  </ul>
</template>

Step 7: Run Your App

npm run dev

Step 8: Switch to Real Backend (When Ready)

When your backend is ready, just change the environment in your config:

configureSymulate({
  symulateApiKey: process.env.SYMULATE_API_KEY,
  environment: 'production', // 👈 Just change this!
  backendBaseUrl: 'https://api.yourapp.com',
});

What's Next?