Modules
Web modules
One HTML file in a sandboxed iframe.
blockodile loads entry as a string and shows it in a sandboxed iframe (sandbox="allow-scripts").
Rules that follow from that:
- One file. Inline your CSS and JS. Bundlers can do this for you: Vite with
vite-plugin-singlefile, oresbuild --bundlepiped into a<script>tag. - Any language that ends up as JavaScript: TypeScript, React, Svelte, Vue, plain JS.
- No relative files.
<img src="logo.png">will not load; use data URLs or inline SVG. - Network requests work as in any web page.
- Talk to blockodile through
window.blockodile: files, shell, current folder.
Inlining a library by script?
Never use it as a String.replace() replacement. JS interprets $&, $1, $` in the
replacement string, so every "cm-$&" in the bundle silently becomes "cm-<script>".
Concatenate, or pass a function: html.replace("<script>", () => bundle). Inline the library's
CSS too.
{ "id": "hello", "name": "Hello (web example)", "kind": "web", "entry": "index.html", "w": 4, "h": 2 }Look native
The app is black (#0a0a0a) with a phosphor green accent (#b6ff3b) and a mono font.
blockodile.theme gives you the exact tokens. A module that uses them looks native.
Examples that ship
- files: fuzzy file finder + CodeMirror editor, new-file creation with
fs.writesave. About 120 lines of module code plus the inlined CodeMirror bundle. - gitdiff: one collapsible block per changed file with +n/-n, modes Unstaged / Staged / Last commit / History, plus This turn: the files the agent touched since it last started working.
Copy one to start.