Skip to main content
Integration Guide

Add ImageLayer to Svelte

Svelte treats unknown HTML elements as Web Components by default. Import the widget and use the tag — no configuration needed. Works with SvelteKit, Sapper, and standalone Svelte for image, video, voice, and text workflows.

Quick start

Install

npm install @imagelayer/widget

Embed

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

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

<image-layer
  api-key="il_live_your_key_here"
  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 your brand kit

Upload logo, pick colors, set AI brand guidelines. Five minutes.

02

Embed the widget

Drop one <image-layer> tag into your Svelte app. That's the entire integration.

03

Your users start creating

Users open one embedded workflow and generate on-brand images, video, voiceovers, or text inside your product.

Start building with Svelte

Free plan. No credit card. Most teams go live in under 15 minutes.

Embed Your First Widget Free