Skip to main content
Integration Guide

Add ImageLayer to Svelte

Load the ImageLayer Web Component in a browser lifecycle, render the image-layer element, and assign the publishable key and server-issued session token as properties.

Quick start

Install

npm install @imagelayer/widget

Embed

svelte
<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    await import('@imagelayer/widget');
  });
</script>

<image-layer
  id="imagelayer-widget"
  api-url="https://api.imagelayer.app"
/>

Why Svelte + ImageLayer

Zero configuration

Svelte compiles unknown elements as-is. No plugin, no config flag, no special handling required.

SvelteKit SSR compatible

Import the widget inside an onMount callback or use a dynamic import to keep it client-side only in SvelteKit.

Reactive attributes

Svelte's reactive declarations work with Web Component attributes. Change the api-key and the widget updates.

How it works

01

Set up workspace context

Add approved assets, colors, and optional guidance. Generated drafts still require review.

02

Embed and authenticate

Load the component in your Svelte app and have your backend issue a tenant-scoped session token.

03

Admit eligible requests

Users can submit image, video, standalone audio, or text only when the current catalog, entitlement, credits, spend controls, provider, and billing mode allow it.

Plan the product workflow

Follow the end-to-end app integration tutorial.Review the REST API for session and generation flows.Match the embed to a social, commerce, content, or internal workflow.

Start building with Svelte

Create a workspace to configure the widget and server-minted session tokens. No generation credits are included with the Free workspace.

Create Workspace