Guides

Prepare your assets

The editor loads each assets[].url from your user’s browser, not from Rendley’s servers. So each URL has to be a direct link to the file instead of a viewer page, and your host has to allow cross-origin requests from https://app.rendley.com. The editor copies each file into the user’s Rendley project the first time the session opens, so the URL only has to work until then.

The browser decides what plays. Video can be MP4, WebM or MOV, images JPEG, PNG, WebP or GIF, and audio MP3, WAV, M4A or OGG. H.264 MP4 is the safest choice. Send none to start an empty project, or only photos to build a new video from them.

CORS

Your host must answer with these headers.

Access-Control-Allow-Origin: https://app.rendley.com
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Content-Length, Content-Range, Accept-Ranges

import cors from "cors";

app.use(
"/media",
cors({ origin: "https://app.rendley.com", allowedHeaders: ["Range"], exposedHeaders: ["Content-Length", "Content-Range", "Accept-Ranges"] }),
express.static("media"),
);

[
{
  "AllowedOrigins": ["https://app.rendley.com"],
  "AllowedMethods": ["GET", "HEAD"],
  "AllowedHeaders": ["Range"],
  "ExposeHeaders": ["Content-Length", "Content-Range", "Accept-Ranges"],
  "MaxAgeSeconds": 3600
}
]

[
{
  "origin": ["https://app.rendley.com"],
  "method": ["GET", "HEAD"],
  "responseHeader": ["Range", "Content-Length", "Content-Range", "Accept-Ranges"],
  "maxAgeSeconds": 3600
}
]

location /media/ {
  add_header Access-Control-Allow-Origin "https://app.rendley.com" always;
  add_header Access-Control-Allow-Headers "Range" always;
  add_header Access-Control-Expose-Headers "Content-Length, Content-Range, Accept-Ranges" always;
  if ($request_method = OPTIONS) { return 204; }
}

If an asset can’t load, the editor skips it, opens the rest and shows “This file can’t be opened”. The browser console names the CORS error.

Signed URLs

Sign each URL for longer than 24 hours, because the user can open the link up to a day after you create it. After that first open, your URL can expire.

Rendley matches files already in a project by exact URL, so a freshly signed URL counts as a new file. That matters for continue sessions, which should send the original assets again.

Public CDN URLs with CORS enabled are the simplest option when the media isn’t sensitive.

localhost asset URLs work while you develop, because the user’s own browser loads them.

Back to the quickstart.