/* Import the Poppins font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

/* Apply the Poppins font to the body and all headings */
body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}



// customize
const inkeepSettings = {
  baseSettings: {
    apiKey: "1c24ba8dde97e56465741f2e64a51389662f75793a7d0ec1", // required
    primaryBrandColor: "#4e89ff", // required -- your brand color, the color scheme is derived from this
    organizationDisplayName: "PowerSync",
    // ...optional settings
  },
  aiChatSettings: {
    // ...optional settings
    // aiAssistantAvatar: "https://mydomain.com/mylogo.svg",
    exampleQuestions: [
      "How do I get started?",
      "What backend databases are supported?",
      "What SDKs are available on the client-side?"
    ]
  }
};

// The Mintlify search triggers, which we'll reuse to trigger the Inkeep modal
// const searchButtonContainerIds = [
//   "search-bar-entry",
//   "search-bar-entry-mobile",
// ];

// Clone and replace, needed to remove existing event listeners
// const clonedSearchButtonContainers = searchButtonContainerIds.map((id) => {
//   const originalElement = document.getElementById(id);
//   const clonedElement = originalElement.cloneNode(true);
//   originalElement.parentNode.replaceChild(clonedElement, originalElement);

//   return clonedElement;
// });

// Load the Inkeep component library
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src = "https://unpkg.com/@inkeep/cxkit-js@^0.5.36/dist/embed.js";
document.body.appendChild(inkeepScript);

// Once the Inkeep library is loaded, instantiate the UI components
inkeepScript.addEventListener("load", function () {
  // Customization settings

  // Instantiate the 'Ask AI' floating action button
  Inkeep.ChatButton({
    baseSettings: {
      ...inkeepSettings.baseSettings,
      colorMode: {
        sync: {
          target: document.documentElement,
          attributes: ["class"],
          isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
        },
      },
    },
    aiChatSettings: {
      ...inkeepSettings.aiChatSettings,
    }
  });

  // Create and add the 'Ask AI' button next to the search bar
  function addAskAIButton() {
    // Function to create the Ask AI button
    function createAskAIButton() {
      const button = document.createElement("button");
      button.id = "ask-ai-button";
      button.innerHTML = "Ask AI";
      button.className = "ask-ai-button";
      
      // Style the button to match the "Get Started" button
      button.style.backgroundColor = inkeepSettings.baseSettings.primaryBrandColor;
      button.style.color = "white";
      button.style.border = "none";
      button.style.borderRadius = "12px"; // Pill-shaped to match the search bar in the screenshot
      button.style.padding = "8px 8px"; // Slightly wider padding
      button.style.marginLeft = "10px";
      button.style.cursor = "pointer";
      button.style.fontWeight = "500";
      button.style.fontSize = "14px";
      button.style.display = "flex";
      button.style.alignItems = "center";
      button.style.justifyContent = "center"; // Center text horizontally
      button.style.minWidth = "100px"; // Ensure the button has a minimum width
      button.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)"; // Subtle shadow for depth
      button.style.transition = "all 0.2s ease"; // Smooth transition for hover effects
      
      // Add a subtle hover effect
      button.onmouseover = function() {
        this.style.backgroundColor = "#3a78f2"; // Slightly darker shade when hovering
        this.style.transform = "translateY(-1px)"; // Slight lift effect
        this.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.15)"; // Enhanced shadow on hover
      };
      button.onmouseout = function() {
        this.style.backgroundColor = inkeepSettings.baseSettings.primaryBrandColor;
        this.style.transform = "translateY(0)"; // Reset position
        this.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)"; // Reset shadow
      };
      
      return button;
    }

    // Add the button only to the main search bar entry
    const searchContainer = document.getElementById("search-bar-entry");
    if (searchContainer) {
      const buttonContainer = document.createElement("div");
      buttonContainer.id = "ask-ai-button-container";
      buttonContainer.style.display = "flex";
      buttonContainer.style.alignItems = "center";
      
      const askAIButton = createAskAIButton();
      
      // Add click event to the button
      askAIButton.addEventListener("click", () => {
        modalChat.update({ modalSettings: { isOpen: true } });
      });
      
      // Insert the button after the search container
      buttonContainer.appendChild(askAIButton);
      
      // Insert the button container after the search container
      searchContainer.parentNode.insertBefore(buttonContainer, searchContainer.nextSibling);
      
      // Add CSS to hide the button on mobile
      const style = document.createElement('style');
      style.textContent = `
        @media (max-width: 768px) {
          #ask-ai-button-container {
            display: none !important;
          }
        }
      `;
      document.head.appendChild(style);
    }
  }

  // Instantiate the 'Ask AI' modal chat
  const modalChat = Inkeep.ModalChat({
    baseSettings: {
      ...inkeepSettings.baseSettings,
      colorMode: {
        sync: {
          target: document.documentElement,
          attributes: ["class"],
          isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
        },
      },
    },
    aiChatSettings: {
      ...inkeepSettings.aiChatSettings,
    },
    modalSettings: {
      onOpenChange: handleOpenChange,
    },
  });

  function handleOpenChange(newOpen) {
    modalChat.update({ modalSettings: { isOpen: newOpen } });
  }

  // Add the Ask AI button once the DOM is fully loaded
  if (document.readyState === "complete") {
    addAskAIButton();
  } else {
    window.addEventListener("load", addAskAIButton);
  }

  // The existing chat-button listener (if the element exists)
  const existingChatButton = document.querySelector("#chat-button");
  if (existingChatButton) {
    existingChatButton.addEventListener("click", () => {
      modalChat.update({ modalSettings: { isOpen: true } });
    });
  }

  // Access chat methods
  modalChat.clearChat();

  // Instantiate the search bar modal
  // const inkeepSearchModal = Inkeep.ModalSearchAndChat({
  //   baseSettings: {
  //     ...inkeepSettings.baseSettings,
  //     colorMode: {
  //       sync: {
  //         target: document.documentElement,
  //         attributes: ["class"],
  //         isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
  //       },
  //     },
  //   },
  //   modalSettings: {
  //     onOpenChange: handleOpenChange,
  //   },
  // });

  // function handleOpenChange(newOpen) {
  //   inkeepSearchModal.update({ modalSettings: { isOpen: newOpen } });
  // }

  // When the Mintlify search bar elements are clicked, open the Inkeep search modal
  // clonedSearchButtonContainers.forEach((trigger) => {
  //   trigger.addEventListener("click", function () {
  //     inkeepSearchModal.update({
  //       modalSettings: { isOpen: true },
  //     });
  //   });
  // });

  // Open the Inkeep Modal with cmd+k
  // window.addEventListener(
  //   "keydown",
  //   (event) => {
  //     if (
  //       (event.metaKey || event.ctrlKey) &&
  //       (event.key === "k" || event.key === "K")
  //     ) {
  //       event.stopPropagation();
  //       inkeepSearchModal.update({
  //         modalSettings: { isOpen: true },
  //       });
  //       return false;
  //     }
  //   },
  //   true
  // );
});

A collection of tutorials on how to use PowerSync in supported client SDKs.

Client SDK Tutorials

PowerSync

Sync Engine for Local-First & Offline-First Apps

PowerSync Overview

Our vision is that a local-first or offline-first app architecture should be easier for the developer than cloud-first, and give a better experience for the end-user — even when they're online.

PowerSync Philosophy

Quickstart / Overview

Quickstart Guide / Installation Overview

Connect a PowerSync Cloud instance to your backend database.

Database Connection

Learn how to integrate PowerSync with your favorite tools.

Integrations Overview

Integration guide for deploying a Postgres database and custom backend using Railway for Postgres and Node.js hosting.

Railway + PowerSync

Integration guide for deploying the [PowerSync Service](http://localhost:3333/architecture/powersync-service) on Coolify

Coolify + PowerSync

Deploy PowerSync Service on Coolify

This guide lays out all the steps of migrating from MongoDB Atlas Device Sync to PowerSync.

MongoDB Atlas Device Sync Migration Guide

WatermelonDB Migration Guide

The core components of PowerSync are the service and client SDKs

Architecture Overview

PowerSync Service

Client Architecture

PowerSync Protocol

PowerSync uses the concept of "checkpoints" to ensure the data is consistent.

Consistency

PowerSync supports multiple client-side frameworks with official SDKs

Introduction

Self-host PowerSync in your own infrastructure (PowerSync Open Edition or PowerSync Enterprise Self-Hosted Edition).

Getting Started

Using Docker Compose to simplify your local development stack

Local Development

Enterprise

A collection of tutorials showcasing solutions to common use cases across the PowerSync stack.

Overview

Tutorials

A collection of tutorials for client-side use cases.

A collection of tutorials related to self-hosting.

In this tutorial we will show you how to generate a development token for the self-hosted [PowerSync Service](https://powersync.mintlify.app/architecture/powersync-service#powersync-service).

Generate a Development Token

Gallery of projects showcasing PowerSync implementations across platforms and frameworks.

Demo Apps & Example Projects

Resources for working with PowerSync with AI-powered coding tools

AI Tools

Performance and Limits

PowerSync feature states and their implications for factors such as API stability and support.

Feature Status

Hardware and OS

Supported Hardware and Operating Systems

Frequently Asked Questions about PowerSync.

How does PowerSync fit in to the local-first software movement?

Local-First Software

Release Notes

Roadmap

Blog

Details on PowerSync Cloud's cybersecurity posture

Security

Contact Us

Configure your backend database for PowerSync

Source Database Setup

Security & IP Filtering

Private Endpoints

Include the PowerSync Client SDK in your project

Client-Side Setup

You need to set up your client-side schema in your app project. This involves defining your schema in code using the PowerSync syntax.

Define your Schema

You need to instantiate the client-side PowerSync database — this is the core managed local SQLite database.

Instantiate PowerSync Database

The PowerSync 'backend connector' provides the connection between your application backend and the PowerSync client-slide managed SQLite database.

Integrate with your Backend

App Backend Setup

Your app backend needs to expose an API endpoint to write changes to your backend database that are received from the PowerSync client.

Writing Client Changes

Authentication Setup

Development Tokens

Firebase Auth

Auth0

Any authentication provider can be supported by generating custom JWTs for PowerSync.

Custom

Sync Rules

The simplest Sync Rules are for "global" data — synced to all users. 

Global Data

Organize Data Into Buckets

Parameter Queries

Data Queries

PowerSync's Sync Rules use the [SQLite type system](https://www.sqlite.org/datatype3.html).

Types

On the client, PowerSync only supports a single primary key column called `id`, of type `text`.

Client ID

Operators and functions can be used to transform columns/fields before being synced to a client.

Operators and Functions

Schemas and Connections

For simplicity, we recommend using only lower case identifiers for all table/collection and column/field names used in PowerSync. If you need to use a different case, continue reading.

Case Sensitivity

A group of rows/documents, from one or more tables/collections.

Glossary

Guide: Many-to-Many and Join Tables

This section covers use cases that will arise throughout the lifetime of your application as you add new features, refactor tech debt into oblivion, and upgrade dependencies.

Lifecycle / Maintenance

Implementing Schema Changes

The general approach is that for transient errors (e.g. server or database unavailable), the changes are kept in the client-side upload queue, and retried at 5 second intervals, keeping the original order. In the future it will be possible to control the retry behavior.

Handling Write / Validation Errors

Upgrading the Client SDK

Postgres Maintenance

[Buckets](/usage/sync-rules/organize-data-into-buckets) store data as a history of changes, not only the current state.

Compacting Buckets

Learn how to use PowerSync in common use cases

Use Case Examples

Syncing large attachments/files directly using PowerSync is not recommended.

Attachments / Files

Run PowerSync operations while your app is inactive or in the background

Background Syncing

While PowerSync does not use [CRDTs](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type) directly as part of its sync or conflict resolution process, CRDT data (from a library such as [Yjs](https://github.com/yjs/yjs) or y-crdt) may be persisted and synced using PowerSync.

CRDTs

PowerSync is fully compatible with more advanced Postgres types.

Custom Types, Arrays and JSON

Data Encryption

Client-side full-text search (FTS) is available using the [SQLite FTS5 extension](https://www.sqlite.org/fts5.html).

Full-Text Search

Infinite scrolling is a software design technique that loads content continuously as the user scrolls down the page/screen.

Infinite Scrolling

Some use cases require data persistence before the user has registered or signed in.

Local-only Usage

Custom types, arrays and [PostGIS](https://postgis.net/) are frequently presented together since geospatial data is often complex and multidimensional.

PostGIS

In some scenarios, you may want to sync tables using different priorities. For example, you may want to sync a subset of all tables first to log a user in as fast as possible, then sync the remaining tables in the background.

Prioritized Sync

Use Custom Write Checkpoints to handle asynchronous data uploads, as in chained data pipelines.

Data Pipelines

Tools

Introduction to and overview of the PowerSync Dashboard and Admin Portal

PowerSync Dashboard

Manage your PowerSync Cloud environment programmatically

CLI (Beta)

Diagnostics App

Overview of monitoring and alerting functionality for PowerSync Cloud instances

Monitoring and Alerting

CloudCode (for MongoDB Backend Functionality)

Tutorial-style integration guide for creating offline-first apps with Supabase and PowerSync, using a demo to-do list app in Flutter, React Native, Web, Kotlin Multiplatform and Swift.

Supabase + PowerSync

Examples of syncing attachments between a client app and Supabase Storage.

Handling Attachments

Real-time Streaming

RLS and Sync Rules

Local development with Supabase and PowerSync.

Integration guide for creating local-first apps with FlutterFlow and PowerSync with Supabase as the backend.

FlutterFlow + PowerSync

Learn how to sync attachments such as images and PDFs with PowerSync, FlutterFlow and Supabase Storage.

Flutter Web

PowerSync supports [Full-Text Search](/usage/use-case-examples/full-text-search) on all Flutter platforms.

Legacy integration guide for creating local-first apps with FlutterFlow and PowerSync with Supabase as the backend.

Legacy Guide

FlutterFlow + PowerSync Legacy Guide

Full SDK reference for using PowerSync in Flutter/Dart clients

Flutter

Web Support (Beta)

Flutter Web Support (Beta)

ORM Support (Alpha)

Flutter ORM Support (Alpha)

Code snippets and guidelines for common scenarios

Usage Examples

Guidelines for unit testing with PowerSync

Unit Testing

Encryption

API Reference

Full SDK reference for using PowerSync in React Native clients

React Native & Expo

React Native Web Support

ORM Support

JavaScript ORM Support

Full SDK reference for using PowerSync in JavaScript Web clients

JavaScript Web

JavaScript SPA Frameworks

Kotlin Multiplatform (Beta)

Swift (Beta)

Migrating from Alpha to Beta

SDK reference for using PowerSync in Node.js clients.

Node.js client (alpha)

SDK reference for using PowerSync in .NET clients.

.NET (alpha)

Deploy PowerSync on your own infrastructure (PowerSync Open Edition or PowerSync Enterprise Self-Hosted Edition).

Installation

Configuration details for connecting the PowerSync Service to your database

PowerSync Service Setup

From a security perspective, the primary activity required will be placing a load balancer with TLS in front of PowerSync. 

Securing Your Deployment

Healthchecks

Telemetry

Migrating users between PowerSync instances

Migrating between instances

Multiple PowerSync Instances

Appendix

A guide for creating a new Next.js application with PowerSync for offline/local first functionality

Next.js + PowerSync

A collection of tutorials exploring storage strategies.

In this tutorial, we will show you how to replace Supabase Storage with AWS S3 for handling attachments in the [React Native To-Do List demo app](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-supabase-todolist).

Client

Self-Hosting

Next.js + PowerSync