> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Para with Svelte + Vite

> A user-friendly guide to integrate the Para Modal (React-based) into your Svelte application powered by Vite.

export const Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

export const DemoCallout = ({variant = "card", title = "Interactive Demo", description = "Try the live demo to explore authentication flows and customize your modal before integrating."}) => {
  if (variant === "subtle") {
    return <div className="not-prose my-4 px-4 py-3 rounded-xl border border-orange-200 bg-orange-50/50">
        <div className="flex items-center justify-between gap-4">
          <p className="text-sm text-gray-700 m-0">
            {description}
          </p>
          <a href="https://demo.getpara.com/" target="_blank" rel="noopener noreferrer" className="not-prose flex-shrink-0 inline-flex items-center gap-2 px-3 py-1.5 text-xs font-semibold text-orange-600 bg-white border border-orange-200 rounded-lg hover:bg-orange-50 transition-colors no-underline">
            Try Demo
            <svg width="12" height="12" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M40 472L472 40M472 40H83.2M472 40V428.8" stroke="currentColor" strokeWidth="66.6667" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>;
  }
  return <a href="https://demo.getpara.com/" target="_blank" rel="noopener noreferrer" className="not-prose block my-4 p-5 rounded-xl bg-gradient-to-r from-orange-600 via-pink-600 to-purple-600 hover:opacity-95 transition-opacity no-underline">
      <div className="flex items-center justify-between gap-4">
        <div>
          <h3 className="text-base font-semibold text-white m-0">{title}</h3>
          <p className="text-xs text-white/80 mt-1 m-0">{description}</p>
        </div>
        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
          <svg width="14" height="14" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M40 472L472 40M472 40H83.2M472 40V428.8" stroke="white" strokeWidth="66.6667" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      </div>
    </a>;
};

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

If you haven't already you can create a new Svelte project with Vite by following the <Link label="official Vite docs" href="https://vitejs.dev/guide/" />.

<Note>
  Although mixing React and Svelte is unusual, we can do so via <Link label="svelte-preprocess-react" href="https://www.npmjs.com/package/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.
</Note>

## Prerequisites

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

<Warning>
  Don't have an API key yet? Request access to the <Link label="Developer Portal" href="https://developer.getpara.com" /> to create API keys, manage billing, teams, and more.
</Warning>

<DemoCallout variant="subtle" />

## Installing Dependencies & Peer Dependencies

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

<CodeGroup>
  ```bash npm theme={null}
  npm install @getpara/react-sdk react react-dom @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --save-exact
  ```

  ```bash yarn theme={null}
  yarn add @getpara/react-sdk react react-dom @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --exact
  ```

  ```bash pnpm theme={null}
  pnpm add @getpara/react-sdk react react-dom @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --save-exact
  ```

  ```bash bun theme={null}
  bun add @getpara/react-sdk react react-dom @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --exact
  ```
</CodeGroup>

## 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`:

<CodeGroup>
  ```bash npm theme={null}
  npm install svelte-preprocess-react
  ```

  ```bash yarn theme={null}
  yarn add svelte-preprocess-react
  ```

  ```bash pnpm theme={null}
  pnpm add svelte-preprocess-react
  ```

  ```bash bun theme={null}
  bun add svelte-preprocess-react
  ```
</CodeGroup>

Then add it to your `svelte.config.js`:

```js svelte.config.js theme={null}
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`:

<CodeGroup>
  ```bash npm theme={null}
  npm install vite-plugin-node-polyfills --save-dev
  ```

  ```bash yarn theme={null}
  yarn add vite-plugin-node-polyfills -D
  ```

  ```bash pnpm theme={null}
  pnpm add vite-plugin-node-polyfills -D
  ```

  ```bash bun theme={null}
  bun add vite-plugin-node-polyfills
  ```
</CodeGroup>

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

```ts vite.config.ts theme={null}
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

```ts client/queryClient.ts theme={null}
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`):

```ts client/para.ts theme={null}
import { ParaWeb } from "@getpara/react-sdk";

const PARA_API_KEY = import.meta.env.VITE_PARA_API_KEY;
export const para = new ParaWeb(PARA_API_KEY);
```

<Note>If you're using a legacy API key (one without an environment prefix) you must provide the `Environment` as the first argument to the `ParaWeb` constructor. You can retrieve your updated API key from the Para Developer Portal at [https://developer.getpara.com/](https://developer.getpara.com/)</Note>

### Integrating the Para Modal in Svelte

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

<Note>
  **Beta Testing Credentials** In the `BETA` Environment, you can use any email ending in `@test.getpara.com` (like
  [dev@test.getpara.com](mailto: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.
</Note>

```svelte theme={null}
<script lang="ts">
  import { AuthLayout, ParaProvider } 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";
  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:

```svelte theme={null}
<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:

<Card horizontal title="Detailed Customization Guide" imgUrl="/images/v2/general-customize.png" href="/v2/react/guides/customization/modal" description="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:

<Card horizontal title="Svelte Examples" imgUrl="/images/v2/framework-svelte-vite.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-svelte-vite" description="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:

<Card horizontal title="Troubleshooting" imgUrl="/images/v2/general-help.png" href="/v2/react/troubleshooting/svelte" description="Our troubleshooting guide provides solutions to common integration and usage problems." />