Slop Machine

Svelte <SlopImage /> ​

The @slopmachine/svelte package provides a top-tier Developer Experience (DX) for seamlessly rendering Slop Machine generated images in your Svelte applications.

The Svelte component handles fetching logic, caching, and state transitions, and takes advantage of Svelte 5 snippets for the custom loader template. It maintains the layout through its aspectRatio property to prevent annoying Content Layout Shifts (CLS), and cleanly fades in the final image once it's completely ready.

Try the Live Interactive Svelte Demo to see the component in action!

Installation ​

bash
npm install @slopmachine/svelte

Basic Usage ​

The minimum required prop is bucketId, which maps directly to your generation session.

svelte
<script>
  import { SlopImage } from "@slopmachine/svelte";
</script>

<div class="w-64">
  <SlopImage bucketId="my-unique-bucket-id" />
</div>

Advanced Usage ​

You can override variables, pass custom metadata at runtime, specify an aspect ratio, pick a model, and even override the default loading skeleton via the loader Svelte snippet. Standard <img> attributes are also supported via ...restProps.

svelte
<script>
  import { SlopImage } from "@slopmachine/svelte";
</script>

<SlopImage
  bucketId="user-avatar-bucket"
  aspectRatio="1:1"
  model="gemini-flash"
  variables={{ theme: "cyberpunk", detail: 100 }}
  metadata={{ userId: "usr_123", source: "profile-editor" }}
  class="rounded-full shadow-lg"
>
  {#snippet loader()}
    <div class="flex h-full items-center justify-center text-blue-500">
      Generating custom avatar...
    </div>
  {/snippet}
</SlopImage>

Loading States ​

To detect when the generation and loading is complete, you can pass standard HTML onload and onerror event handlers to the component. These events are forwarded to the underlying <img> element and will not override the built-in loading shimmer effect.

You can also completely customize the loading UI by providing a custom loader snippet.

Preloading ​

You can import and use preloadImage from @slopmachine/svelte to cache the asset before rendering the component.

svelte
<script>
  import { preloadImage } from "@slopmachine/svelte";

  // Call this early in your component lifecycle or route load function
  preloadImage({ bucketId: "my-unique-bucket-id" });
</script>

Props Reference ​

The SlopImage component inherits from SlopImageOptions. It also implements Svelte-specific properties.

bucketId ​

Type: string (Required) The unique identifier for the specific image generation session/bucket.

aspectRatio ​

Type: "1:1" | "2:3" | "3:2" | "3:4" | "4:3" | "4:5" | "5:4" | "9:16" | "16:9" | "21:9" (Optional, Default: "1:1") Sets the CSS aspect ratio of the wrapper element to prevent layout shifts. Examples: "16:9", "4:3".

model ​

Type: "gemini" | "gemini-flash" | "gemini-pro" | "imagen" (Optional) Specify the underlying generative AI model to use.

version ​

Type: number (Optional) Useful for cache-busting or fetching a specific generation iteration.

resultId ​

Type: string (Optional) If a specific result ID is known, it can be fetched directly.

original ​

Type: boolean (Optional, Default: false) If true, bypasses the WebP optimized media and returns the original generated file (e.g., PNG/JPEG).

variables ​

Type: Record<string, string | number | undefined | null> (Optional) A dictionary of prompt variables interpolated dynamically. Example: { character: "cat", style: "neon" }. Any extraneous or unused variables provided that are not required by the resolved templates are automatically stripped out to ensure they do not unnecessarily bust the cache.

metadata ​

Type: Record<string, any> (Optional) Arbitrary custom metadata to attach to the generation request and resulting document. Available for both Buckets and Pipelines. Example: { userId: "usr_123", feature: "avatar-generator" }.

attachments ​

Type: string[] (Optional) An array of string URLs representing temporary file attachments to be used by the generative AI model.

baseUrl ​

Type: string (Optional) Override the default Slop Machine API URL if you are using a self-hosted or proxy backend.

class ​

Type: string (Optional) Sets the class string on the outer wrapper element.

objectFit ​

Type: "fill" | "contain" | "cover" | "none" | "scale-down" (Optional, Default: "cover") How the image should be resized to fit its container. Maps directly to the CSS object-fit property.

imageClass ​

Type: string (Optional) Additional CSS classes to apply directly to the inner <img> element. Useful when you need to target the image itself rather than the wrapper.

loader Snippet ​

Type: Svelte Snippet (Optional) Replaces the default spinner and shimmer effect. Pass a snippet to render custom skeleton markup or text while the image is loading.

HTML Props ​

You can pass standard attributes like alt, loading, etc. The component applies the class property to the outer wrapper div, while spreading ...restProps onto the underlying <img> tag where applicable. Use imageClass if you need to pass classes directly to the inner image element.