Live Preview Test

Edit the JSON on the left — updates are pushed to the iframe via postMessage in real time.

Template

waiting for iframe…·commits: 0

Data JSON (debounced 250ms → postMessage)valid

{
  "header": {
    "headerInfo": "1234567890 — 01.01.2025",
    "name": "David Salodini",
    "email": "davidesalodini@gmail.com",
    "phone": "+32 485 40 26 71",
    "address": {
      "street": "Frankrijklei",
      "number": "67",
      "postalCode": "2000",
      "city": "Antwerpen",
      "country": "Belgium"
    },
    "logo": "/flux.svg"
  },
  "blocks": [
    {
      "type": "images",
      "data": {
        "title": "Product Images",
        "aspectRatio": "4/3",
        "items": [
          {
            "url": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187",
            "description": "You'll see the rainbow bridge after it rains cats and dogs."
          },
          {
            "url": "https://images.unsplash.com/photo-1760661642486-bf574784273b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774"
          }
        ]
      }
    },
    {
      "type": "item-cards",
      "data": {
        "title": "Item Cards",
        "items": [
          {
            "image": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187",
            "title": "accumulation",
            "list": [
              {
                "key": "Tamarindo kd "
              },
              {
                "key": "21 x 145 mm "
              },
              {
                "key": "Prijs per stuk"
              }
            ]
          },
          {
            "image": "https://images.unsplash.com/photo-1760661642486-bf574784273b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774",
            "title": "marathon",
            "description": "After coating myself in vegetable oil I found my success rate skyrocketed."
          },
          {
            "image": "https://images.unsplash.com/photo-1760549901908-766a6f80d8d3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774",
            "title": "determine",
            "description": "Flying fish flew by the space station.",
            "list": [
              {
                "key": "Soort",
                "value": "Gladiolen"
              },
              {
                "key": "Aantal",
                "value": "60 stuks"
              },
              {
                "key": "Prijs",
                "value": "€10,00"
              }
            ]
          },
          {
            "image": "https://images.unsplash.com/photo-1760389003430-603f6dfb9bac?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=818",
            "title": "trail",
            "list": [
              {
                "key": "Soort",
                "value": "Gladiolen"
              },
              {
                "key": "Aantal",
                "value": "60 stuks"
              }
            ]
          }
        ]
      }
    },
    {
      "type": "highlight-text",
      "data": {
        "text1": "Greetings from the real universe.",
        "text2": "€2.120,47"
      }
    },
    {
      "type": "table",
      "data": {
        "title": "Items",
        "description": "These are the items that you have purchased",
        "header": [
          "Description",
          "Quantity",
          "Price",
          "Total"
        ],
        "items": [
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ],
          [
            "Website Design",
            1,
            500,
            500
          ]
        ],
        "footer": [
          "",
          "",
          "total",
          7000
        ]
      }
    },
    {
      "type": "list",
      "props": {
        "orientation": "landscape"
      },
      "data": {
        "title": "Specifications",
        "description": "These are the specifications of the product",
        "header": [
          "Model",
          "Materiaal",
          "Afmetingen"
        ],
        "items": [
          [
            "Afmetingen zijkast rechts (HxBxD)",
            "The memory we used to share",
            "2750x1250x650 (in mm)"
          ],
          [
            "Afmetingen zijkast rechts (HxBxD)",
            "",
            "2750x1250x650 (in mm)"
          ],
          [
            "Afmetingen zijkast rechts (HxBxD)",
            "The memory",
            "2750x1250x650 (in mm)"
          ]
        ],
        "footer": [
          "",
          "Totaal",
          "€30000"
        ]
      }
    },
    {
      "type": "images",
      "data": {
        "title": "More Product Images",
        "description": "The memory we used to share is no longer coherent.",
        "aspectRatio": "5/4",
        "items": [
          {
            "url": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187"
          },
          {
            "url": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187"
          },
          {
            "url": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187",
            "description": "I was fishing for compliments and accidentally caught a trout."
          }
        ]
      }
    },
    {
      "type": "highlight-blocks",
      "data": {
        "title": "Highlight Blocks",
        "description": "These are the highlight blocks that you have purchased",
        "items": [
          {
            "title": "A purple pig and a green donkey flew a kite in the middle of the night and ended up sunburnt.",
            "description": "We have a lot of rain in June.",
            "className": "dark",
            "image": {
              "url": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187",
              "aspectRatio": "4/3"
            }
          },
          {
            "title": "The overpass went under the highway and into a secret world.",
            "description": "The river stole the gods.",
            "className": "light"
          }
        ]
      }
    },
    {
      "type": "page-break"
    }
  ],
  "footer": {
    "zoneA": "Frankrijklei 67, 2000 Antwerpen | info@flux.be | +32 485 40 26 71",
    "zoneB": "flux.be"
  }
}

Live iframe