Svelte + Vite

This guide shows you how to integrate the Capsule Modal—which is React-based—within a Svelte application that is powered by Vite. Although mixing React and Svelte is unusual, we can do so via svelte-preprocess-react. If you prefer to build your own custom UI, you can also use @usecapsule/web-sdk directly.

If you haven’t already you can create a new Svelte project with Vite by following the official Vite docs. Alternatively, you can fork our minimal starter that already includes the Capsule Modal setup: Capsule Svelte + Vite Starter.

​

Prerequisites

To use Capsule, you need an API key. This key authenticates your requests to Capsule services and is essential for integration.

​

Installing Dependencies

First, install both the Capsule React SDK and React dependencies:

​

Setting Up the Svelte Preprocessor and Vite Polyfills

​

Svelte Preprocessor for React

You must configure your Svelte app to accept React components. For that, install and configure svelte-preprocess-react:

Then add it to your svelte.config.js:

import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import preprocessReact from "svelte-preprocess-react/preprocessReact";

export default {
  preprocess: [vitePreprocess(), preprocessReact()],
};

​

Vite Polyfills

Like other React-based setups, you may need Node.js polyfills for features like crypto, buffer, and stream. Install vite-plugin-node-polyfills:

Then configure it in vite.config.js or vite.config.ts:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [svelte(), nodePolyfills()],
});

​

Setting Up the Capsule SDK

Now that you’ve installed the necessary dependencies, let’s set up the Capsule SDK in your Svelte application. This involves creating a client instance and integrating the Capsule Modal.

​

Creating a Capsule Client Instance

Much like in React or Vue, you’ll need a Capsule client instance. Keep it in a dedicated file (e.g., client/capsule.ts):

import { Environment, CapsuleWeb } from "@usecapsule/react-sdk";

const CAPSULE_API_KEY = import.meta.env.VITE_CAPSULE_API_KEY;
export const capsuleClient = new CapsuleWeb(Environment.BETA, CAPSULE_API_KEY);

​

Integrating the Capsule Modal in Svelte

With svelte-preprocess-react, you can directly use React components in Svelte:

<script lang="ts">
  import { CapsuleModal, OAuthMethod } from "@usecapsule/react-sdk";
  import "@usecapsule/react-sdk/styles.css";
  import { sveltify } from "svelte-preprocess-react";
  import Logo from "./assets/capsule-logo.svg";
  import { capsuleClient } from "./client/capsule";

  // This turns the React component into something we can render in Svelte
  const react = sveltify({ CapsuleModal });

  let isModalOpen = false;
</script>

<div class="container">
  <button on:click={() => isModalOpen = true}>
    Open Capsule Modal
  </button>

  <!-- Render the React-based modal -->
  <react.CapsuleModal
    capsule={capsuleClient}
    appName="Capsule in Svelte + Vite"
    logo={Logo}
    disableEmailLogin={false}
    disablePhoneLogin={false}
    oAuthMethods={Object.values(OAuthMethod)}
    isOpen={isModalOpen}
    onClose={() => isModalOpen = false}
  />
</div>

<style>
 // Add your custom styles here
</style>

When you click Open Capsule Modal, the React-based Capsule Modal will appear inside your Svelte application.

​

Customizing the Capsule Modal

Just like in React, you can provide any additional props to the <CapsuleModal> component. For example, customizing theming:

<react.CapsuleModal
  capsule={capsuleClient}
  isOpen={isModalOpen}
  theme={{
    backgroundColor: "#FFF",
    foregroundColor: "#000",
    accentColor: "#FFA800",
    mode: "light",
  }}
  ...
/>

​

If You Don’t Want to Use the React Modal

You can instead use the @usecapsule/web-sdk to build your own Svelte-based UI. This avoids the React modal entirely, but you’ll need to manually implement authentication, wallet management, etc. For details on how to do this, refer to the Customize Capsule guide.

​

Examples

We have a Svelte + Vite starter template showcasing how to set up the Capsule Modal. Give it a try to see everything in action.

​

Next Steps

After integrating Capsule, you can explore other features and integrations to enhance your Capsule experience. Here are some resources to help you get started:

​

Ecosystems

Learn how to use Capsule with popular Web3 clients and wallet connectors. We’ll cover integration with key libraries for EVM, Solana, and Cosmos ecosystems.

If you’re ready to go live with your Capsule integration, make sure to review our go-live checklist:

​

Troubleshooting

​

Integration Support

If you’re experiencing issues that aren’t resolved by our troubleshooting resources, please contact our team for assistance. To help us resolve your issue quickly, please include the following information in your request:

1. 1

   A detailed description of the problem you’re encountering.

2. 2

   Any relevant error messages or logs.

3. 3

   Steps to reproduce the issue.

4. 4

   Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.