Para with SvelteKit

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

​

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:

npm install @getpara/react-sdk react react-dom

​

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:

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

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" }}/>

For a full list of available ParaModalProps, refer to the 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

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

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

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

Solana Integration

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

Cosmos Integration

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