A browser live-code editor for dweets, shaders and canvas experiments. Write code on the left, see it run on the canvas, and capture GIF or WebM output. Everything runs in the browser with no backend. Creations are stored locally in IndexedDB.
- Live editor (CodeMirror 6) with themes, font sizes, Ctrl+Space suggestions that fit the program type, and search.
- Modes: auto-detect, dweet, js, html, three.js, shadertoy and littlejs. Dweet, three.js and Shadertoy code can run in a worker so an infinite loop cannot freeze the editor; html, js and littlejs run on the page.
- Fixed-step time at 60 steps per second, with pause, single-step and a seek slider.
- Library of creations with versions: Save, Fork, History, revert to the last saved version, recently deleted, and a gallery with search.
- Share links that contain the code, plus Dwitter-style compress and minify with character, line and byte counts.
- Capture to GIF (global palette, selectable dithering) or WebM, with size, length, fps, speed and aspect options, and a GIF preview with size warning.
- Custom image (drop on the canvas) available to dweets and as iChannel0 in Shadertoy; screenshot and fullscreen.
- Export and Import of the whole library as one JSON file, and import of .txt, .js and .html programs.
| Keys | Action |
|---|---|
| Alt+Up | Pause / resume |
| Alt+Down or Alt+Enter | Restart |
| Alt+Right | Single step |
| Ctrl+S | Save |
| Ctrl+Space | Suggestions for the program type: canvas members after x., globals, Shadertoy uniforms, LittleJS names |
| Ctrl+F | Search |
The library lives only in this browser (IndexedDB plus localStorage for settings). Clearing site data, using a private window or switching browsers or computers loses it. Use Export in the sidebar regularly and keep the file somewhere safe; Import restores it.
npm install
npm run dev # start the dev server at http://localhost:5173/CapJS/
npm test # unit tests (vitest)
npm run e2e # end-to-end tests (playwright, chromium)
npm run build # production build into dist/
npm run preview # serve the build at http://localhost:4173/CapJS/
Before running the e2e tests for the first time, install the browser with npx playwright install chromium.
One-time setup:
- Create a GitHub repository named
CapJSand push this project to it. - Go to Settings → Pages → Source and choose "GitHub Actions".
After that, every push to main or master builds and deploys the site via .github/workflows/deploy.yml. It can also be run by hand from the Actions tab (workflow_dispatch).
The base option in vite.config.js (/CapJS/) must match the repository name, or be changed to / when using a custom domain.
Copyright (C) 2019-2026 Frank Force
CapJS is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. See LICENSE for the full text.
CapJS bundles these open source libraries, each under its own MIT license: CodeMirror, three.js, LittleJS, gifenc, webm-muxer and acorn.