Create a video project: a canvas video authored as separate scenes.
curl --request POST \
--url https://api.parallellabs.app/api/v0/content/canvases/projects \
--header 'Content-Type: application/json' \
--header 'X-API-Key: <api-key>' \
--data '
{
"companyId": "<string>",
"name": "<string>",
"duration": 123,
"format": "<string>",
"width": 123,
"height": 123,
"theme": "<string>",
"fonts": [
"<string>"
],
"shared": "<string>",
"audio": [
{
"src": "<string>",
"start": 123,
"volume": 123,
"track": "<string>",
"id": "<string>",
"loop": true
}
],
"scenes": [
{
"id": "<string>",
"start": 123,
"duration": 123,
"transitionIn": "<string>",
"transitionOut": "<string>",
"transitionDuration": 123,
"exitDuration": 123,
"background": "<string>"
}
],
"canvasId": "<string>",
"replace": true
}
'import requests
url = "https://api.parallellabs.app/api/v0/content/canvases/projects"
payload = {
"companyId": "<string>",
"name": "<string>",
"duration": 123,
"format": "<string>",
"width": 123,
"height": 123,
"theme": "<string>",
"fonts": ["<string>"],
"shared": "<string>",
"audio": [
{
"src": "<string>",
"start": 123,
"volume": 123,
"track": "<string>",
"id": "<string>",
"loop": True
}
],
"scenes": [
{
"id": "<string>",
"start": 123,
"duration": 123,
"transitionIn": "<string>",
"transitionOut": "<string>",
"transitionDuration": 123,
"exitDuration": 123,
"background": "<string>"
}
],
"canvasId": "<string>",
"replace": True
}
headers = {
"X-API-Key": "<api-key>",
"Content-Type": "application/json"
}
response = requests.post(url, json=payload, headers=headers)
print(response.text)const options = {
method: 'POST',
headers: {'X-API-Key': '<api-key>', 'Content-Type': 'application/json'},
body: JSON.stringify({
companyId: '<string>',
name: '<string>',
duration: 123,
format: '<string>',
width: 123,
height: 123,
theme: '<string>',
fonts: ['<string>'],
shared: '<string>',
audio: [
{
src: '<string>',
start: 123,
volume: 123,
track: '<string>',
id: '<string>',
loop: true
}
],
scenes: [
{
id: '<string>',
start: 123,
duration: 123,
transitionIn: '<string>',
transitionOut: '<string>',
transitionDuration: 123,
exitDuration: 123,
background: '<string>'
}
],
canvasId: '<string>',
replace: true
})
};
fetch('https://api.parallellabs.app/api/v0/content/canvases/projects', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.parallellabs.app/api/v0/content/canvases/projects",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'companyId' => '<string>',
'name' => '<string>',
'duration' => 123,
'format' => '<string>',
'width' => 123,
'height' => 123,
'theme' => '<string>',
'fonts' => [
'<string>'
],
'shared' => '<string>',
'audio' => [
[
'src' => '<string>',
'start' => 123,
'volume' => 123,
'track' => '<string>',
'id' => '<string>',
'loop' => true
]
],
'scenes' => [
[
'id' => '<string>',
'start' => 123,
'duration' => 123,
'transitionIn' => '<string>',
'transitionOut' => '<string>',
'transitionDuration' => 123,
'exitDuration' => 123,
'background' => '<string>'
]
],
'canvasId' => '<string>',
'replace' => true
]),
CURLOPT_HTTPHEADER => [
"Content-Type: application/json",
"X-API-Key: <api-key>"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}package main
import (
"fmt"
"strings"
"net/http"
"io"
)
func main() {
url := "https://api.parallellabs.app/api/v0/content/canvases/projects"
payload := strings.NewReader("{\n \"companyId\": \"<string>\",\n \"name\": \"<string>\",\n \"duration\": 123,\n \"format\": \"<string>\",\n \"width\": 123,\n \"height\": 123,\n \"theme\": \"<string>\",\n \"fonts\": [\n \"<string>\"\n ],\n \"shared\": \"<string>\",\n \"audio\": [\n {\n \"src\": \"<string>\",\n \"start\": 123,\n \"volume\": 123,\n \"track\": \"<string>\",\n \"id\": \"<string>\",\n \"loop\": true\n }\n ],\n \"scenes\": [\n {\n \"id\": \"<string>\",\n \"start\": 123,\n \"duration\": 123,\n \"transitionIn\": \"<string>\",\n \"transitionOut\": \"<string>\",\n \"transitionDuration\": 123,\n \"exitDuration\": 123,\n \"background\": \"<string>\"\n }\n ],\n \"canvasId\": \"<string>\",\n \"replace\": true\n}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("X-API-Key", "<api-key>")
req.Header.Add("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}HttpResponse<String> response = Unirest.post("https://api.parallellabs.app/api/v0/content/canvases/projects")
.header("X-API-Key", "<api-key>")
.header("Content-Type", "application/json")
.body("{\n \"companyId\": \"<string>\",\n \"name\": \"<string>\",\n \"duration\": 123,\n \"format\": \"<string>\",\n \"width\": 123,\n \"height\": 123,\n \"theme\": \"<string>\",\n \"fonts\": [\n \"<string>\"\n ],\n \"shared\": \"<string>\",\n \"audio\": [\n {\n \"src\": \"<string>\",\n \"start\": 123,\n \"volume\": 123,\n \"track\": \"<string>\",\n \"id\": \"<string>\",\n \"loop\": true\n }\n ],\n \"scenes\": [\n {\n \"id\": \"<string>\",\n \"start\": 123,\n \"duration\": 123,\n \"transitionIn\": \"<string>\",\n \"transitionOut\": \"<string>\",\n \"transitionDuration\": 123,\n \"exitDuration\": 123,\n \"background\": \"<string>\"\n }\n ],\n \"canvasId\": \"<string>\",\n \"replace\": true\n}")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.parallellabs.app/api/v0/content/canvases/projects")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(url)
request["X-API-Key"] = '<api-key>'
request["Content-Type"] = 'application/json'
request.body = "{\n \"companyId\": \"<string>\",\n \"name\": \"<string>\",\n \"duration\": 123,\n \"format\": \"<string>\",\n \"width\": 123,\n \"height\": 123,\n \"theme\": \"<string>\",\n \"fonts\": [\n \"<string>\"\n ],\n \"shared\": \"<string>\",\n \"audio\": [\n {\n \"src\": \"<string>\",\n \"start\": 123,\n \"volume\": 123,\n \"track\": \"<string>\",\n \"id\": \"<string>\",\n \"loop\": true\n }\n ],\n \"scenes\": [\n {\n \"id\": \"<string>\",\n \"start\": 123,\n \"duration\": 123,\n \"transitionIn\": \"<string>\",\n \"transitionOut\": \"<string>\",\n \"transitionDuration\": 123,\n \"exitDuration\": 123,\n \"background\": \"<string>\"\n }\n ],\n \"canvasId\": \"<string>\",\n \"replace\": true\n}"
response = http.request(request)
puts response.read_body{
"canvasId": "<string>",
"summary": "<string>",
"path": "<string>",
"content": "<string>",
"notes": [
"<string>"
],
"guide": "<string>"
}{
"error": "<string>"
}{
"error": "<string>"
}{
"error": "<string>"
}Content
Create a video project: a canvas video authored as separate scenes.
A video project is one animated canvas built scene by scene: create it with every scene's timing, write each scene (PUT .../scenes/<sceneId>, several in parallel is fine), check scenes with POST .../preview, then export with POST .../render-video and poll GET .../render-video. The canvas stays a normal canvas, so it opens in the canvas editor with its timeline.
A scene file is markup, plus an optional <style> (it only styles this scene; :scope is the scene) and an optional <script> whose body runs as function (scene, tl, $, kit): tl is the scene's GSAP timeline (0 = the scene start), $(selector) selects inside the scene. Motion Kit attributes work inside scenes, timed from the scene start (data-canvas-motion, data-delay, data-canvas-split, data-canvas-type, data-canvas-count, data-canvas-camera). Theme variables: --canvas-bg, --surface, --ink, --muted, --line, --accent, --accent-ink, --positive, --positive-soft, --font-display, --font-ui, --radius, --shadow. Lucide icons: <i data-lucide="name">.
Partials (finished, theme-styled UI):
- <x-window title, url; children are the window body>: App or browser window: bar with three dots, optional title and address pill.
- <x-prompt text, icon (lucide, default "search"), button, button-icon, speed (chars/s, default 40), delay>: Input that types its text, then presses its button.
- <x-post network, name, avatar (initials or image URL), image, caption, approve-at, status, status-icon>: Social post card. With approve-at its Approve button turns into the status chip at that second.
- <x-ad network, name, avatar, image, caption, cta, url>: Sponsored ad card with a call-to-action row.
- <x-metric label, value, prefix, suffix, decimals, delay, duration>: Metric tile whose number counts up from 0.
- <x-toggle label, on-at>: Switch that flips on (accent fill, knob slide) at on-at seconds.
- <x-chip text, icon, tone (accent | ink | positive | soft)>: Pill label with an optional icon.
- <x-tile label, icon (lucide) or letter, live>: App or channel tile; live adds a green status dot.
- <x-bars at, highlight (row number from 1), highlight-at; children <x-bar label value>>: Ranked bars that grow at `at` with counting percentages; the highlighted row lights up.
- <x-bar label, value (0-100)>: One row inside <x-bars>.
- <x-line-chart points (comma numbers), at, duration>: Line chart that draws itself.
- <x-avatar initials or image>: Round avatar.
Kit helpers (times in seconds from the scene start; targets are selectors in the scene):
- kit.cursorClick(tl, target, at, {travel}): A cursor glides onto target and clicks it at `at`: a ripple, and the target presses.
- kit.press(tl, target, at, {scale}): Target squeezes like a pressed button.
- kit.tiltIn(tl, target, at, {duration, rotateX, rotateY, scale}): Target arrives tilted in 3D and settles flat (camera on product UI).
- kit.push(tl, target, at, duration, {scale, x, y}): Slow camera push on target.
- kit.pullOut(tl, container, focus, at, {scale, duration, rotation}): Camera starts zoomed into focus and pulls out to the whole container.
- kit.beatWords(tl, container, words, times, {colors, style, images}): One full-frame word per time with [background, text] colours; style "whip" (default: words whip in from alternating sides, each colour wipes across) or "slam"; images puts a photo (product shot, UI, the customer) behind each word under a scrim, pushing in.
- kit.cycleWords(tl, target, words, times, {colors, frame, style}): Target shows each word at its time (style "slam" default, or "cut"), its parent punches on each change; optional [frame background, text] colours per word.
- kit.orbit(tl, target, at, duration, {rotateY, rotateX, scale}): Slow 3D camera drift around product UI (after tiltIn, or alone).
- kit.parallax(tl, targets, at, duration, {distance}): Layers drift sideways at different depths (later targets move further).
- kit.burst(tl, target, at, {rings, scale, color}): Rings shock out from the target.
- kit.drawPath(tl, path, at, duration = 1.6): An SVG path draws itself.
- kit.highlight(tl, target, at): Accent ring and glow switch on around target.
- kit.flash(tl, at, {color}): Full-frame flash, for the drop.
- kit.shake(tl, target, at, {strength}): Short impact shake.
- kit.stagger(tl, targets, at, {from, each}): Targets pop in one after another.
- kit.position(target): Its {x, y, w, h} in the scene, ignoring transforms.
POST
/
api
/
v0
/
content
/
canvases
/
projects
Create a video project: a canvas video authored as separate scenes.
curl --request POST \
--url https://api.parallellabs.app/api/v0/content/canvases/projects \
--header 'Content-Type: application/json' \
--header 'X-API-Key: <api-key>' \
--data '
{
"companyId": "<string>",
"name": "<string>",
"duration": 123,
"format": "<string>",
"width": 123,
"height": 123,
"theme": "<string>",
"fonts": [
"<string>"
],
"shared": "<string>",
"audio": [
{
"src": "<string>",
"start": 123,
"volume": 123,
"track": "<string>",
"id": "<string>",
"loop": true
}
],
"scenes": [
{
"id": "<string>",
"start": 123,
"duration": 123,
"transitionIn": "<string>",
"transitionOut": "<string>",
"transitionDuration": 123,
"exitDuration": 123,
"background": "<string>"
}
],
"canvasId": "<string>",
"replace": true
}
'import requests
url = "https://api.parallellabs.app/api/v0/content/canvases/projects"
payload = {
"companyId": "<string>",
"name": "<string>",
"duration": 123,
"format": "<string>",
"width": 123,
"height": 123,
"theme": "<string>",
"fonts": ["<string>"],
"shared": "<string>",
"audio": [
{
"src": "<string>",
"start": 123,
"volume": 123,
"track": "<string>",
"id": "<string>",
"loop": True
}
],
"scenes": [
{
"id": "<string>",
"start": 123,
"duration": 123,
"transitionIn": "<string>",
"transitionOut": "<string>",
"transitionDuration": 123,
"exitDuration": 123,
"background": "<string>"
}
],
"canvasId": "<string>",
"replace": True
}
headers = {
"X-API-Key": "<api-key>",
"Content-Type": "application/json"
}
response = requests.post(url, json=payload, headers=headers)
print(response.text)const options = {
method: 'POST',
headers: {'X-API-Key': '<api-key>', 'Content-Type': 'application/json'},
body: JSON.stringify({
companyId: '<string>',
name: '<string>',
duration: 123,
format: '<string>',
width: 123,
height: 123,
theme: '<string>',
fonts: ['<string>'],
shared: '<string>',
audio: [
{
src: '<string>',
start: 123,
volume: 123,
track: '<string>',
id: '<string>',
loop: true
}
],
scenes: [
{
id: '<string>',
start: 123,
duration: 123,
transitionIn: '<string>',
transitionOut: '<string>',
transitionDuration: 123,
exitDuration: 123,
background: '<string>'
}
],
canvasId: '<string>',
replace: true
})
};
fetch('https://api.parallellabs.app/api/v0/content/canvases/projects', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.parallellabs.app/api/v0/content/canvases/projects",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'companyId' => '<string>',
'name' => '<string>',
'duration' => 123,
'format' => '<string>',
'width' => 123,
'height' => 123,
'theme' => '<string>',
'fonts' => [
'<string>'
],
'shared' => '<string>',
'audio' => [
[
'src' => '<string>',
'start' => 123,
'volume' => 123,
'track' => '<string>',
'id' => '<string>',
'loop' => true
]
],
'scenes' => [
[
'id' => '<string>',
'start' => 123,
'duration' => 123,
'transitionIn' => '<string>',
'transitionOut' => '<string>',
'transitionDuration' => 123,
'exitDuration' => 123,
'background' => '<string>'
]
],
'canvasId' => '<string>',
'replace' => true
]),
CURLOPT_HTTPHEADER => [
"Content-Type: application/json",
"X-API-Key: <api-key>"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}package main
import (
"fmt"
"strings"
"net/http"
"io"
)
func main() {
url := "https://api.parallellabs.app/api/v0/content/canvases/projects"
payload := strings.NewReader("{\n \"companyId\": \"<string>\",\n \"name\": \"<string>\",\n \"duration\": 123,\n \"format\": \"<string>\",\n \"width\": 123,\n \"height\": 123,\n \"theme\": \"<string>\",\n \"fonts\": [\n \"<string>\"\n ],\n \"shared\": \"<string>\",\n \"audio\": [\n {\n \"src\": \"<string>\",\n \"start\": 123,\n \"volume\": 123,\n \"track\": \"<string>\",\n \"id\": \"<string>\",\n \"loop\": true\n }\n ],\n \"scenes\": [\n {\n \"id\": \"<string>\",\n \"start\": 123,\n \"duration\": 123,\n \"transitionIn\": \"<string>\",\n \"transitionOut\": \"<string>\",\n \"transitionDuration\": 123,\n \"exitDuration\": 123,\n \"background\": \"<string>\"\n }\n ],\n \"canvasId\": \"<string>\",\n \"replace\": true\n}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("X-API-Key", "<api-key>")
req.Header.Add("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}HttpResponse<String> response = Unirest.post("https://api.parallellabs.app/api/v0/content/canvases/projects")
.header("X-API-Key", "<api-key>")
.header("Content-Type", "application/json")
.body("{\n \"companyId\": \"<string>\",\n \"name\": \"<string>\",\n \"duration\": 123,\n \"format\": \"<string>\",\n \"width\": 123,\n \"height\": 123,\n \"theme\": \"<string>\",\n \"fonts\": [\n \"<string>\"\n ],\n \"shared\": \"<string>\",\n \"audio\": [\n {\n \"src\": \"<string>\",\n \"start\": 123,\n \"volume\": 123,\n \"track\": \"<string>\",\n \"id\": \"<string>\",\n \"loop\": true\n }\n ],\n \"scenes\": [\n {\n \"id\": \"<string>\",\n \"start\": 123,\n \"duration\": 123,\n \"transitionIn\": \"<string>\",\n \"transitionOut\": \"<string>\",\n \"transitionDuration\": 123,\n \"exitDuration\": 123,\n \"background\": \"<string>\"\n }\n ],\n \"canvasId\": \"<string>\",\n \"replace\": true\n}")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.parallellabs.app/api/v0/content/canvases/projects")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(url)
request["X-API-Key"] = '<api-key>'
request["Content-Type"] = 'application/json'
request.body = "{\n \"companyId\": \"<string>\",\n \"name\": \"<string>\",\n \"duration\": 123,\n \"format\": \"<string>\",\n \"width\": 123,\n \"height\": 123,\n \"theme\": \"<string>\",\n \"fonts\": [\n \"<string>\"\n ],\n \"shared\": \"<string>\",\n \"audio\": [\n {\n \"src\": \"<string>\",\n \"start\": 123,\n \"volume\": 123,\n \"track\": \"<string>\",\n \"id\": \"<string>\",\n \"loop\": true\n }\n ],\n \"scenes\": [\n {\n \"id\": \"<string>\",\n \"start\": 123,\n \"duration\": 123,\n \"transitionIn\": \"<string>\",\n \"transitionOut\": \"<string>\",\n \"transitionDuration\": 123,\n \"exitDuration\": 123,\n \"background\": \"<string>\"\n }\n ],\n \"canvasId\": \"<string>\",\n \"replace\": true\n}"
response = http.request(request)
puts response.read_body{
"canvasId": "<string>",
"summary": "<string>",
"path": "<string>",
"content": "<string>",
"notes": [
"<string>"
],
"guide": "<string>"
}{
"error": "<string>"
}{
"error": "<string>"
}{
"error": "<string>"
}Authorizations
CompanyApiKeyBearerAuth & CompanyId
Company API key - scoped to a specific company. Generate from the Integrations page in your dashboard.
Body
application/json
The video project
Request body for creating a video project
Company ID
Video name
Video length in seconds
'wide' (1920x1080), 'story' (1080x1920), 'square' or 'portrait'
Custom width in px (with height)
Custom height in px (with width)
theme.css: a :root block of theme variables plus shared classes
Google font specs, e.g. "Inter:wght@400;600"
shared.html: hidden markup every scene can use (logo symbols)
Music and sound effects
Show child attributes
Show child attributes
Every scene with its timing
Show child attributes
Show child attributes
Turn this existing canvas into the project instead of creating one
With canvasId: discard the design already on it
Response
The created project with the authoring guide
Video project
Canvas ID of the project
Scenes with timing, audio, fonts, files and the last render
The file read, when a path was given
That file's exact text
Warnings worth checking after a change
Scene file contract, partials and kit helpers (on create)