Installation

Install the ZendBX SDK in your project. Works with React, Next.js, Vue, Svelte, Node.js, and any modern JavaScript environment.

Requirements

Node.js 18+ or Bun 1.0+
A ZenDBX account (sign up at ZenDBX)
A project created in your dashboard

Install the SDK

bash

npm install @zendbx/sdk

Get Your Credentials

From your ZendBX dashboard:

Go to Project Settings → API Keys
Copy your Project URL (e.g., https://api.zendbx.in)
Copy your Project ID (UUID format)
Copy your Anon Key (public API key)
Copy your Service Key (private, server-only)

⚠️Never expose your service_role key in client-side code. Use the anon key for browsers and the service key only on servers.

Framework Setup

React + Vite

bashEnvironment variables

# .env.local
VITE_ZENDBX_URL=https://api.zendbx.in
VITE_ZENDBX_PROJECT_ID=your-project-id
VITE_ZENDBX_ANON_KEY=your-anon-key

typescriptClient setup

// src/lib/zendbx.ts
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: import.meta.env.VITE_ZENDBX_URL,
  projectId: import.meta.env.VITE_ZENDBX_PROJECT_ID,
  anonKey: import.meta.env.VITE_ZENDBX_ANON_KEY,
})

Next.js

bashEnvironment variables

# .env.local
NEXT_PUBLIC_ZENDBX_URL=https://api.zendbx.in
NEXT_PUBLIC_ZENDBX_PROJECT_ID=your-project-id
NEXT_PUBLIC_ZENDBX_ANON_KEY=your-anon-key

typescriptClient setup

// lib/zendbx.ts
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: process.env.NEXT_PUBLIC_ZENDBX_URL!,
  projectId: process.env.NEXT_PUBLIC_ZENDBX_PROJECT_ID!,
  anonKey: process.env.NEXT_PUBLIC_ZENDBX_ANON_KEY!,
})

💡In Next.js, prefix client-side env vars with NEXT_PUBLIC_. Server-side variables don't need the prefix.

Vue 3 + Vite

bashEnvironment variables

# .env.local
VITE_ZENDBX_URL=https://api.zendbx.in
VITE_ZENDBX_PROJECT_ID=your-project-id
VITE_ZENDBX_ANON_KEY=your-anon-key

typescriptClient setup

// src/lib/zendbx.ts
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: import.meta.env.VITE_ZENDBX_URL,
  projectId: import.meta.env.VITE_ZENDBX_PROJECT_ID,
  anonKey: import.meta.env.VITE_ZENDBX_ANON_KEY,
})

SvelteKit

In SvelteKit, create .env with public variables:

bash

PUBLIC_ZENDBX_URL=https://api.zendbx.in
PUBLIC_ZENDBX_PROJECT_ID=your-project-id
PUBLIC_ZENDBX_ANON_KEY=your-anon-key

typescriptClient setup

// src/lib/zendbx.ts
import { createClient } from '@zendbx/sdk'
import { PUBLIC_ZENDBX_URL, PUBLIC_ZENDBX_PROJECT_ID, PUBLIC_ZENDBX_ANON_KEY } from '$env/static/public'

export const zendbx = createClient({
  apiUrl: PUBLIC_ZENDBX_URL,
  projectId: PUBLIC_ZENDBX_PROJECT_ID,
  anonKey: PUBLIC_ZENDBX_ANON_KEY,
})

Node.js / Express

bashEnvironment variables

# .env
ZENDBX_URL=https://api.zendbx.in
ZENDBX_PROJECT_ID=your-project-id
ZENDBX_SERVICE_KEY=your-service-key

javascriptClient setup

// lib/zendbx.js
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: process.env.ZENDBX_URL,
  projectId: process.env.ZENDBX_PROJECT_ID,
  anonKey: process.env.ZENDBX_SERVICE_KEY, // Use service key on server
})

💡On the server, use the service_role key to bypass RLS. Install dotenv and call require('dotenv').config() at the top of your entry file.

Verify Installation

Test your setup with a simple query:

typescript

import { zendbx } from './lib/zendbx'

// Test connection
const { data, error } = await zendbx.from('_test').select('*').limit(1)

if (error) {
  console.error('Connection failed:', error.message)
} else {
  console.log('Connected successfully!')
}

TypeScript Support

The SDK is written in TypeScript and includes full type definitions. No additional setup required.

typescript

interface User {
  id: string
  email: string
  name: string
  created_at: string
}

const { data } = await zendbx.from<User>('users').select('*')
// data is typed as User[] | null

CDN Usage (Browser)

For quick prototyping, load the SDK from a CDN:

html

<script type="module">
  import { createClient } from 'https://esm.sh/@zendbx/sdk@latest'
  
  const db = createClient({
    apiUrl: 'https://api.zendbx.in',
    projectId: 'your-project-id',
    anonKey: 'your-anon-key'
  })
  
  const { data } = await db.from('users').select('*')
  console.log(data)
</script>

Next Steps

Installation

Install the ZendBX SDK in your project. Works with React, Next.js, Vue, Svelte, Node.js, and any modern JavaScript environment.

Requirements

Node.js 18+ or Bun 1.0+
A ZenDBX account (sign up at ZenDBX)
A project created in your dashboard

Install the SDK

bash

npm install @zendbx/sdk

Get Your Credentials

From your ZendBX dashboard:

Go to Project Settings → API Keys
Copy your Project URL (e.g., https://api.zendbx.in)
Copy your Project ID (UUID format)
Copy your Anon Key (public API key)
Copy your Service Key (private, server-only)

⚠️Never expose your service_role key in client-side code. Use the anon key for browsers and the service key only on servers.

Framework Setup

React + Vite

bashEnvironment variables

# .env.local
VITE_ZENDBX_URL=https://api.zendbx.in
VITE_ZENDBX_PROJECT_ID=your-project-id
VITE_ZENDBX_ANON_KEY=your-anon-key

typescriptClient setup

// src/lib/zendbx.ts
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: import.meta.env.VITE_ZENDBX_URL,
  projectId: import.meta.env.VITE_ZENDBX_PROJECT_ID,
  anonKey: import.meta.env.VITE_ZENDBX_ANON_KEY,
})

Next.js

bashEnvironment variables

# .env.local
NEXT_PUBLIC_ZENDBX_URL=https://api.zendbx.in
NEXT_PUBLIC_ZENDBX_PROJECT_ID=your-project-id
NEXT_PUBLIC_ZENDBX_ANON_KEY=your-anon-key

typescriptClient setup

// lib/zendbx.ts
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: process.env.NEXT_PUBLIC_ZENDBX_URL!,
  projectId: process.env.NEXT_PUBLIC_ZENDBX_PROJECT_ID!,
  anonKey: process.env.NEXT_PUBLIC_ZENDBX_ANON_KEY!,
})

💡In Next.js, prefix client-side env vars with NEXT_PUBLIC_. Server-side variables don't need the prefix.

Vue 3 + Vite

bashEnvironment variables

# .env.local
VITE_ZENDBX_URL=https://api.zendbx.in
VITE_ZENDBX_PROJECT_ID=your-project-id
VITE_ZENDBX_ANON_KEY=your-anon-key

typescriptClient setup

// src/lib/zendbx.ts
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: import.meta.env.VITE_ZENDBX_URL,
  projectId: import.meta.env.VITE_ZENDBX_PROJECT_ID,
  anonKey: import.meta.env.VITE_ZENDBX_ANON_KEY,
})

SvelteKit

In SvelteKit, create .env with public variables:

bash

PUBLIC_ZENDBX_URL=https://api.zendbx.in
PUBLIC_ZENDBX_PROJECT_ID=your-project-id
PUBLIC_ZENDBX_ANON_KEY=your-anon-key

typescriptClient setup

// src/lib/zendbx.ts
import { createClient } from '@zendbx/sdk'
import { PUBLIC_ZENDBX_URL, PUBLIC_ZENDBX_PROJECT_ID, PUBLIC_ZENDBX_ANON_KEY } from '$env/static/public'

export const zendbx = createClient({
  apiUrl: PUBLIC_ZENDBX_URL,
  projectId: PUBLIC_ZENDBX_PROJECT_ID,
  anonKey: PUBLIC_ZENDBX_ANON_KEY,
})

Node.js / Express

bashEnvironment variables

# .env
ZENDBX_URL=https://api.zendbx.in
ZENDBX_PROJECT_ID=your-project-id
ZENDBX_SERVICE_KEY=your-service-key

javascriptClient setup

// lib/zendbx.js
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: process.env.ZENDBX_URL,
  projectId: process.env.ZENDBX_PROJECT_ID,
  anonKey: process.env.ZENDBX_SERVICE_KEY, // Use service key on server
})

💡On the server, use the service_role key to bypass RLS. Install dotenv and call require('dotenv').config() at the top of your entry file.

Verify Installation

Test your setup with a simple query:

typescript

import { zendbx } from './lib/zendbx'

// Test connection
const { data, error } = await zendbx.from('_test').select('*').limit(1)

if (error) {
  console.error('Connection failed:', error.message)
} else {
  console.log('Connected successfully!')
}

TypeScript Support

The SDK is written in TypeScript and includes full type definitions. No additional setup required.

typescript

interface User {
  id: string
  email: string
  name: string
  created_at: string
}

const { data } = await zendbx.from<User>('users').select('*')
// data is typed as User[] | null

CDN Usage (Browser)

For quick prototyping, load the SDK from a CDN:

html

<script type="module">
  import { createClient } from 'https://esm.sh/@zendbx/sdk@latest'
  
  const db = createClient({
    apiUrl: 'https://api.zendbx.in',
    projectId: 'your-project-id',
    anonKey: 'your-anon-key'
  })
  
  const { data } = await db.from('users').select('*')
  console.log(data)
</script>

Next Steps