Developer mode opens the code and files that made the video directly. For code-motion videos it shows index.html, which draws the screen, along with the engine and asset files; for footage-edit videos it shows the video folder and production files. Code changes appear in the preview 0.5 seconds later, and if there's an error you can jump straight to that line. The screenshots below are from the Somssii Shorts “How Do You Cut 8 Hours of Work?” (8시간 일, 어떻게 줄여요?) and “How This Shine Came to Be” (이 광택이 오기까지), and KTV's “Central Government Building Renovation” (중앙청 보수공사).
Screen layout
- Files — search by file name, file lists by group, ＋ Add.
- Code — the editing pane that opens when you select a file. At the top: Apply to code · ↺ Revert all · Save code.
- Bottom tabs — Console · Check · Render · Versions · Diff · Search · API · Effects list · Knobs · Licenses.
- Preview — play, time entry (
12.3,369f,T.s3+0.5), loop range (I/O), 0.25–2× speed, Live update, Inspect, HUD.
On a phone, you view one of Code · Preview · Files · Console · Render at a time.
File groups
| Group | Contents | If you edit it |
|---|---|---|
| This video (code motion) / Video folder (footage edit) | index.html, voice and music, edit.json, meta.json, etc. | Only this video changes |
| Batch engine | lib/*.js·css (drawing engine, brand) | Only this video changes (overridden with a copy) |
| Batch shared assets | media/ images, audio, clip frames | Only this video changes |
| Production files (footage-edit videos) | Editing scripts (build.py, etc.), ASS subtitles, graphics | Executable scripts (.py, .sh, .js, .html, etc.) can be edited only by site administrators |
| Batch fonts | fonts/ | View only |
| Edit layer | project.json — every edit made in Beginner, Intermediate and Advanced | Applied 0.4 seconds later as a single “JSON edit” step |
Edit code → instant preview
- Open
index.html(or a lib file) from the file list. - Change numbers, colors or sizes (e.g. the color table
B.Cin the batch engine'sbrand.js). With Live update on, the preview redraws 0.5 seconds later and the playhead stays where it is (CSS changes apply instantly without a redraw). Live update is turned off for files over 200KB, so use ▶ Apply orCtrl+Enter. - Drag a T time pill in the code to change that scene's timing value.
Where to edit on-screen text — find it with Inspect
The index.html of a code-motion video contains a list of on-screen text such as VFX.plan({ facts: […], beats: […] }), but that list is for checks only (text size, overlay zones, fact checking), so editing it doesn't change what's on screen. The code that actually draws the text is elsewhere.
- Turn on Inspect (
Alt+I) and point at the text you want to change. The function and line that drew it (e.g.B.pillBot · index.html:387) appear; click Go to line to open that line. - If that line passes the text directly, edit it there. If it doesn't, the function's default text is what's being drawn, so find that function in the batch engine (
lib/brand.js, etc.) and edit it there. Example:o.q || '비결은 ‘빨리’일까?'inB.pillBot. - Move the playhead once and the changed text appears. Even when you edit the batch engine, the change applies only to this video.
If you only need to change wording, the Big text card in Beginner or the Code text track in Intermediate is easier and safer (the change stays in the edit layer, so it's easy to revert to the published version). Use Developer mode for text that doesn't appear on any card, or for text inside functions used across multiple videos.
When there's an error
If the code has an error, the last successfully drawn frame stays on screen, and a red box shows the error along with Go to line. In the Console tab, you can also click a file and line reference to jump to that spot.
Inspect · HUD
Turn on Inspect (Alt+I) and point at the preview to see the line of code that drew that part; click to jump to it. HUD (Alt+H) overlays scene and time information on the preview.
Autocomplete · snippets
Press Ctrl+Space to open engine API autocomplete (with descriptions and call signatures), and insert snippets (CAP caption settings, FX.reveal text reveal, FX.scenes scene list, R.k knobs, CAP.at word-timing sync, VFX effects). Find (Ctrl+F), replace, code folding and Go to line are also available.
Replacing images · audio · fonts · video
Select a non-text file to see a preview and a ⤒ Replace… button. Images are fitted to the original size and format (Fill · Fit · As is), audio is converted to the original format when the MP4 is re-made, and 🎞 Replace with video… cuts a video into the same number of frames in your browser and inserts them. You also have ↺ Revert (this file only, back to the published version), Batch original and ⬇ Download.
Developer mode for footage-edit videos
For footage-edit videos, the preview is the editing project, and the file list shows the video folder (edit.json, meta.json, voice, music) and the production files (editing scripts, ASS subtitles, graphics). If you edit a production script and then re-make the MP4, the script runs again and the video is rebuilt. Because executable scripts run on the server, only site administrators can save them and rebuild; anyone else sees “Production scripts (.py, .sh, .js, .html, etc.) can only be edited by admins.” Record-keeping files (edit.json, plan.md, etc.) are marked ⚠ if the script doesn't read them — the actual caption text may live inside the script, so use 🔎 Find in build.py to locate it.
The 10 bottom tabs
| Tab | What it does |
|---|---|
| Console | Filter logs · info · warnings · errors, click a file and line reference to jump there, clear |
| Check | Current frame (smallest text in px · outside the safe area) · full scan · rule check · orphan patches → Run check |
| Render | Re-make MP4 from code only (from a saved code version, without the edit layer, 2–5 minutes) · link this code version to the edit · progress stages (Queued → Drawing → Audio → Encoding → Checking → Publishing) |
| Versions | Load a saved code version · compare · make an MP4 from this version · revert to published |
| Diff | Current / published / saved / versions, side by side or inline; revert this file only; 3-way diff; visual diff (one frame per second) |
| Search | Regex · match case · whole word, scope (this video · engine · shared assets · production files), replace all, go to symbol (Ctrl+Shift+O) |
| API | Engine API list — insert into code · open definition · copy, snippets, VFX effects |
| Effects list | Effects (name · type) and where they're used in this video, insert/copy snippet |
| Knobs | Adjustable values registered by this video (R.k) and numbers in the code (const T, uppercase constants) as sliders |
| Licenses | Full license texts for the code libraries and batch fonts |
Save · Apply to code · Render
- Save code — in the “Save code version” dialog, enter a name and “What did you change?”, then save. Changes made before saving are kept temporarily on this device (Load · Discard), and ↺ Revert all clears only the changes on this device.
- Apply to code (code-motion videos) — moves the text, brand colors, audio timings, sizes and knob values you changed in Beginner and Intermediate into the code and saves it as a new version. All other edits stay in the edit layer.
- Re-make MP4 from code only on the Render tab rebuilds the video from the saved code version alone and replaces the gallery video. To include the edit layer (text, effects, etc.), use Export (render) at the top (Make MP4).
What you can't do
- For engine files, you can only change the existing
lib/*.js·css; for batch assets, only existing files.index.htmlcan't be deleted, and you can't create new html, js, css or svg files. - You can change up to 600 files at once, with size limits of 2MB for text, 15MB for images, 30MB for audio, 45MB for video/frames and 10MB for fonts.
- You can re-make the MP4 up to 30 times per hour.
- Even in code, hiding or shrinking legal notice text will block the MP4 from being made.
Stuck on something? → Troubleshooting
