bragle.io

I like making stuff. I made this Linux thingy that runs in your browser. Try it out.

.linux-startup, .linux-controls { display: none !important; } main { --controls-height: 53px !important; } Linux needs JavaScript. Browse files to see the projects.

Starting Linux…

Browse files

/workspace

./

README.mdStart here

BRAGLE

I like making stuff. I made this Linux thingy that runs in your browser. Try it out.

It's Alpine Linux running in a WebAssembly VM. You can run Node.js,
install packages, edit files, or just poke around. The files here
are notes about my other projects and how they work.

websites/   Cloudier, Severity, Devina, Lytica, Codecanvas,
            Eventful, Flowy, Filedrop, Bundlebee, Colorhex
android/    Toolcat, Nap
projects/   Olive, Wisp, Monaco editors, Enclosure, pnpm-isolate
about.md    About me

Try: ls, cat projects/olive.md, or cat websites/devina.md
Type help for a few commands to try, including package installation.
Browse files works while Linux is loading, too.

about.mdLeo

LEO

I'm Leo. I make websites, Android apps, and a bunch of the libraries
and services behind them.

https://github.com/bragle

Visit Leo

websites/

cloudier.mdCloudier

CLOUDIER

SSH and SFTP in your browser. Open a shell, move files around,
or run saved commands on your servers.

The SSH connection lives on the server. A WebSocket carries terminal
input and output between that session and your browser. File
transfers use SFTP through the same backend.

https://cloudier.io/

Visit Cloudier

severity.mdSeverity

SEVERITY

Look up vulnerabilities and the software they affect.

Background jobs import public CVE records and CPE product data.
CVEs describe vulnerabilities, while CPEs identify the products and
versions they apply to. You can search through both.

https://severity.io/

Visit Severity

devina.mdDevina

DEVINA

A bunch of tools for domains, graphics, and code. DNS lookups,
format conversion, and other things that are handy to have in a tab.

Some media processing and format conversions run inside the browser
using WebAssembly. Code tools share an editor that renders before
the interactive editor has loaded. Getting its static diffs to
match the live ones took a lot of CSS and wrapping fixes.
See projects/monaco.md for those details.

https://devina.io/

Visit Devina

lytica.mdLytica

LYTICA

See who's visiting a website, whether it's up, and what's breaking.
It also tracks versions and errors reported by the browser.

The dashboard combines events reported by the browser with uptime
checks run in the background. Wisp collects browser characteristics
without relying on cookies or ETags. Those checks are meant to help
detect account theft and API abuse, not to target advertising.
See projects/wisp.md for how its JS/WASM bridge works.

https://lytica.io/

Visit Lytica

codecanvas.mdCodecanvas

CODECANVAS

Write and run code in the browser, on your own or with someone else.

Shared documents stay in sync as people type. Package tools, web
previews, and code execution sit alongside the editor so you can
try what you're working on. The editor also follows imports between
files for things like rename and references.

https://codecanvas.io/

Visit Codecanvas

eventful.mdEventful

EVENTFUL

Send events from your apps and services, then search or chart them.
Logs, errors, or whatever else you want to keep track of.

Incoming events are checked against your JSON schemas before
they're stored. You can filter the records with structured queries
and group repeated events together.

https://eventful.io/

Visit Eventful

flowy.mdFlowy

FLOWY

Boards and lists for keeping track of things you need to do.

The board and list are two views of the same tasks. You can drag
them around to reorder them and look back through their changes.

https://flowy.io/

Visit Flowy

filedrop.mdFiledrop

FILEDROP

Send files from one browser to another.

A signaling service helps the browsers find each other and set up
a WebRTC connection. The file data then goes through WebRTC data
channels.

https://filedrop.io/

Visit Filedrop

bundlebee.mdBundlebee

BUNDLEBEE

Poke around inside npm packages before adding them to a project.

You can browse source files, follow dependencies, and check bundle
sizes in the same place.

https://bundlebee.io/npm

Visit Bundlebee

colorhex.mdColorhex

COLORHEX

Look up colors, convert them, and find colors that go together.
There are color blindness previews and composition tools, too.

https://colorhex.io/

Visit Colorhex

android/

toolcat.mdToolcat

TOOLCAT

An Android toolbox for the sensors and radios in your phone.

- GPS speedometer, trip computer, compass, and mirrored HUD.
- Wi-Fi analyzer, Bluetooth scanner, and network discovery.
- Sound, light, magnetic field, and motion instruments.
- No ads, accounts, or analytics. Readings stay on your device.

Phones have different sensors, so each tool checks what hardware
is available. Readings feed the instruments and charts as they
arrive, and sensor listeners stop when they're no longer needed.

Still working on it.

nap.mdNap

NAP

Mix some rain, waves, or cat purring and leave it playing.

- Combine rain, ocean waves, cat purring, and other sounds.
- Set each sound's volume and save mixes as presets.
- Sleep timer with a gradual fade-out.
- Works offline and with the screen off. Android 8.0 and newer.

A separate playback service mixes bundled recordings and generated
noise. Volume changes and loop transitions fade smoothly. Playback
keeps going when the screen is off or the UI is closed.

Privacy policy: https://bragle.io/nap/privacy/

Still working on it.

projects/

olive.mdOlive

OLIVE

Linux in the browser, with a TypeScript API for files, processes,
PTYs, and connections to ports inside the guest.

The version used here runs Alpine Linux through v86, an x86 emulator
using WebAssembly. It runs in a Web Worker, with an agent inside
Linux handling commands and filesystem operations. The terminal
connects to a real Linux PTY, so pipes, history, Ctrl+C, and vi are
handled by the guest. On this site, output is acknowledged after
it's drawn, so a fast command can't keep flooding the page with
more output than the terminal can display.

Filesystem changes flow both ways. JavaScript can write a file into
the guest, and a file changed by a Linux process can be read back
through the same API. File watching keeps this site's file browser
in sync with edits made in the terminal.

Startup restores a compressed VM snapshot with the guest agent
already running. Base files load as they're needed. A separate cache
keeps the decoded files around after Linux closes them, so repeated
commands don't have to download and decode the same files again.
Guest edits stay separate from that cache. Restarting Linux on this
site restores the initial files, so changes last for one session.

Guest HTTP can go through the browser's Fetch API, so browser CORS
rules still apply. Even npm's diagnostic headers can trigger a CORS
preflight the registry doesn't support. This site strips those
headers from anonymous registry GETs. Package URLs use HTTP inside
the guest and HTTPS when Fetch makes the request outside it.
Arbitrary outbound TCP and guest-side HTTPS need a relay.

wisp.mdWisp

WISP

Wisp collects browser characteristics to help detect account theft,
stolen sessions, and API abuse. It's intended for security checks,
not advertising or ad targeting.

The idea came from seeing YouTube accounts getting stolen and
dealing with API abuse firsthand. A fingerprint provides extra
context about the client behind a session or request.

The core is Rust compiled to WebAssembly with no_std. It has custom
browser bindings, a JS/WASM bridge, a serializer, and an async
executor. The bridge and browser bindings don't use wasm-bindgen
or web-sys. Small external crates handle allocation and panics.

Rust packs arguments into WASM memory with small type tags. Strings
and arrays are passed as a pointer and length, while JavaScript
objects stay on the JS side and Rust refers to them by numeric
handles. A few shared imports register functions, invoke them,
read values, and release handles. The same call path serves lots
of different browser APIs.

Rust's Drop releases a handle when its wrapper goes out of scope.
For async calls, a JavaScript promise calls back into WASM and wakes
the waiting Rust future. The executor runs on the browser's event
loop, so it doesn't need a thread pool.

Keeping it small means checking what actually ends up in the binary.
The build can leave out individual fingerprint sources and compare
the compressed sizes to see what each one costs.

Private project. Still working on it.

monaco.mdMonaco editors

MONACO EDITORS

Code editor and diff components that do both
server-side rendering (SSR) and client-side rendering (CSR).

Monaco expects a browser, so the server renders static editor markup
with Shiki tokens and Monaco's own line-rendering code. That gives
you highlighted code, line numbers, and diffs in the initial HTML,
while the full editor loads in the browser.

The static view stays visible until the live editor is ready.
Both use the same syntax tokens. The layout has to match too.

Diffs needed a lot of CSS hacks. A changed range can cross syntax
tokens, wrapped lines, and newlines. Oversized border-image fills
extend the highlights to the edge of a line, with overflow clipped
at the code cell. box-decoration-break clones that fill across
wrapped fragments. Pseudo-elements paint the line background back
over areas where the highlight should stop.

Empty changes need a visible marker even though there's no text
to color. Side-by-side changes use a grid with spacer rows so the
two panes line up when one side has more lines or wraps further.
The static view also reserves room for Monaco's scrollbar.

The line-break computer also needed a rewrite. Monaco's layout code
rounds the available width down to whole character columns,
while CSS can fit text into the remaining fraction. The patch keeps
that fractional width so the live editor doesn't wrap early. DOM
measurement also needs to cope with a missing window or font sizes
that aren't usable yet, and clean up its temporary measurement node.

Even spaces need special handling. Monaco's renderer inserts
non-breaking spaces, which stop CSS from wrapping normally. Those
get converted back to ordinary spaces, while actual non-breaking
spaces in the source are protected with a temporary placeholder.

Private library.

enclosure.mdEnclosure

ENCLOSURE

A service for compiling and running short programs in isolated
Linux environments. Send it code, get back stdout, stderr, and an
exit status. Each job gets its own environment and resource limits.

The runtime packages build for both AMD64 (x86-64, including Intel)
and ARM64. CI uses a shared Debian builder image with separate
runners for each architecture, then publishes separate sets of
language packages. Each runtime recipe either builds from source
or picks the matching upstream binary, and runs its tests where
they're provided.

The fiddly part is getting those packages to work inside the sandbox
after moving them away from the build machine. A compiler needs more
than its executable: shared libraries, the right dynamic loader,
and sometimes startup object files and a sysroot.

The packager gathers shared-library dependencies and patches RPATHs
to use a relative lib directory. The Rust recipe also bundles a C
toolchain and sysroot so the linker can find the target's libraries
and startup files. Upstream architecture names differ too: amd64,
x86_64, arm64, and aarch64 need to map to the right downloads and
library paths. Both architectures go through the packaging steps.

Private project.

pnpm-isolate.mdpnpm-isolate

PNPM-ISOLATE

Pull one package and the workspace dependencies it needs out of
a pnpm monorepo, ready for a deployment or Docker build.

It follows the workspace dependency graph and trims the workspace
definition and lockfile to that set of packages, using pnpm's
existing workspace and lockfile formats.

https://github.com/bragle/pnpm-isolate

Visit pnpm-isolate