This guide shows you how to integrate the Para Modal—which is React-based—within a Svelte application that is powered by Vite.

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 Para Modal setup: Para Svelte + Vite Starter.

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 directly.

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

First, install both the Para 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:

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:

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 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";

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";
  import "@getpara/react-sdk/styles.css";
  import { sveltify } from "svelte-preprocess-react";
  import Logo from "./assets/para-logo.svg";
  import { para } from "./client/para";

  // This turns the React component into something we can render in Svelte
  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="Para 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 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 <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

You can instead use the @getpara/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 Para guide.

Examples

We have a

Svelte + Vite starter template

showcasing how to set up the Para Modal. Give it a try to see everything in action.

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.