postMessage API Test Page

Use this page to test the wallpaper editor's postMessage API integration. The editor sends configuration updates automatically.

Dimension Controls

Quick Presets:

Mirror Control

💡 API Control:

This toggle sends WALL_EDITOR_SET_MIRROR to the editor iframe.

Current Configuration

Editor Status: Waiting...

Dimensions:

450 × 260 cm

Surface Area:

11.70 m²

Total Price:

€339.30

Mirrored:

No

Crop Area (relative):

0.0000, 0.0000, 1.0000, 1.0000

🔄 Crop Export Test:

Click "Add to Cart" to request a crop export. The editor will render, upload to Cloudinary, and return the URL.

Message Log

Waiting for messages...
Wallpaper Editor (iframe) /wallpaper-mural-designer/wallpaper-editor

How to Use

  1. Enter wall dimensions (width and height in cm) in the left panel
  2. Click "Send to Editor" to update the editor via postMessage
  3. Or use the quick presets for common sizes
  4. Toggle "Mirror horizontally" to flip the artwork
  5. Watch the editor update in real-time
  6. The configuration updates automatically in the "Current Configuration" panel
  7. Click "Add to Cart" to test the crop export (renders, uploads to Cloudinary, returns URL)

💡 postMessage API:

  • WALL_EDITOR_CONFIG: Sent automatically whenever state changes
  • SET_WALL_DIMENSIONS: Update dimensions from parent page
  • WALL_EDITOR_SET_MIRROR: Toggle mirror state from parent
  • WANDWONDER_REQUEST_CROP: Trigger crop export and get URL

📏 Dimension Constraints:

  • Width: 200–1200 cm
  • Height: 200–600 cm
  • Default: 450 × 260 cm