Skip to main content
Integrations

One Web Component.Documented setups.

Pick a framework guide, embed the client component, and implement the required server-side session boundary before enabling admitted workflows.

React

Load the ImageLayer Web Component in a React client surface.

View guide

Vue

Configure the ImageLayer custom element in a Vue client surface.

View guide

Next.js

Load the ImageLayer Web Component from a Next.js client boundary.

View guide

Angular

Register the ImageLayer custom element schema in Angular.

View guide

Svelte

Load the ImageLayer Web Component from a Svelte browser lifecycle.

View guide

Astro

Load the ImageLayer Web Component from an Astro page.

View guide

How it works

ImageLayer is built as a native Web Component. The guides below show the loading and lifecycle setup tested for each listed framework.

The widget handles prompt and structured inputs, admitted workflow controls, job state, and delivery. Your backend remains responsible for issuing tenant-scoped sessions; generated drafts remain subject to review.

Three steps to integrate

  1. Load the component — use the documented CDN, npm, or self-hosted path for your application.
  2. Create a session token — call the ImageLayer API from your backend to authenticate your user. This keeps your API key server-side.
  3. Configure the widget — add the <image-layer> element, assign credentials as properties, and style it with documented CSS custom properties.

Every integration guide below walks through the framework-specific setup — from package installation to passing props, minting session tokens, and handling events. Pick your stack and follow the production checklist at your own pace.

Don't see your framework? Review the browser and lifecycle requirements before adapting the standard Web Component setup.See the docs for the full integration guide.