Skip to content
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
Cannot retrieve contributors at this time

8. PSCi in the Browser

Did you know that PSCi, the PureScript interactive mode, not only supports evaluation of the compiled JavaScript using Node (its default option), but also in the browser?

This can be really useful for interactively testing APIs which are only available in the browser: the document object model, SVG, canvas graphics and WebGL, web audio, and so on.

To try this out, simply append the --port option when starting psci:

$ pulp psci -- --port 8080

PSCi, version 0.10.2
Type :? for help

Bundling Javascript...
Serving http://localhost:8080/. Waiting for connections...

At this point, PSCi has pre-compiled all dependencies and created a web server which will listen for connections and serve the necessary resources. To connect, simply navigate to the URL provided in your browser. In the browser console, you should see the message "Connected".

Back in PSCi, you should be able to evaluate expressions as usual:

> 2 + 2
> log "Hello"

but now, the evaluation is happening inside the browser window!

Let's see how to use a browser-specific API. If we use Bower to install purescript-dom, then we can run methods on the window object, like alert (but remember to restart PSCi and reload the browser window):

> import Prelude
> import DOM.HTML
> import DOM.HTML.Window
> window >>= alert "Hello from PSCi!"

You should see an alert in the browser window, followed by the return value unit in PSCi.

We can even receive data from the browser, for example by prompting the user to enter some input:

> window >>= prompt "Enter a string:"
(Just "I typed this")

You can experiment with the other methods defined on the window object too.

PSCi in the browser can also be a great way to build interactive applications and to get immediate feedback. For example, here is an experiment I did with interactive canvas graphics in PSCi (click to view the video on Youtube):

PSCi in the Browser

And here is the code for anyone who is interested.

Try it out! This new feature hasn't been used very much yet, but we should find out which web APIs are a good fit for this style of programming in PSCi.