It's a read-only "IDE" of sorts; it's effectively a disk image stored in the cloud, which when run will create a VM and send the output back to you. If you create an account, you can fork that repl to create your own editable version of it, and access the full IDE.

Yes, but, to quote Paul Buchheit, how does it *actually* work? What is the non-handwave-y explanation?

> "IDE" of sorts...*effectively* a disk image...a VM (what kind?)

If you want a fuller explanation, I'll just ramble about some random bits. Replit will let you create an account, with which you can create "repls": on their own, they are the "disk images" I mentioned; they store files and a few other bits on Replit's servers. You can open this repl if you own it, and edit it in the in-browser (Monaco-based) IDE. Because you own it, Replit will spin up a VM on its servers to handle your session. Your changes sync in real-time with the permanent files in the repl, as well as the live (and ephemeral) filesystem of the VM. All of this happens over the WebSocket-based protocol I mentioned. What you're seeing with this post's link is a repl owned by someone else; in such a case, you see the "Spotlight View", which is read-only. You can fork it to create your own copy of the repl, which you can edit. The list of files is a read-only view of the repl's files. When you run it, it'll spin up a VM similarly to how it does for you with the IDE. The VM I've been mentioning is a restricted Docker container running on some GCP container instances, managed by Replit. It runs Ubuntu 20.04 LTS (I think) if that's what you want to know. The desktop you see when you run this post's link is a VNC connection to a Fluxbox desktop on the VM. The console is sent from the VM to your browser (again, all of this is over that WebSocket protocol) and rendered by xterm.js. Overall it's a bit of a messy system, and there's quite a few other things not mentioned; they'll occasionally talk about this on the blog (https://blog.replit.com/). If you want something more specific explaining, I'll probably do a better job at that.

I think the OP is looking for an explanation that would allow him to know the behavior of the program if he edited the code.

1. The option menu on the outer emulator window (File, Edit, Snapshot, Settings) is some kind of retro operation system (not the inner x64, and not ubuntu). What is it? Is the code I'm writing being executed in this operating system?

2. What VNC program is running a retro operating system in a docker container and why is it so slow?

3. What is the VNC client (security!) and what can I, as a developer, do when things like the VNC client dimensions go wrong, as they do in this example?

The problem with developing on a closed-source code-running platform is that in the end, there will be an error at a layer of abstraction you don't have access to. You've done an excellent job of piecing it together from the blog posts and "?debug=1" hack, but they need to make your job easier.

1. It is an emulator program that has nothing to do with Replit, it is just being run on Replit.

2. To repeat, the VNC program is not running the retro OS, that is the emulator. The emulator is a program which runs on Linux and opens a window to show you the emulated computer's screen. That program is being run on Replit, and you can see the screen because it is being connected to you via VNC. I can't answer for why it's slow; that could be the repl, the VNC connection or the emulator itself.

3. The VNC client is no-vnc (I think) and is encrypted. If there's a bug with it, report it to Replit.

The whole point of Replit is to abstract all of this; at the end of the day it just gives you a browser interface to a VM in the cloud, with a filesystem you can save to between sessions. You just interact with it as you would any other Linux system, as all of these layers of abstraction you don't have access to are just providing this simple interface. You don't even interact with anything outside, so there is absolutely no point in using it when developing anything other than for the Replit system itself.

The problem is that there will always be bugs, and you can't abstract away details unless you provide a clear and consistent interface. Replit neither provides an exact spec for how their system works, nor open-sources their codebase to let developers read how it works. There will be cases when it's impossible to know, "is this is a bug?" That's the definition of undefined behavior.

Does it even run locally via WASM? It feels a bit too slow for that.

Here's an alternative though that's a bit closer to an "IDE experience":

https://8bitworkshop.com/v3.8.0/?platform=c64&file=hello.das...

Similarly confused. This seems to be running on a remote box, but:

(1) How is the information is getting to the frontend?

(2) How is it being rendered when it gets there?

(3) What is being run on the box?

1. The information gets from the VM to you through a custom WebSocket protocol called Goval (you can see the JS client at https://github.com/replit/crosis). It can do editing, console I/O, VNC, configuration of the image, etc.

2. The console is rendered with xterm.js, the desktop is a VNC client.

3. Not sure what you mean

1. Yes, but, what is actually happening on the box?

2. I doubt this is xterm.js. The font and text to not appear to be aligned columns/rows like an xterm session. (Compare the outer emulator font sizing and the inner x64 font sizing.)

3. The croisis protocol says, "x protobuf for vague 1-sentence description", but this does not actually specify the behavior of the backend--and you can't read the source.

1. I'm assuming by "the box" you mean the VM. It gets started for you when you run the repl as a user who does not own it, and it will run a command specified in a configuration file (see https://docs.replit.com/programming-ide/configuring-run-butt...) and send you the output, as well as let you provide input. It will also detect the run program doing things such as starting to listen on ports (which will be forwarded to a public URL (only under certain circumstances (this is a bit confusing and a bit broken (I don't fully understand it)))) or opening X sessions, in which case it will start the VNC connection to your client. Other than that, it's fairly simple; just think of it as a VM running in the cloud, connected to you, and running a program specified by the creator.

2. I'm almost 100% sure that it's xterm.js, though to be clear I say that it is used to render the console that you briefly see whilst it is compiling. The desktop - which is how you are seeing the emulator window - is provided by a VNC client.

3. Replit is largely closed-source, unfortunately. The protocol is just the way in which the Replit IDE and client communicate with the VMs on the backend. I've summarised some of the behaviour of the backend in my other comment, most of which is known through messages or posts from their engineers. By that summary, it means that the protocol is Protobuf-based. If you want to see a sample of the stuff it sends to the server, you can open a repl you own, append `?debug=1` to the end of the URL, and click the alien logo on the left.

2. Ok, it's not xterm. What is the VNC server/client? I don't see on in the code. When you use replit, what will cause it to trigger a magic VNC client? What if I want to try a different VNC server to speed it up? When will the VNC close...there's a lot of magic that I as a developer can't really work with and doesn't seem to be documented.

AFAICT, this demo is equivalent to, "someone ran VICE in a VNC". I think that's the OP's point.

It isn't even clear what VNC (or what its performance profile is).

It's "magic", yes. Replit is not for you to mess around with the VNC or anything, that directly defeats its purpose. Replit is not a framework for building a Replit-like system. Replit is effectively just a way for you to save and interact with VMs in the cloud from your browser.

The whole point of this demo is "someone ran VICE on Replit". The VNC is completely besides the point.

1. it is xterm, xterm.js to be sepcific 2. uses no-vnc. if you own the repl theres a way to set the vnc server password and access from your own client, but i forget how. probably on the replit docs/blog

I think the x64 isn't xterm. It's not clear what the client is (or what errors if throws if it breaks).

Again, let me stress this: xterm.js is providing the console only. Any visual things, including the x64 window, are provided by the VNC connection, which is completely independent of the xterm console.

Exactly, it's not clear what VNC is being used.

Same. It is very slow, and I can't figure out how to do anyhting useful.