JavaScript SDK

The Solobase JavaScript SDK is a 100% drop-in replacement for the Supabase client. Replace one import line and everything works identically with full TypeScript support.

Key Features

100% Supabase Compatible

Drop-in replacement with identical API. Your existing Supabase code works without changes.

TypeScript Support

Full type safety with TypeScript definitions and automatic type inference.

Real-time Subscriptions

WebSocket-based live data updates with automatic reconnection and error handling.

Framework Agnostic

Works with React, Vue, Svelte, vanilla JavaScript, and any modern framework.

Installation

npm

Terminal

npm install solobase-js

yarn

yarn add solobase-js

CDN

<script src="https://cdn.jsdelivr.net/npm/solobase-js@latest/dist/solobase.min.js"></script>

Quick Start

Initialize the Client

JavaScript

import { createClient } from 'solobase-js'

const solobase = createClient(
  'https://your-solobase-url.com',
  'your-api-key',
  {
    auth: {
      persistSession: true,
      autoRefreshToken: true
    }
  }
)

export default solobase

Migration from Supabase

Migrating from Supabase is incredibly simple - just change the import:

Before (Supabase)

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  'https://project.supabase.co',
  'anon-key'
)

After (Solobase)

import { createClient } from 'solobase-js'

const solobase = createClient(
  'https://your-solobase.com',
  'your-api-key'
)

That's it! All your existing code continues to work without any changes.

Authentication

// Sign up
const { data, error } = await solobase.auth.signUp({
  email: 'user@example.com',
  password: 'password'
})

// Sign in
const { data, error } = await solobase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password'
})

// OAuth
const { data, error } = await solobase.auth.signInWithOAuth({
  provider: 'google'
})

// Get user
const { data: { user } } = await solobase.auth.getUser()

// Sign out
const { error } = await solobase.auth.signOut()

// Listen to auth changes
solobase.auth.onAuthStateChange((event, session) => {
  console.log(event, session)
})

Learn more about authentication →

Database Operations

// Select data
const { data, error } = await solobase
  .from('users')
  .select('*')
  .eq('status', 'active')
  .order('created_at', { ascending: false })
  .limit(10)

// Insert data
const { data, error } = await solobase
  .from('posts')
  .insert([
    { title: 'Hello World', content: 'My first post!' }
  ])
  .select()

// Update data
const { data, error } = await solobase
  .from('posts')
  .update({ title: 'Updated Title' })
  .eq('id', 1)
  .select()

// Delete data
const { data, error } = await solobase
  .from('posts')
  .delete()
  .eq('id', 1)

// Real-time subscriptions
const subscription = solobase
  .channel('posts')
  .on('postgres_changes', {
    event: '*',
    schema: 'public',
    table: 'posts'
  }, (payload) => {
    console.log('Change received!', payload)
  })
  .subscribe()

Learn more about database operations →

File Storage

// Upload file
const { data, error } = await solobase.storage
  .from('avatars')
  .upload('user-123.png', file)

// Download file
const { data, error } = await solobase.storage
  .from('avatars')
  .download('user-123.png')

// Get public URL
const { data } = solobase.storage
  .from('avatars')
  .getPublicUrl('user-123.png')

// Create signed URL
const { data, error } = await solobase.storage
  .from('private-files')
  .createSignedUrl('document.pdf', 3600)

// List files
const { data, error } = await solobase.storage
  .from('avatars')
  .list('folder', {
    limit: 100,
    offset: 0
  })

Learn more about file storage →

Configuration Options

Configuration

const solobase = createClient(url, key, {
  // Auth options
  auth: {
    persistSession: true,        // Save session to localStorage
    autoRefreshToken: true,      // Auto refresh tokens
    detectSessionInUrl: true,    // Parse session from URL
    flowType: 'implicit'         // OAuth flow type
  },
  
  // Real-time options
  realtime: {
    params: {
      eventsPerSecond: 10        // Rate limit for events
    },
    heartbeatIntervalMs: 30000,  // Heartbeat interval
    reconnectAfterMs: (tries) => Math.min(tries * 1000, 30000)
  },
  
  // Global options
  global: {
    headers: {
      'x-my-custom-header': 'value'
    }
  },
  
  // Database schema (for TypeScript)
  db: {
    schema: 'public'
  }
})

Error Handling

const { data, error } = await solobase
  .from('users')
  .select('*')

if (error) {
  console.error('Error:', error.message)
  console.error('Details:', error.details)
  console.error('Code:', error.code)
  console.error('Hint:', error.hint)
} else {
  console.log('Success:', data)
}

// With try/catch
try {
  const { data } = await solobase
    .from('users')
    .select('*')
    .throwOnError()  // Throws instead of returning error
  
  console.log('Data:', data)
} catch (error) {
  console.error('Caught error:', error.message)
}

TypeScript Support

The SDK provides full TypeScript support with automatic type inference:

// Define your database types
interface Database {
  public: {
    Tables: {
      users: {
        Row: {
          id: number
          email: string
          created_at: string
        }
        Insert: {
          id?: number
          email: string
          created_at?: string
        }
        Update: {
          id?: number
          email?: string
          created_at?: string
        }
      }
    }
  }
}

// Create typed client
const solobase = createClient<Database>(url, key)

// Get full type safety
const { data, error } = await solobase
  .from('users')      // ✅ Typed table names
  .select('email')    // ✅ Typed column names
  .eq('id', 1)        // ✅ Typed filters

Learn more about TypeScript support →

Resources

npm Package

Official npm package

Source Code

View on GitHub

Examples

Code examples and demos

Next Steps

Ready to dive deeper? Explore these advanced topics:

TypeScript Guide →

Learn how to use Solobase with full type safety and IntelliSense.

Error Handling →

Master error handling patterns and debugging techniques.

JavaScript SDK

The Solobase JavaScript SDK is a 100% drop-in replacement for the Supabase client. Replace one import line and everything works identically with full TypeScript support.

Key Features

100% Supabase Compatible

Drop-in replacement with identical API. Your existing Supabase code works without changes.

TypeScript Support

Full type safety with TypeScript definitions and automatic type inference.

Real-time Subscriptions

WebSocket-based live data updates with automatic reconnection and error handling.

Framework Agnostic

Works with React, Vue, Svelte, vanilla JavaScript, and any modern framework.

Installation

npm

Terminal

npm install solobase-js

yarn

yarn add solobase-js

CDN

<script src="https://cdn.jsdelivr.net/npm/solobase-js@latest/dist/solobase.min.js"></script>

Quick Start

Initialize the Client

JavaScript

import { createClient } from 'solobase-js'

const solobase = createClient(
  'https://your-solobase-url.com',
  'your-api-key',
  {
    auth: {
      persistSession: true,
      autoRefreshToken: true
    }
  }
)

export default solobase

Migration from Supabase

Migrating from Supabase is incredibly simple - just change the import:

Before (Supabase)

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  'https://project.supabase.co',
  'anon-key'
)

After (Solobase)

import { createClient } from 'solobase-js'

const solobase = createClient(
  'https://your-solobase.com',
  'your-api-key'
)

That's it! All your existing code continues to work without any changes.

Authentication

// Sign up
const { data, error } = await solobase.auth.signUp({
  email: 'user@example.com',
  password: 'password'
})

// Sign in
const { data, error } = await solobase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password'
})

// OAuth
const { data, error } = await solobase.auth.signInWithOAuth({
  provider: 'google'
})

// Get user
const { data: { user } } = await solobase.auth.getUser()

// Sign out
const { error } = await solobase.auth.signOut()

// Listen to auth changes
solobase.auth.onAuthStateChange((event, session) => {
  console.log(event, session)
})

Learn more about authentication →

Database Operations

// Select data
const { data, error } = await solobase
  .from('users')
  .select('*')
  .eq('status', 'active')
  .order('created_at', { ascending: false })
  .limit(10)

// Insert data
const { data, error } = await solobase
  .from('posts')
  .insert([
    { title: 'Hello World', content: 'My first post!' }
  ])
  .select()

// Update data
const { data, error } = await solobase
  .from('posts')
  .update({ title: 'Updated Title' })
  .eq('id', 1)
  .select()

// Delete data
const { data, error } = await solobase
  .from('posts')
  .delete()
  .eq('id', 1)

// Real-time subscriptions
const subscription = solobase
  .channel('posts')
  .on('postgres_changes', {
    event: '*',
    schema: 'public',
    table: 'posts'
  }, (payload) => {
    console.log('Change received!', payload)
  })
  .subscribe()

Learn more about database operations →

File Storage

// Upload file
const { data, error } = await solobase.storage
  .from('avatars')
  .upload('user-123.png', file)

// Download file
const { data, error } = await solobase.storage
  .from('avatars')
  .download('user-123.png')

// Get public URL
const { data } = solobase.storage
  .from('avatars')
  .getPublicUrl('user-123.png')

// Create signed URL
const { data, error } = await solobase.storage
  .from('private-files')
  .createSignedUrl('document.pdf', 3600)

// List files
const { data, error } = await solobase.storage
  .from('avatars')
  .list('folder', {
    limit: 100,
    offset: 0
  })

Learn more about file storage →

Configuration Options

Configuration

const solobase = createClient(url, key, {
  // Auth options
  auth: {
    persistSession: true,        // Save session to localStorage
    autoRefreshToken: true,      // Auto refresh tokens
    detectSessionInUrl: true,    // Parse session from URL
    flowType: 'implicit'         // OAuth flow type
  },
  
  // Real-time options
  realtime: {
    params: {
      eventsPerSecond: 10        // Rate limit for events
    },
    heartbeatIntervalMs: 30000,  // Heartbeat interval
    reconnectAfterMs: (tries) => Math.min(tries * 1000, 30000)
  },
  
  // Global options
  global: {
    headers: {
      'x-my-custom-header': 'value'
    }
  },
  
  // Database schema (for TypeScript)
  db: {
    schema: 'public'
  }
})

Error Handling

const { data, error } = await solobase
  .from('users')
  .select('*')

if (error) {
  console.error('Error:', error.message)
  console.error('Details:', error.details)
  console.error('Code:', error.code)
  console.error('Hint:', error.hint)
} else {
  console.log('Success:', data)
}

// With try/catch
try {
  const { data } = await solobase
    .from('users')
    .select('*')
    .throwOnError()  // Throws instead of returning error
  
  console.log('Data:', data)
} catch (error) {
  console.error('Caught error:', error.message)
}

TypeScript Support

The SDK provides full TypeScript support with automatic type inference:

// Define your database types
interface Database {
  public: {
    Tables: {
      users: {
        Row: {
          id: number
          email: string
          created_at: string
        }
        Insert: {
          id?: number
          email: string
          created_at?: string
        }
        Update: {
          id?: number
          email?: string
          created_at?: string
        }
      }
    }
  }
}

// Create typed client
const solobase = createClient<Database>(url, key)

// Get full type safety
const { data, error } = await solobase
  .from('users')      // ✅ Typed table names
  .select('email')    // ✅ Typed column names
  .eq('id', 1)        // ✅ Typed filters

Learn more about TypeScript support →

Resources

npm Package

Official npm package

Source Code

View on GitHub

Examples

Code examples and demos

Next Steps

Ready to dive deeper? Explore these advanced topics:

TypeScript Guide →

Learn how to use Solobase with full type safety and IntelliSense.

Error Handling →

Master error handling patterns and debugging techniques.