Edit with Crafing

Crafing can open a new design from an image you already host. Pass the image in the studio URL as design. The editor checks the image, opens a canvas sized to it, and places the photo as the first layer. If you also pass a print productId, it loads that product and fits the image onto the product page — ready to customize, download, or order.

Image-only links stay a draft until the shopper continues. With a valid product id in the URL, the studio sets up the print product right after the image loads.

Production studio origin is https://studio.crafing.com. Put query params on the studio root (same pattern as print “Create” links):

https://studio.crafing.com/?design=https%3A%2F%2Fexample.com%2Fphoto.jpg&productId=e54fd8b1-140f-47ba-9749-7303d33edb67

The design value can be any of:

• A public https image URL (JPEG, PNG, WebP). Prefer hosts that allow CORS so the studio can fetch the pixels cleanly.
• A Crafing catalog storage key, for example catalog/user-assets/…/photo.jpg — reuses the object already in our CDN without a second upload.
• A data:image/… data URL for small inline cases (keep payloads short).

Always URL-encode the value. Spaces and slashes in a storage key or path become %2F, etc.

const design = encodeURIComponent(
  'catalog/user-assets/<userId>/<filename>.jpg'
);
const href = `https://studio.crafing.com/?design=${design}`;

productId is the print price-rule id from your Crafing catalog (the commerce product id used when creating print designs). When it is present and valid, the studio loads that product after the image import and places the photo on the product canvas.

Example id used in this guide: e54fd8b1-140f-47ba-9749-7303d33edb67. Replace it with the price-rule id for the mug, card, poster, or other line you want shoppers to land on.

If you only know a print line slug, you can pass print=your-line-slug instead. Prefer productId when you have the exact price rule.

An unknown product id is ignored: the image still imports as a custom-size draft, and the shopper can pick a print product later in the editor.

JavaScript — open from your app or CMS when someone clicks “Edit with Crafing”:

function editWithCrafing(imageUrl, productId) {
  const url = new URL('https://studio.crafing.com/');
  url.searchParams.set('design', imageUrl);
  if (productId) url.searchParams.set('productId', productId);
  window.open(url.toString(), '_blank', 'noopener,noreferrer');
}

// Example
editWithCrafing(
  'https://cdn.yoursite.com/exports/invite.jpg',
  'e54fd8b1-140f-47ba-9749-7303d33edb67'
);

Inside this website codebase you can also use getDesignImportUrl({ design, productId }) from @/lib/design-editor.

Put the branded button next to thumbnails, product photos, or gallery tiles — same idea as “Edit with Canva” on partner sites. Preview:

Edit with Crafing

Opens studio.crafing.com with a sample image and the example product id.

Style tips: keep the purple fill (#5B21B6), white label, and the Crafing mark so people recognize the action across sites. Place the control on or beside the image it will open — not buried in a footer.

Paste this next to an image. Swap the href for your own design URL and productId:

<a href="https://studio.crafing.com/?productId=e54fd8b1-140f-47ba-9749-7303d33edb67&design=https%3A%2F%2Fcrafing.com%2Flanding%2Fshowcase%2Ftemplates-channels.png" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:#5B21B6;color:#fff;text-decoration:none;font:700 15px/1.2 system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:-0.01em;">
  <img src="https://crafing.com/brand/crafing-logo-transparent.png" alt="" width="20" height="20" style="display:block;width:20px;height:20px;object-fit:contain;filter:brightness(0) invert(1);" />
  Edit with Crafing
</a>

Minimal anchor without our styled button — still works:

<a
  href="https://studio.crafing.com/?design=https%3A%2F%2Fexample.com%2Fphoto.jpg&productId=e54fd8b1-140f-47ba-9749-7303d33edb67"
  target="_blank"
  rel="noopener noreferrer"
>
  Edit with Crafing
</a>

• Encode every design value. Raw storage keys with slashes must be percent-encoded in the query string.
• Hotlink images that are publicly readable. Cookie-gated or private CDN URLs will fail the “Checking your image…” step.
• Raster images only for external URLs — SVG is not accepted on the import path.
• After a successful save, the studio moves to a normal workid session and drops the temporary design query param.
• Local testing: point at your image-editor origin, e.g. http://localhost:3000/?design=…&productId=….