If you haven’t already you can create a new Svelte project with Vite by following the official Vite docs.

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 @getpara/web-sdk@alpha directly. Reach out to use for help with custom UI integration.

​
Prerequisites

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

Don’t have an API key yet? Request access to the Developer Portal to create API keys, manage billing, teams, and more.

​
Installing Dependencies & Peer Dependencies

First, install the Para React SDK and needed peer dependencies, plus React dependencies using your preferred package manager:

npm install @getpara/react-sdk@alpha react react-dom @tanstack/react-query @getpara/graz@alpha @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js

​
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:

npm install svelte-preprocess-react

Then add it to your svelte.config.js:

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:

npm install vite-plugin-node-polyfills --save-dev

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

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()],
});

​
Creating a QueryClient Instance

client/queryClient.ts
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const queryClient = new QueryClient();

​
Setting Up the Para SDK

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

​
Creating a Para Client Instance

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

client/para.ts
import { Environment, ParaWeb } from "@getpara/react-sdk@alpha";

const PARA_API_KEY = import.meta.env.VITE_PARA_API_KEY;
export const para = new ParaWeb(Environment.BETA, PARA_API_KEY);

Para offers two hosted environments: Environment.BETA (alias Environment.DEVELOPMENT) for testing, and Environment.PROD (alias Environment.PRODUCTION) for live use. Select the environment that matches your current development phase.

​
Integrating the Para Modal in Svelte

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

Beta Testing Credentials In the BETA Environment, you can use any email ending in @test.getpara.com (like dev@test.getpara.com) or US phone numbers (+1) in the format (area code)-555-xxxx (like (425)-555-1234). Any OTP code will work for verification with these test credentials. These credentials are for beta testing only. You can delete test users anytime in the beta developer console to free up user slots.

<script lang="ts">
  import { ParaModal, OAuthMethod } from "@getpara/react-sdk@alpha";
  import "@getpara/react-sdk/styles.css@alpha";
  import { sveltify } from "svelte-preprocess-react";
  import Logo from "./assets/para-logo.svg";
  import { para } from "./client/para";
  import { QueryClientProvider } from "@tanstack/react-query";
  import { queryClient } from './client/queryClient';

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

  let isModalOpen = false;
</script>

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

  <!-- Render the React-based modal -->
  <react.QueryClientProvider client={queryClient}>
    <react.ParaProvider
      paraClientConfig={para}
      config={{appName: "Para in Svelte + Vite"}}
      paraModalConfig={{
        isOpen: isModalOpen,
        onClose={() => isModalOpen = false},
        logo: Logo,
        disableEmailLogin: false,
        disablePhoneLogin: false,
        authLayout: [AuthLayout.AUTH_FULL],
        oAuthMethods: [
          "APPLE",
          "DISCORD",
          "FACEBOOK",
          "FARCASTER",
          "GOOGLE",
          "TWITTER",
        ],
        onRampTestMode: true,
        recoverySecretStepEnabled: true,
        twoFactorAuthEnabled: false,
        theme: {
          foregroundColor: "#2D3648",
          backgroundColor: "#FFFFFF",
          accentColor: "#0066CC",
          darkForegroundColor: "#E8EBF2",
          darkBackgroundColor: "#1A1F2B",
          darkAccentColor: "#4D9FFF",
          mode: "light",
          borderRadius: "none",
          font: "Inter",
        },
      }}
      externalWalletConfig={{
        wallets: []
      }}
    />
  </react.QueryClientProvider>
</div>

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

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

​
Customizing the Para Modal

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

<react.ParaProvider 
  // ...other provider props
  paraModalConfig={{
    // ...other modal config props
    theme: {
      backgroundColor: "#FFF", 
      foregroundColor: "#000", 
      accentColor: "#FFA800", 
      mode: "light" 
    }
  }}
/>

For a full list of available ParaModalProps, refer to the customization guide:

Detailed Customization Guide

​
Examples

For an example of using Para SDK in a Svelte application, check out our Examples Hub repository:

Svelte Examples

​
Troubleshooting

If you encounter issues during the integration or usage of the Para Modal in a Svelte-based app, here are some common problems and their solutions:

Troubleshooting