Artelo integration: from canvas to framed wall art in one click

Polotno + Artelo pairs Polotno's embedded design editor SDK with Artelo's print-on-demand REST API. Your users design inside your app, your backend hands the finished image to Artelo, and Artelo prints, frames, and ships the physical piece.

See it working: the open-source demo

There's a tiny open-source web app that turns a Polotno design into a real Artelo print order with one button — the working proof of "design → print → ship" that both teams can link to from their docs.

Open the demo: github.com/polotno-project/artelo-demo
What's on the canvas is exactly what gets ordered — what-you-see-is-what-prints.
The Artelo API key lives only in a serverless proxy (a Cloudflare Worker in the demo), never in the browser — a safe reference for a public repo.

The problem Artelo doesn't solve

Artelo's API assumes you already have a finished, print-ready image at the right size and resolution. Producing that file is the hard part, however, especially when the design depends on user input, uploaded media, structured data, or AI-generated content.

Without a proper creation layer, teams end up with one of four weak setups:

Sending users to external design tools, breaking the product flow
Rigid form-to-image pipelines that can't handle real layout control
Backend-only image assembly that is brittle and hard to iterate on
Custom in-house editors that take months to build and never stop costing

Polotno is the piece that goes in front of Artelo so your users design the product inside your app, and your backend always hands Artelo a clean, correctly-sized file.

How the integration works

Design — User opens a template in the embedded Polotno editor inside your app. The canvas can be pre-loaded from structured data, user uploads, or AI-generated assets.
Edit — User personalizes text, images, and layout. Your product controls what is editable and what is locked.
Size & frame — User picks one of Artelo's catalog products (size, orientation, frame color). Selecting one sets the canvas to that product's exact print dimensions and locks the artboard so the design always matches the product.
Export — Your app exports the canvas as a 300-DPI PNG and sends it to your backend, which uploads it to a public URL Artelo can fetch.
Order — Your backend creates the order on Artelo's REST API, referencing the image URL plus product specs and customer address.
Fulfill — Artelo prints, frames, and ships. Your backend surfaces the returned order status in your product.

Polotno owns the creation experience. Artelo owns production and logistics. Your backend is the thin orchestration layer in between.

What a request looks like

// 1. Client-side: export the locked canvas as a 300-DPI PNG blob.
const blob = await store.toBlob({
  pixelRatio: pixelRatioFor300DPI, // e.g. 10x10 in -> 3000x3000 px
  mimeType: "image/png",
})

// 2. Send it to your serverless proxy (a Cloudflare Worker in the demo).
//    The proxy uploads the image, gets a public URL Artelo can fetch,
//    and places the order with the secret API key — which never reaches the browser.
const form = new FormData()
form.append("image", blob)
form.append("size", "x10x10")
await fetch("/api/order", { method: "POST", body: form })

// 3. Server-side: POST the order to Artelo.
await fetch("https://www.artelo.io/api/open/orders/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${env.ARTELO_API_KEY}`,
  },
  body: JSON.stringify({
    createdAt: new Date().toISOString(),
    currency: "USD",
    orderId: "demo-1234",
    total: 10,
    isTestOrder: true, // test orders are created as "Ignored", never sent to production
    customerAddress: {
      name: "Jane Doe",
      street1: "1 Market St",
      city: "San Francisco",
      state: "California",
      zipcode: "94105",
      country: "US",
    },
    items: [{
      orderItemId: "item-1",
      quantity: 1,
      unitPrice: 10,
      productInfo: {
        catalogProductId: "IndividualArtPrint",
        size: "x10x10",
        orientation: "Vertical",
        frameColor: "BlackMetal",
        paperType: "MattePoster",
        includeFramingService: false,
        includeHangingPins: false,
        includeMats: false,
        designs: [{ sourceImage: { url: publicImageUrl } }],
      },
    }],
  }),
})
// Artelo prints, frames, and ships, and returns an order with its status.

What Polotno handles vs. what Artelo handles

Polotno (in your app)

Embedded editor UI with templates and editable regions
Size & frame selector locked to Artelo's exact product dimensions
Variable data / personalization driven by backend data or AI
300-DPI PNG export sized to the product

Artelo (backend)

Print-on-demand product catalog — art prints, framed prints, sizes
Printing, framing, and finishing
Global fulfillment and shipping
Order status returned to your backend

Technical details

Export format: a 300-DPI PNG from store.toBlob, uploaded to a public URL. Artelo enforces a 150 DPI minimum and rejects anything below it (use dangerouslySkipDPICheck only if you accept blurry prints).
Fixed product sizes: product size is an enum (x4x4, x5x5, x6x6, x8x8, x10x10, x12x12, x14x14, …), with orientation (Vertical / Horizontal) and frameColor (BlackMetal, NaturalOak, WhiteOak, …).
Locked artboard: selecting a product sets the canvas to its exact print dimensions and disables page-resize handles, so aspect ratio always matches the product and the export clears the DPI check.
Variable data: templates can be driven programmatically from structured data or AI to generate many personalized designs from one template.
Rendering modes: client-side, self-hosted (via polotno-node), or the Polotno Cloud Render API depending on throughput.
Handoff to Artelo: POST https://www.artelo.io/api/open/orders/create with Bearer auth, the image in items[].productInfo.designs[].sourceImage.url, plus customerAddress, currency, total, and orderId. Rate limit: 50 requests per 10 seconds.

What you can build

Any product in Artelo's catalog that accepts a print-ready image:

Art prints — individual prints and sets, multiple sizes and orientations
Framed prints — multiple frame colors and styles, with optional mats and hanging pins
One-click "design → print → ship" flows embedded directly in your product

Why Artelo might interest you

A fully integrated manufacturer. Artelo prints, frames, packs, and ships orders in-house. You're not routing orders through a middleman or marketplace layer.
A wider wall art catalog. Artelo gives you access to one of the broadest wall art catalogs in print-on-demand.
Lower prices. Because Artelo manufactures in-house, pricing is designed to be highly competitive versus typical print-on-demand alternatives.

FAQ

Do I need an existing Artelo account?

Yes. Create an account, then generate an API key on the Integrations page ("Connect Integration" → API). Artelo handles the fulfillment contract, product catalog, and shipping.

What file format does Polotno export?

A 300-DPI PNG, sized to match the selected Artelo product, uploaded to a public URL Artelo can fetch.

Why is the canvas locked to fixed sizes?

Artelo products are fixed sizes. Locking the canvas to the exact product dimensions guarantees the design's aspect ratio matches the product and the export clears Artelo's 150 DPI minimum.