SqueakJS

Fork me on GitHub
SqueakJS is an HTML5 runtime engine for Squeak Smalltalk written in pure JavaScript by Vanessa Freudenberg. See the SqueakJS Project page for more information.

Run Squeak images from your local machine

Use drag-and-drop to run a Squeak image from your machine: drop the image (perhaps together with a changes and sources file) into this page.
All images and related files are stored persistently in a database inside your browser. The box below shows the files that are currently in your database. Inside Squeak, you can use a FileList to manage them.
Drop Squeak images and other files here, or
Clicking on a name in the box will export that file to your browser's downloads folder.

Run Squeak images from the internet

Construct a URL linking to this page and pass the image and options. Beware that the server needs to allow script access via CORS.
Here are a few examples: On the first run these will be stored locally. Subsequent starts are much faster since there is no download.

Run SqueakJS apps

SqueakJS can be used to run Squeak apps. Here are some examples. Note how they differ when you resize the browser window—Etoys is scaled, whereas Scratch is resized. The apps are configured to use template files (e.g. example projects and artwork) that are loaded from a server on demand. On some mobile devices you can save these apps to the home screen, and run them like a real app.

Use SqueakJS on your own website

Instead of passing options by URL to this page, you can download SqueakJS from GitHub and use it on your own website like this: 
        <html>
            <head>
                <script src="squeak.js"></script>
                <script>
                    window.onload = function() {
                        SqueakJS.runSqueak("my.image", sqCanvas, { /*put options here*/ });
                    }
                </script>
            </head>
            <body>
                <canvas id="sqCanvas"></canvas>
            </body>
        </html>
Options include display resolution, template file URLs, etc. For example usage take a look at the demo pages included in the GitHub repo: Etoys (source) or Scratch (source)

Modify SqueakJS

I am developing SqueakJS using “Lively”, a browser-based development environment for JavaScript inspired by Smalltalk. Instead of having to constantly reload the page after every source code change, I am executing Squeak in my Lively SqueakJS Debugger and can change its code while it is running. That's why the SqueakJS source code has a somewhat unusual layout, it fits the Lively way of developing. You can still use a plain text editor if you feel that's simpler.

Contribute to SqueakJS

SqueakJS is free software (MIT license). You're very welcome to discuss, report bugs, and contribute code.

Have fun! — Vanessa Freudenberg