Skip to main content
Integration Guide

Add ImageLayer to React

The ImageLayer widget is a native Web Component. React renders it like any HTML element. Import the package, drop in the tag, and your users can create images, video, voiceovers, and text inside your React app.

Quick start

Install

npm install @imagelayer/widget

Embed

jsx 
import '@imagelayer/widget';

function ImageGenerator() {
  return (
    <image-layer
      api-key="il_live_your_key_here"
      api-url="https://api.imagelayer.app"
    />
  );
}

Why React + ImageLayer

No wrapper component needed

Web Components render natively in React. No HOC, no context provider, no ref forwarding — just a JSX tag.

Works with React 18+ and 19

Compatible with concurrent mode, Suspense, and server components. The widget hydrates on the client where it needs to.

TypeScript support

Add a type declaration for the custom element and get full IntelliSense on attributes like api-key and api-url.

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 React 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 React

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

Embed Your First Widget Free