Diffusion Studio JSX视频语法入门如何用代码写出一支视频【免费下载链接】editorAn open-source video editor built for agents. Edits become code, code becomes video.项目地址: https://gitcode.com/gh_mirrors/editor94/editorDiffusion Studio 是一款开源的、为 AI Agent 打造的视频编辑器它的核心理念是编辑即代码代码即视频Edits become code, code becomes video。本文将用通俗的方式带你入门它的JSX 视频语法如何用stage和scene声明一支视频、如何用start/end把素材铺上时间轴、如何给标题加渐显动画、如何用代码声明 AI 生成的画面与旁白——几十行代码就能写出一支可在专业剪辑界面里继续精修的视频。 为什么可以用代码写视频Diffusion Studio 把源码当作剪辑文档本身项目就是一个存放 JSX 的文件夹入口文件默认导出一个组件应用会把它编译并直接挂载进编辑器的场景树——每个元素都成为编辑器里一个可拖拽、可选择的节点。更妙的是双向同步改代码→ 画布立即重绘保存即重新编译改画布拖拽矩形、修剪片段、改字→ 编辑器会把变化写回源码Agent 每次看到的都是最新版本的代码。这意味着你既可以纯手工敲代码也可以让 AI 帮你改还能随时在图形界面接手继续精修。完整管线打 ID、编译、求值、挂载、资源解析见 JSX 参考总览。 快速上手跑起一个示例项目本地开发需要 Node 20克隆仓库后执行git clone https://gitcode.com/gh_mirrors/editor94/editor cd editor npm install npm run dev然后复制一个官方示例到项目文件夹用随附的dapi命令打开即可cp docs/examples/01-basics.tsx ~/Projects/basics/index.tsx dapi open ~/Projects/basics这个示例 01-basics.tsx 覆盖了日常剪辑最常见的组合sequence顺序拼接 溶解转场、画中画image、由数据驱动批量生成的text标题、以及垫底的音乐audio是学习语法的最佳起点。️ 核心结构stage与scene每个项目只有一个根元素stage它是一块无限画布真正被剪辑和渲染的是画布里的scene——每个场景都是一个独立的可播放画框并自带一条时间轴。export default function Project() { return ( stage camera{[0.3, 0, 0, 0.3, 85, 150]} scene nameIntro width{1920} height{1080} fillblack active {/* 你的视频内容都放在这里 */} /scene /stage ); }新手只需记住三条规则规则说明width/height必填场景的像素尺寸即最终渲染导出的画框大小标记active播放头、时间轴和截图工具都指向激活场景项目里请至少激活一个场景内元素才有时间场景是时钟放在stage根部的节点不会被播放更多细节见stage参考 和scene参考。✂️ 把素材放上时间轴start / end 与 sourceIn / sourceOut时间属性分两组回答两个独立的问题片段放在时间轴哪里start/end和播放源素材的哪一段sourceIn/sourceOut。scene nameCut width{1920} height{1080} fillblack active {/* 时间轴 0–12 秒从素材第 2 秒开始播 */} video srcb-roll/drone.mp4 start{0} end{12} sourceIn{2} width{1920} height{1080} / {/* 无源节点只写 start / end 即可 */} text start{1} end{5} width{1920} fontSize{96} color#FFFHello/text /scene⚠️ 两个容易踩的坑裁剪 ≠ 移动只改start是沿时间轴滑动片段要切掉素材开头必须动sourceIn时间格式很灵活秒数2.2、帧数30f、02:30都可以统一按 30fps 换算。完整语义包括playbackRate变速、sequence顺序拼接见 timing 参考。✨ 标题与预设动画让文字优雅地淡入淡出text是最常用的元素之一直接在它的子节点里声明animation即可获得淡入淡出、滑入等预设效果text width{1920} height{1080} textAligncenter textBaselinemiddle color#FFFFFF fontFamilyInter fontSize{120} start{1} end{5} Chapter One animation typefade duration{0.5} / animation typefade phaseout duration{0.5} / /text官方示例里还用 SolidJS 的For把标题做成数据驱动——一份TITLES数组批量渲染多条字幕改数据即改成片见 01-basics.tsx 的 Title 组件。预设动画一览见 animations 参考。️ 关键帧让画面移动、缩放、变淡预设动画不够用用keyframeTrack对任意属性做关键帧插值time支持所有时间格式image srcstills/photo.jpg start{0} end{5} keyframeTrack propertyx keyframe time{0} value{-400} easingeaseOut / keyframe time{1} value{200} / /keyframeTrack keyframeTrack propertyopacity keyframe time{0} value{0} / keyframe time15f value{1} / /keyframeTrack /image一段代码同时完成从左侧滑入 半秒淡入。缓动支持linear、easeInOut、bouncy乃至自定义cubicBezier()完整规则见 keyframes 参考。 用代码声明 AI 生成的画面与旁白这是 Diffusion Studio 最有特色的部分用generate.*以声明式描述 AI 素材——文本生成图、图转视频、TTS 配音、环境音它们像变量一样参与构图并按依赖顺序自动生成。import { generate } from diffusionstudio/jsx; const keyframe generate.image({ prompt: 灯塔矗立在玄武岩悬崖上清晨低雾电影感广角, aspectRatio: 16:9, }); const shot1 generate.video({ prompt: 缓慢航拍推向灯塔雾在飘动, startFrame: keyframe, duration: 5, }); const voiceover generate.voice({ prompt: 在雷达出现之前一束光是水手判断陆地将至的唯一承诺。, });再把shot1、voiceover作为src放进scene加一行captions presetspotlight /就能自动对齐字幕。完整的多级生成示例见 02-genai.tsx语法细节见 generate 参考。 上手清单示例与完整文档你想学去哪里看11 个可运行示例基础剪辑 / GenAI / 动画 / three.js / WebGPU / 着色器docs/examples/README.mdJSX 全部元素与属性docs/reference/jsx/README.mddapi命令行与 MCP 工具探测、抓帧、波形、转写、渲染导出docs/reference/tools/README.md声明式动画useTicker驱动属性03-ticker.tsx从 01-basics.tsx 开始改一改你就能体会代码与画布互相驱动的完整工作流——写代码学剪辑、让 Agent 帮你出片从这里开始。【免费下载链接】editorAn open-source video editor built for agents. Edits become code, code becomes video.项目地址: https://gitcode.com/gh_mirrors/editor94/editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Diffusion Studio JSX视频语法入门：如何用代码写出一支视频
Diffusion Studio JSX视频语法入门如何用代码写出一支视频【免费下载链接】editorAn open-source video editor built for agents. Edits become code, code becomes video.项目地址: https://gitcode.com/gh_mirrors/editor94/editorDiffusion Studio 是一款开源的、为 AI Agent 打造的视频编辑器它的核心理念是编辑即代码代码即视频Edits become code, code becomes video。本文将用通俗的方式带你入门它的JSX 视频语法如何用stage和scene声明一支视频、如何用start/end把素材铺上时间轴、如何给标题加渐显动画、如何用代码声明 AI 生成的画面与旁白——几十行代码就能写出一支可在专业剪辑界面里继续精修的视频。 为什么可以用代码写视频Diffusion Studio 把源码当作剪辑文档本身项目就是一个存放 JSX 的文件夹入口文件默认导出一个组件应用会把它编译并直接挂载进编辑器的场景树——每个元素都成为编辑器里一个可拖拽、可选择的节点。更妙的是双向同步改代码→ 画布立即重绘保存即重新编译改画布拖拽矩形、修剪片段、改字→ 编辑器会把变化写回源码Agent 每次看到的都是最新版本的代码。这意味着你既可以纯手工敲代码也可以让 AI 帮你改还能随时在图形界面接手继续精修。完整管线打 ID、编译、求值、挂载、资源解析见 JSX 参考总览。 快速上手跑起一个示例项目本地开发需要 Node 20克隆仓库后执行git clone https://gitcode.com/gh_mirrors/editor94/editor cd editor npm install npm run dev然后复制一个官方示例到项目文件夹用随附的dapi命令打开即可cp docs/examples/01-basics.tsx ~/Projects/basics/index.tsx dapi open ~/Projects/basics这个示例 01-basics.tsx 覆盖了日常剪辑最常见的组合sequence顺序拼接 溶解转场、画中画image、由数据驱动批量生成的text标题、以及垫底的音乐audio是学习语法的最佳起点。️ 核心结构stage与scene每个项目只有一个根元素stage它是一块无限画布真正被剪辑和渲染的是画布里的scene——每个场景都是一个独立的可播放画框并自带一条时间轴。export default function Project() { return ( stage camera{[0.3, 0, 0, 0.3, 85, 150]} scene nameIntro width{1920} height{1080} fillblack active {/* 你的视频内容都放在这里 */} /scene /stage ); }新手只需记住三条规则规则说明width/height必填场景的像素尺寸即最终渲染导出的画框大小标记active播放头、时间轴和截图工具都指向激活场景项目里请至少激活一个场景内元素才有时间场景是时钟放在stage根部的节点不会被播放更多细节见stage参考 和scene参考。✂️ 把素材放上时间轴start / end 与 sourceIn / sourceOut时间属性分两组回答两个独立的问题片段放在时间轴哪里start/end和播放源素材的哪一段sourceIn/sourceOut。scene nameCut width{1920} height{1080} fillblack active {/* 时间轴 0–12 秒从素材第 2 秒开始播 */} video srcb-roll/drone.mp4 start{0} end{12} sourceIn{2} width{1920} height{1080} / {/* 无源节点只写 start / end 即可 */} text start{1} end{5} width{1920} fontSize{96} color#FFFHello/text /scene⚠️ 两个容易踩的坑裁剪 ≠ 移动只改start是沿时间轴滑动片段要切掉素材开头必须动sourceIn时间格式很灵活秒数2.2、帧数30f、02:30都可以统一按 30fps 换算。完整语义包括playbackRate变速、sequence顺序拼接见 timing 参考。✨ 标题与预设动画让文字优雅地淡入淡出text是最常用的元素之一直接在它的子节点里声明animation即可获得淡入淡出、滑入等预设效果text width{1920} height{1080} textAligncenter textBaselinemiddle color#FFFFFF fontFamilyInter fontSize{120} start{1} end{5} Chapter One animation typefade duration{0.5} / animation typefade phaseout duration{0.5} / /text官方示例里还用 SolidJS 的For把标题做成数据驱动——一份TITLES数组批量渲染多条字幕改数据即改成片见 01-basics.tsx 的 Title 组件。预设动画一览见 animations 参考。️ 关键帧让画面移动、缩放、变淡预设动画不够用用keyframeTrack对任意属性做关键帧插值time支持所有时间格式image srcstills/photo.jpg start{0} end{5} keyframeTrack propertyx keyframe time{0} value{-400} easingeaseOut / keyframe time{1} value{200} / /keyframeTrack keyframeTrack propertyopacity keyframe time{0} value{0} / keyframe time15f value{1} / /keyframeTrack /image一段代码同时完成从左侧滑入 半秒淡入。缓动支持linear、easeInOut、bouncy乃至自定义cubicBezier()完整规则见 keyframes 参考。 用代码声明 AI 生成的画面与旁白这是 Diffusion Studio 最有特色的部分用generate.*以声明式描述 AI 素材——文本生成图、图转视频、TTS 配音、环境音它们像变量一样参与构图并按依赖顺序自动生成。import { generate } from diffusionstudio/jsx; const keyframe generate.image({ prompt: 灯塔矗立在玄武岩悬崖上清晨低雾电影感广角, aspectRatio: 16:9, }); const shot1 generate.video({ prompt: 缓慢航拍推向灯塔雾在飘动, startFrame: keyframe, duration: 5, }); const voiceover generate.voice({ prompt: 在雷达出现之前一束光是水手判断陆地将至的唯一承诺。, });再把shot1、voiceover作为src放进scene加一行captions presetspotlight /就能自动对齐字幕。完整的多级生成示例见 02-genai.tsx语法细节见 generate 参考。 上手清单示例与完整文档你想学去哪里看11 个可运行示例基础剪辑 / GenAI / 动画 / three.js / WebGPU / 着色器docs/examples/README.mdJSX 全部元素与属性docs/reference/jsx/README.mddapi命令行与 MCP 工具探测、抓帧、波形、转写、渲染导出docs/reference/tools/README.md声明式动画useTicker驱动属性03-ticker.tsx从 01-basics.tsx 开始改一改你就能体会代码与画布互相驱动的完整工作流——写代码学剪辑、让 Agent 帮你出片从这里开始。【免费下载链接】editorAn open-source video editor built for agents. Edits become code, code becomes video.项目地址: https://gitcode.com/gh_mirrors/editor94/editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考