Agents can describe a video in a small JSON recipe. Drawbly renders the timed annotations, captions and supplied narration on the user's device. No AI requests, API keys or rendering uploads.
Download the example recipe. The current canvas stays unchanged. Recipes and audio are held in memory until saved; keep narration beside the recipe. Export runs in real time, with this tab open.
For agents with terminal access, the local renderer kit contains the same drawing engine. Extract it, install Node.js 22.14+ and FFmpeg (including ffprobe), then run:
npm install node render-recipe.mjs example.video.json output.mp4
In a source checkout: npm run render:recipe -- recipe.video.json output.mp4. Output includes a captioned H.264/AAC MP4, portable recipe with embedded background, and editable .drawing.json. Keep the original narration file alongside any recipe you move. Existing outputs are never overwritten. FFmpeg and fonts must be installed locally; set FFMPEG_PATH and FFPROBE_PATH if needed. Installing dependencies requires internet; rendering does not.
{
"kind": "drawbly-video", "version": 1,
"title": "Explain this photo", "canvas": [1000, 700],
"duration": 12, "framing": "portrait",
"background": {"file": "photo.jpg"},
"narration": {"file": "narration.wav", "at": 0},
"events": [
{"at": 1, "duration": 1.5, "object": {
"type": "arrow", "color": "#e32d38", "width": 6,
"points": [[100, 100], [300, 250], [500, 250]]
}},
{"at": 3, "duration": 0, "object": {
"type": "text", "text": "Look here", "color": "#292d32",
"x": 500, "y": 300, "fontSize": 40
}}
],
"captions": [{"at": 0, "end": 4, "text": "Here is the detail to notice."}]
}
pen, arrow or translucent shade; supply the actual points, color and width. Text appears at its start time. Marks remain visible; array order controls layering. Events may overlap.fontFamily: sans, serif or mono, and optional wrapWidth. Font sizes are 8–240; stroke widths 0.5–120. Recipe strokes preserve supplied points without smoothing.{"src":"data:image/png;base64,...","width":1000,"height":700}, up to 1 million characters. Browser image import normalizes larger files.Where WebMCP is supported, the drawing page exposes prepare_video_recipe({recipe}), read_video_recipe_status({}), render_video_recipe({}), and cancel_video_recipe({}). Preparation does not edit the user's canvas. Referenced files must be selected through the visible file pickers; agents cannot read arbitrary device files through these tools.
After preparation, check imageReady/audioReady, start rendering, and poll phase until ready. Download through the visible Save MP4/WebM link. Rendering failure or cancellation returns to prepared with an explanatory message. A browser may require a user click on Create video to unlock audio; terminal agents should use the local renderer for unattended exports.
The renderer kit now includes optional Kokoro neural speech tools. They run on your computer with Python 3.11 and FFmpeg. Download the model once, then generate narration offline. Start with the af_heart voice at speed 1.0. The website accepts the resulting audio; it does not run a hosted voice service.
python -m venv .local/voice-env # Windows; on macOS/Linux use .local/voice-env/bin/python .local/voice-env/Scripts/python.exe -m pip install -r voice-requirements.txt .local/voice-env/Scripts/python.exe download-voice.py .local/kokoro-model .local/voice-env/Scripts/python.exe speak-neural.py story-example.json output-001 --models .local/kokoro-model node time-story.mjs story-example.json output-001 node render-recipe.mjs output-001/input.recipe.json output-001/final.mp4
Edit story-example.json for each video. Each segment contains speech, a caption and optional annotations positioned as fractions of that segment's measured duration. The tools generate narration, synchronized captions and a renderable recipe. Use a new output directory for each attempt. The included VIDEO-PRODUCTION.md covers setup, photo sourcing, the sample-video workflow, quality checks, and a batch/scheduling handoff for agents. The kit generates files; scheduling and posting require your own tools.
The browser does not generate speech or call an LLM. Supply narration recorded by a person, synthesized with the local neural tools, or created using your own chosen provider. Offline rendering and speech have no per-request API fees. Cloud agents and hosted voice services can still charge their user; running a client locally does not make a remote model free. Drawbly's ordinary website hosting remains separate.
For an offline Windows narration file, use the included speak-local.ps1 with an installed Windows voice. Other systems can supply a WAV from their local speech software. Label AI-generated narration where applicable. Review facts, timing, pronunciation and image-use rights before sharing.
powershell -NoProfile -File speak-local.ps1 -TextFile script.txt -Output narration.wav