Skip to main content
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 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

First, install both the Para React SDK and React dependencies: 
npm install @getpara/react-sdk react react-dom

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

​
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" }}/>
For a full list of available ParaModalProps, refer to the customization guide:
Detailed Customization Guide

Detailed Customization Guide

Customizing the Para Modal and SDK, including advanced theming options, branding configurations, and more.

​
Examples

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

Svelte Examples

A minimal template demonstrating the React-based Para Modal in a Svelte project.

​
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

Troubleshooting

Our troubleshooting guide provides solutions to common integration and usage problems.

​
Next Steps

After integrating Para, you can explore other features and integrations to enhance your Para experience.
EVM Integration

EVM Integration

Learn how to use Para with EVM-compatible libraries like ethers.js, viem, and wagmi.
Solana Integration

Solana Integration

Discover how to integrate Para with solana-web3.js.
Cosmos Integration

Cosmos Integration

Explore Para integration with Cosmos ecosystem using CosmJS, Cosmos Kit, and Graz.
⌘I