Skip to main content
Integration Guide

Add ImageLayer to Astro

Astro renders static HTML by default and hydrates interactive islands. The ImageLayer widget is a client-side Web Component — add it with a script tag or npm import and it hydrates independently of your Astro islands while supporting image, video, voice, and text workflows.

Quick start

Embed

astro 
---
// src/pages/create.astro
---
<html lang="en">
  <body>
    <image-layer
      api-key="il_live_your_key_here"
      api-url="https://api.imagelayer.app"
    />

    <script>
      import '@imagelayer/widget';
    </script>
  </body>
</html>

Why Astro + ImageLayer

No island directive needed

The widget is a Web Component, not a framework component. It registers its own custom element and hydrates without client:load or client:visible.

CDN or npm

Load from CDN with a script tag for zero build overhead, or npm install for tighter bundling. Both approaches work in Astro.

Static site compatible

Astro's static output mode works perfectly. The widget loads and hydrates on the client after the static HTML ships.

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

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

Embed Your First Widget Free