Framework Examples

Integration guides for popular JavaScript frameworks

Symulate works seamlessly with any JavaScript framework. Browse our framework-specific guides and example projects to get started quickly.

Quick Start Examples

Integration Patterns

React with React Query

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

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

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data?.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

Vue 3 Composition API

<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>
  <div v-else>
    <div v-for="user in users" :key="user.id">
      {{ user.name }}
    </div>
  </div>
</template>

Angular Service

import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { getUsers, type User } from './api/users';

@Injectable({ providedIn: 'root' })
export class UserService {
  getUsers(): Observable<User[]> {
    return from(getUsers());
  }
}

// In component:
export class UserListComponent implements OnInit {
  users$ = this.userService.getUsers();

  constructor(private userService: UserService) {}
}

Nuxt 3 Composables

<script setup lang="ts">
import { getUsers } from './api/users';

const { data: users, pending } = await useAsyncData(
  'users',
  () => getUsers()
);
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else>
    <div v-for="user in users" :key="user.id">
      {{ user.name }}
    </div>
  </div>
</template>

Testing Examples

Jest / Vitest

import { describe, it, expect } from 'vitest';
import { getUsers } from './api/users';

describe('User API', () => {
  it('should return users', async () => {
    const users = await getUsers();

    expect(users).toHaveLength(10);
    expect(users[0]).toHaveProperty('id');
    expect(users[0]).toHaveProperty('name');
    expect(users[0]).toHaveProperty('email');
  });

  it('should generate consistent data with seed', async () => {
    const users1 = await getUsers({ seed: 12345 });
    const users2 = await getUsers({ seed: 12345 });

    expect(users1).toEqual(users2);
  });
});

Playwright E2E

import { test, expect } from '@playwright/test';

test('user list displays correctly', async ({ page }) => {
  // Symulate will provide mock data automatically
  await page.goto('/users');

  // Verify users are displayed
  const userCards = page.locator('[data-testid="user-card"]');
  await expect(userCards).toHaveCount(10);

  // Verify first user has expected fields
  const firstUser = userCards.first();
  await expect(firstUser.locator('.user-name')).toBeVisible();
  await expect(firstUser.locator('.user-email')).toBeVisible();
});

Advanced Patterns

Pagination

export const getUsers = defineEndpoint<PaginatedResponse<User>>({
  path: '/api/users',
  method: 'GET',
  schema: m.object({
    data: m.array(UserSchema, { min: 10, max: 10 }),
    page: m.number(),
    totalPages: m.number(),
    totalItems: m.number(),
  }),
  mock: {
    instruction: "Generate paginated user data"
  }
});

Error Handling

try {
  const users = await getUsers();
  // Handle success
} catch (error) {
  if (error.status === 404) {
    // Handle not found
  } else if (error.status === 500) {
    // Handle server error
  }
}

Dynamic Parameters

export const getUser = defineEndpoint<User>({
  path: '/api/users/:id',
  method: 'GET',
  schema: UserSchema,
});

// Usage
const user = await getUser({ params: { id: '123' } });

Community Examples

Video Tutorials

Starter Templates

Clone these starter templates to get up and running immediately:

git clone https://github.com/symulate/template-react-ts

git clone https://github.com/symulate/template-vue-ts

git clone https://github.com/symulate/template-angular

git clone https://github.com/symulate/template-nuxt