Overview

Vibe lets developers build powerful web applications with authentication, secure storage, and real-time data synchronization – all without writing backend code. Our SDKs are available for both React and vanilla JavaScript projects.

For Developers

  • ✓Authenticate users with just a few lines of code
  • ✓Built-in storage and real-time data syncing
  • ✓No backend or server infrastructure needed
  • ✓Simple APIs for cross-app data sharing

For Users

  • ✓Complete ownership and control of personal data
  • ✓Privacy by default - no third-party tracking
  • ✓Seamless multi-app experience with universal login
  • ✓Full transparency on data access and usage
GitHub RepositoryGet Started

Installation

Choose the package that best fits your project - vibe-react for React applications or vibe-sdk for vanilla JavaScript projects.

npm install vibe-react

Initializing the SDK

First, create an app manifest that defines your app's identity and requested permissions, then initialize the SDK.

import React from 'react';
import { VibeProvider } from 'vibe-react';


// App manifest defines your app identity and permissions
const manifest = {
    id: "my-contacts-app",
    name: "My Contacts App",
    description: "Manage your contacts securely",
    permissions: ["read.contacts", "write.contacts"],
    pictureUrl: "https://example.com/app-icon.png"
};


function App() {
    return (
        <VibeProvider manifest={manifest} autoInit={true}>
            {/* Your app components */}
            <YourAppComponent />
        </VibeProvider>
    );
}


export default App;

Note: For more details about the app manifest options, see the API Reference.

Reading Data

With Vibe, you can subscribe to collections and get real-time updates when data changes.

import React, { useState, useEffect } from 'react';
import { useVibe } from 'vibe-react';


function ContactsList() {
    const [contacts, setContacts] = useState([]);
    const { account, read } = useVibe();
    
    useEffect(() => {
        if (!account) return;
        
        // Subscribe to the contacts collection
        const unsubscribe = read("contacts", {}, (result) => {
            setContacts(result.docs || []);
        });
        
        // Clean up subscription when component unmounts
        return () => unsubscribe();
    }, [account, read]);
    
    return (
        <div>
            <h2>Your Contacts</h2>
            <ul>
                {contacts.map(contact => (
                    <li key={contact.id}>{contact.name}</li>
                ))}
            </ul>
        </div>
    );
}

Writing Data

Create or update data in Vibe's secure storage system.

import React, { useState } from 'react';
import { useVibe } from 'vibe-react';


function AddContact() {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const { write } = useVibe();
    
    async function handleSubmit(e) {
        e.preventDefault();
        
        try {
            // Create a new contact document
            await write("contacts", {
                name,
                email
            });
            
            // Clear the form
            setName("");
            setEmail("");
            alert("Contact added successfully!");
        } catch (error) {
            console.error("Error adding contact:", error);
        }
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <h2>Add New Contact</h2>
            <div>
                <label>Name:</label>
                <input 
                    type="text" 
                    value={name} 
                    onChange={(e) => setName(e.target.value)} 
                    required 
                />
            </div>
            <div>
                <label>Email:</label>
                <input 
                    type="email" 
                    value={email} 
                    onChange={(e) => setEmail(e.target.value)} 
                    required 
                />
            </div>
            <button type="submit">Add Contact</button>
        </form>
    );
}

Next Steps

Now that you've learned the basics, explore more advanced features and detailed documentation:

API Reference

Complete reference for all Vibe SDK functions and features.

Learn more

Contribute

Join the community and help build the future of Vibe.

Get involved