Skip to main content

Changelog

1.4.0 – JavaScript libraries for HTML layers​

New features​

JavaScript library support in HTML layers

  • New enableLibraries property on html layers (images and videos) that gives access to a curated set of JavaScript libraries:
    • GSAP 3.x — professional-grade animations and timelines
    • Lottie Web 5.x — After Effects JSON animations
    • Chart.js 4.x — data visualizations (bar, line, pie, doughnut, etc.)
    • Motion 12.x — spring physics, keyframe animations, and stagger effects
    • Anime.js 4.x — lightweight timeline and property animations
    • D3.js 7.x — advanced data visualizations (maps, graphs, custom charts)
    • Lucide Icons 1.x — 1500+ open-source SVG icons
    • TailwindCSS — utility-first CSS framework (Play CDN)
  • All libraries load automatically — no <script src="..."> tags needed. Duplicate user-added <script> imports are automatically removed.
  • Libraries are bundled locally in the runner — zero external CDN calls at render time for maximum speed and reliability.
  • Inline <script> tags are allowed when enableLibraries: true for custom logic using the provided libraries.
  • enableLibraries: true also enables TailwindCSS, so a separate tailwindcss: true is no longer needed.

Transparent animated HTML overlays

  • Animated HTML layers (animated: true) now fully support transparent backgrounds, making them ideal for overlays on top of other video layers.

Breaking changes​

  • The allowJavaScript property has been renamed to enableLibraries. Existing configurations using allowJavaScript need to be updated.

See the image HTML layer and video HTML layer documentation for details and examples.

1.3.0 – HTML layers, AI improvements & Visual Builder​

New features​

HTML layer support for image and video generation

  • Images and videos now support a new html layer type that renders arbitrary HTML and CSS directly onto the output.
  • Full control over fonts, layout, positioning and styling via inline CSS.
  • Pixel-perfect rendering with support for responsive sizing, custom fonts via Google Fonts and CSS variables.
  • Available in both image and video configurations.
  • CSS animations (experimental): When using the html layer in a video clip with "animated": true, the layer is recorded as a video segment so CSS keyframe animations, transitions and JavaScript-driven effects are captured at runtime. This feature is experimental and may behave differently across complex animation scenarios.
  • See the image HTML layer and video HTML layer documentation for usage and examples.

Overhauled Playground with Visual Builder

  • The Playground has been completely reworked and now includes a Visual Builder mode.
  • Build image and video configurations interactively without writing JSON directly.
  • Switch between the visual editor and the raw JSON editor at any time.
  • New curated ready-to-use examples are available directly in the Playground to get started within seconds.

AI Assistant improvements

  • The AI assistant now routes all requests through OpenRouter, enabling access to a broader set of models.
  • Improved JSON stability: the assistant now includes a built-in repair step that automatically fixes malformed responses before they reach validation.
  • Classifier and repair tasks use an updated fallback model.

1.2.0 – Title layer outline & animation​

New features​

  • Title outline effects for video title layers
  • New properties on title layers
    • animationDuration (number, seconds) – controls the reveal speed for word-by-word and letter-by-letter animations
    • outlineColor (hex color) – color of the text outline
    • outlineWidth (number, pixels) – width of the outline
    • outlineStyle ("outline" | "shadow" | "glow") – outline rendering style
  • 2-layer rendering: outline is rendered below and text fill above so titles stay readable even with thick outlines.
  • Improved outline alignment for top / bottom positions across all outline styles.

For more details, see the video schema and the video layer types documentation.

Demo: Text effects with outline styles​

View full configuration JSON
{
  "type": "video",
  "config": {
    "defaults": {
      "transition": null
    },
    "clips": [
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#ca9c10"
          },
          {
            "type": "title",
            "text": "Classic Outline",
            "textColor": "#ffffff",
            "outlineColor": "#000000",
            "outlineWidth": 5,
            "outlineStyle": "outline",
            "position": "bottom",
            "zoomDirection": null
          }
        ]
      },
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#f0f0f0"
          },
          {
            "type": "title",
            "text": "Shadow Effect",
            "textColor": "#ebebeb",
            "outlineColor": "#000000",
            "outlineWidth": 6,
            "outlineStyle": "shadow",
            "position": "center"
          }
        ]
      },
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#1a1a2e"
          },
          {
            "type": "title",
            "text": "Glow Effect",
            "textColor": "#ffffff",
            "outlineColor": "#ff0066",
            "outlineWidth": 8,
            "outlineStyle": "glow",
            "position": "center",
            "fontSize": 100
          }
        ]
      },
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#4ecdc4"
          },
          {
            "type": "title",
            "text": "Word by Word\nShadow Style",
            "textColor": "#ffffff",
            "outlineColor": "#000000",
            "outlineWidth": 5,
            "outlineStyle": "shadow",
            "position": "center",
            "style": "word-by-word"
          }
        ]
      },
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#0f0f23"
          },
          {
            "type": "title",
            "text": "Letter by Letter\nGlow Effect",
            "textColor": "#ffffff",
            "outlineColor": "#00ff88",
            "outlineWidth": 6,
            "outlineStyle": "glow",
            "position": "center",
            "style": "letter-by-letter",
            "animationDuration": 1
          }
        ]
      },
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#e74c3c"
          },
          {
            "type": "title",
            "text": "Fade In\nOutline Style",
            "textColor": "#ffffff",
            "outlineColor": "#2c3e50",
            "outlineWidth": 3,
            "outlineStyle": "outline",
            "position": "center",
            "style": "fade-in"
          }
        ]
      },
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#22ad32"
          },
          {
            "type": "title",
            "text": "Top Shadow",
            "textColor": "#ffffff",
            "outlineColor": "#000000",
            "outlineWidth": 6,
            "outlineStyle": "shadow",
            "position": "top"
          }
        ]
      },
      {
        "duration": 3,
        "layers": [
          {
            "type": "fill-color",
            "color": "#000020"
          },
          {
            "type": "title",
            "text": "Top Glow",
            "textColor": "#ffffff",
            "outlineColor": "#00ffff",
            "outlineWidth": 8,
            "outlineStyle": "glow",
            "position": "top"
          }
        ]
      }
    ]
  }
}

1.1.0 – MCP & validation refactor​

Stricter validation​

  • Job configuration validation has been completely overhauled.
  • Requests are now consistently validated against the JSON schemas (for example, image and video configurations).
  • Invalid fields are rejected earlier and with clearer error messages, leading to more stable and predictable responses.

New schema endpoints​

In version 1.1.0, dedicated endpoints were introduced to retrieve the current schema versions via the API:

  • GET /api/v1/schemas – list all available schemas
  • GET /api/v1/schemas/image – JSON schema for image configurations
  • GET /api/v1/schemas/video – JSON schema for video configurations

These endpoints correspond to the routes in core/src/routes/schemaRoutes.ts and form the basis for automatic schema documentation.

MCP integration​

  • The new schema endpoints are also exposed through the MCP setup.
  • LLMs can use them to fetch the latest JSON schemas and understand what a valid configuration for image and video jobs looks like.
  • This significantly improves auto-completion, validation, and error explanations in MCP-based tools.