Introducing Embeddable Live Preview

Building great user experiences often requires providing instant feedback to users as they interact with your templates. Whether you're creating a custom form builder, an image editor, or any application that uses Stencil templates, users expect to see their changes reflected immediately.

Today, we're excited to announce Embeddable Live Preview—a powerful new feature that brings real-time template previews directly to your applications. This feature is designed for advanced users who want maximum flexibility and control over their integration while significantly reducing image generation costs.

What is Embeddable Live Preview?

Embeddable Live Preview allows you to embed a live, interactive preview of your Stencil templates directly in your application using an iframe. As users make changes to text, images, or other template elements, they can see the results instantly without generating a new image each time.

This approach offers several key advantages:

Cost Reduction: Preview changes without consuming your image generation quota
Improved User Experience: Instant visual feedback keeps users engaged
Full Control: Build custom UI and input logic that fits your application perfectly
Flexible Integration: Works with any web application or framework

How It Works

The implementation is straightforward and follows a simple three-step process:

1. Build Your Custom Input Interface

Create your own form, editor, or input interface using your preferred technology stack. This gives you complete control over the user experience and allows you to match your application's design perfectly.

2. Embed the Template Preview

Add the live preview to your application using a simple iframe:

HTML
<iframe 
  id="template-preview" 
  src="https://app.usestencil.com/live-preview/[template-id]?token=[token]" 
  style="width:600px; height:600px; border:1px solid black;">
</iframe>

3. Send Changes via PostMessage

When users make changes in your interface, send the modifications to the preview iframe using JavaScript's postMessage API:

JAVASCRIPT
const preview = document.getElementById('template-preview');

// When user makes changes
const modifications = [
  {
    "name": "image_1",
    "src": "https://example.com/updated-image.jpg"
  },
  {
    "name": "text_2", 
    "text": "Updated text content"
  }
];

const message = {
  namespace: 'stencil',
  action: 'preview_changes',
  data: modifications
};

preview.contentWindow.postMessage(message, 'https://app.usestencil.com');

Perfect for Advanced Integrations

Embeddable Live Preview is ideal for developers who need:

Custom User Interfaces: Build forms and editors that match your brand and workflow
Complex Logic: Implement validation, conditional fields, or multi-step processes
Cost Optimization: Reduce API calls by previewing changes before final generation
Enhanced User Experience: Provide immediate visual feedback during the editing process

Get Started Today

Ready to implement Embeddable Live Preview in your application? Check out our complete documentation for detailed implementation guidelines and examples.

We've also created a sample React project that demonstrates the integration in action. This example shows how to build a custom form interface with live preview functionality.

Embeddable Live Preview represents our commitment to providing flexible, powerful tools that help you build exceptional user experiences while keeping costs manageable. We can't wait to see what you build with it!

Have questions about implementing Embeddable Live Preview? Contact our support team or join our community discussions.