SvelteKit

This guide details how to integrate the Para Modal—originally built in React—into your SvelteKit application.

If you haven’t already you can create a new SvelteKit project by following the official SvelteKit docs. Alternatively, you can fork our minimal starter that already includes the Para Modal setup: Para Nuxt 3 Starter.

​

Prerequisites

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

​

Installing Dependencies

Install the Para React SDK, plus React dependencies:

​

Configuring SvelteKit (Preprocessor & Polyfills)

​

Svelte Preprocess React

In your svelte.config.js, import and apply svelte-preprocess-react:

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [vitePreprocess(), preprocessReact()],
  kit: {
    adapter: adapter(),
  },
};

export default config;

​

Vite Plugins (Node Polyfills)

SvelteKit uses Vite under the hood. Install and configure polyfills for Node modules:

Then enable it in vite.config.ts:

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

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

​

Setting Up the Para SDK

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

​

Creating a Para Client Instance

As with other frameworks, you’ll need a dedicated file for your client instance (e.g., client/para.ts):

import { Environment, ParaWeb } from "@getpara/react-sdk";

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

​

Using the Para Modal in a SvelteKit Route

Let’s say you have a +page.svelte in src/routes/. You would use the Para Modal with the preprocessed React component:

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

  export const ssr = false;

  const react = sveltify({ ParaModal });
  let isModalOpen = false;
</script>

<div class="container">
  <button on:click={() => isModalOpen = true}>
    Open Para Modal
  </button>
  <!-- Render the React-based modal -->
  <react.ParaModal para={para} appName="SvelteKit + Para Modal" logo={Logo} disableEmailLogin={false} disablePhoneLogin={false} oAuthMethods={Object.values(OAuthMethod)} isOpen={isModalOpen} onClose={() => isModalOpen = false} onRampTestMode={true} twoFactorAuthEnabled={false}/>
</div>

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

With SSR disabled, the page will be served client-side only, ensuring the React-based modal can load without conflicts.

​

Customizing the Para Modal

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

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

​

If You Don’t Want to Use the React Modal

Use `@getpara/web-sdk` to build your own SvelteKit-based UI from scratch. This approach avoids mixing React entirely. For details on how to do this, refer to the

Customize Para guide.

​

Examples

We have a dedicated SvelteKit

demonstrating how to setup the React-based Para Modal. Feel free to explore it for a deeper reference.

​

Next Steps

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

​

Ecosystems

Learn how to use Para 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 Para 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.