Jitter

Jitter Programmatic Control Skill

Control Jitter (jitter.video) for exporting animations, replacing assets, and modifying text.

Setup

Load utils before interacting with Jitter:

// Load once per page (before navigation or via addInitScript)
await page.addInitScript({ path: './skills/jitter/dist/jitter-utils.js' })

// Navigate to project
await page.goto('https://jitter.video/file/?id=YOUR_FILE_ID')

// Wait for app to be ready
await page.evaluate(() => jitterUtils.waitForApp())

API Reference

Traversal

Actions

Export

Snapshot & Restore

Waiting

Examples

Replace Assets and Export

// Get all media nodes
const media = await page.evaluate(() => jitterUtils.findAllMediaNodes())

// Replace specific assets
await page.evaluate(() => {
  jitterUtils.batchReplace([
    { nodeId: 'abc123', data: { url: 'https://example.com/new-image.svg' } },
    { nodeId: 'def456', data: { url: 'https://example.com/new-photo.jpg' } },
  ])
})

// Wait for sync then export
await page.evaluate(() => jitterUtils.waitForSync())
const exportUrl = await page.evaluate(() =>
  jitterUtils.generateExportUrlFromCurrentProject({ profile: 'lottie' }),
)
await page.goto(exportUrl)

Export with Temporary Changes

await page.evaluate(async () => {
  const nodeIds = ['node1', 'node2']
  const changes = {
    node1: { url: 'https://temp-asset.svg' },
    node2: { text: 'Temporary Text' },
  }

  await jitterUtils.withTemporaryChanges(nodeIds, changes, async () => {
    // Changes applied here, will be restored after
    const url = jitterUtils.generateExportUrlFromCurrentProject()
    // ... navigate to export URL and download
  })
  // Original values automatically restored
})

Find and Update Text

const textNodes = await page.evaluate(() => jitterUtils.findAllTextNodes())
// [{ id, name, text, fontSize, fontFamily }, ...]

await page.evaluate(() => {
  jitterUtils.replaceText('textNodeId', 'New headline')
})

Export Profiles

Lottie Export Limitations

• NodeIds are NOT preserved in exported Lottie - cannot map back to Jitter nodes
• Text becomes shapes - not editable Lottie text layers
• Images are embedded as base64, no external URLs
• Videos export as first frame only

Workaround: Always modify assets in Jitter before export using replaceAssetUrl().

Inspecting exported Lottie files

Lottie JSON files from Jitter contain giant base64-encoded image strings that make them unreadable. Use jq with walk() to truncate long strings before inspecting:

# Pretty-print with long strings truncated and huge arrays summarized
jq 'walk(
  if type == "string" and length > 80 then .[:80] + "..."
  elif type == "array" and length >= 20 then .[:3] + ["\(length - 3) more items..."]
  else . end
)' exported.json

# Pipe to less for paging
jq 'walk(
  if type == "string" and length > 80 then .[:80] + "..."
  elif type == "array" and length >= 20 then .[:3] + ["\(length - 3) more items..."]
  else . end
)' exported.json | less

This replaces embedded base64 image data with truncated previews and collapses large arrays (20+ items, common in Bezier path data) to just the first 3 elements plus a count, so you can read the animation structure without scrolling through walls of encoded pixels or coordinate lists.

Rendering Frames (Seek + Screenshot)

Jitter has a hidden /api/renderer/ page with a headless rendering engine. It exposes window.jitter.renderFrame(timeMs) which renders a full-quality frame at any point in the animation and returns a raw PNG. This is the same engine Jitter's own export backend uses (server-side Puppeteer calling renderFrame() in a loop).

Getting file and artboard IDs

From the editor page URL https://jitter.video/file/?id=FILE_ID&nodeId=ARTBOARD_ID, or programmatically:

const fileId = await page.evaluate(() => window.app.props.fileMeta.id)
const artboard = await page.evaluate(() => {
  const conf = window.app.getState().observableImmutableConf.getSnapshot()
  const root = conf.roots[0]
  return { id: root.id, width: root.item.width, height: root.item.height, duration: root.item.duration }
})

Opening the renderer

Navigate to /api/renderer/ with these URL params. Use a separate page from the editor so you don't lose editor state.

const rendererUrl = [
  'https://jitter.video/api/renderer/',
  `?file=${fileId}`,
  `&bucket=snackthis-userdata`,
  `&artboardId=${artboardId}`,
  `&width=${width}`,
  `&height=${height}`,
  `&superSampling=2`,
  `&noBg=false`,
  `&addWatermark=false`,
  `&playbackDirection=normal`,
  `&vfe=off`,
].join('')

state.rendererPage = context.pages().find(p => p.url() === 'about:blank') ?? await context.newPage()
await state.rendererPage.goto(rendererUrl, { waitUntil: 'domcontentloaded' })

Waiting for the renderer to be ready

The page dispatches a jitterLoadEvent custom event when ready, or sets window.jitter directly. Wait for either:

const exportContext = await state.rendererPage.evaluate(() => {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(() => reject(new Error('Renderer timed out')), 30000)
    if (window.jitter) {
      clearTimeout(timeout)
      return resolve(window.jitter.exportContext)
    }
    document.addEventListener('jitterLoadEvent', (e) => {
      clearTimeout(timeout)
      if (e.detail.name === 'ready') resolve(e.detail)
      else if (e.detail.name === 'error') reject(new Error(e.detail.message))
    })
  })
})
// exportContext = { exportWidth, exportHeight, exportDuration }

Rendering a frame at a specific time

renderFrame(timeMs) returns a raw binary PNG string. Convert to base64 inside the browser, then decode to a Buffer in the sandbox:

// Render frame at 4000ms (4 seconds into the animation)
const base64Png = await state.rendererPage.evaluate(async () => {
  const result = await window.jitter.renderFrame(4000)
  return btoa(result.pngString)
})

const fs = require('node:fs')
const buf = Buffer.from(base64Png, 'base64')
fs.writeFileSync('/tmp/frame-4000.png', buf)

The output is a full-resolution PNG matching the width/height params, with no editor UI, selection handles, or chrome. Just the clean artboard content at that exact animation frame.

The artboard may be letterboxed inside the PNG. With width=1920&height=1080 and superSampling=2 the artboard rendered at half size (960x540) centered with transparent padding. Before comparing against other renders, find the content bbox once (magick frame.png -alpha extract -threshold 50% -format "%@" info:) and crop + flatten onto the artboard fill color.

Rendering multiple frames

Loop over timestamps to capture a sequence:

const fps = 30
const durationMs = exportContext.exportDuration // e.g. 8450
const totalFrames = Math.ceil(durationMs / 1000 * fps)

for (let i = 0; i < totalFrames; i++) {
  const timeMs = Math.round(i / fps * 1000)
  const base64 = await state.rendererPage.evaluate(async (t) => {
    const result = await window.jitter.renderFrame(t)
    return btoa(result.pngString)
  }, timeMs)
  
  const buf = Buffer.from(base64, 'base64')
  fs.writeFileSync(`/tmp/frames/frame-${String(i).padStart(4, '0')}.png`, buf)
}

Seeking on the editor timeline (alternative)

If you just need to visually scrub the editor timeline without the full renderer, click on the timeline ruler element. The ruler spans from x=272 (0ms) to the duration end. Clicking sets the time cursor:

// On the editor page (not the renderer page)
const rulerY = 1120 // vertical center of the ruler bar
const rulerStartX = 272
const rulerEndX = 1962 // corresponds to total duration

const fraction = 4000 / 8450 // target time / total duration
const clickX = rulerStartX + (rulerEndX - rulerStartX) * fraction
await state.page.mouse.click(clickX, rulerY)

This updates the editor canvas preview but the canvas only shows the viewport-visible portion of the artboard. For full-resolution artboard screenshots, use the /api/renderer/ approach above.

Porting to Remotion / egaki

See PORTING-TO-REMOTION.md for the full guide: scene graph extraction, concept mapping table, easing usage, additive animation model, and frame-by-frame comparison workflow.

All Jitter easings are exported from egaki/video as continuous-intensity preset functions (e.g. impulseOvershoot(96)), generated by a port of Jitter's own curve engine. See the easing mapping table in the porting guide.

Quick reference for smooth:standard:v1: cubic-bezier(lerp(0.3, 0.9, intensity/100), 0, 0, 1). At intensity 50: Easing.bezier(0.5, 0, 0, 1).

Tips

1. Wait for sync after modifications before exporting (1-2 seconds)
2. Asset URLs must be publicly accessible - Jitter fetches server-side
3. All *WithUndo actions can be undone with Ctrl+Z
4. Node IDs are stable and bookmarkable via ?nodeId=xxx
5. Export URLs require being logged in with project access
6. superSampling must be 2 or higher when using /api/renderer/; value 1 fails Zod validation
7. Use a separate page for the renderer so you don't lose editor state