An implementation of SCXML in JavaScript.

SCION 2.0 is a lightweight SCXML-to-JavaScript compiler that targets the SCION-CORE Statecharts interpreter. It currently supports node.js and the browser, and will later support Rhino and other JavaScript environments.


SCION 2.0 provides an implementation of the W3C SCXML draft specification in JavaScript. SCXML provides a declarative markup for Statecharts, a powerful modelling language for developing complex, timed, event-driven, state-based systems, and can offer elegant solutions to many problems faced in development of JavaScript-based applications across various domains. In the browser, SCXML can be used to facilitate the development of rich, web-based user interfaces with complex behavioural requirements. On the server, SCXML can be used to manage asynchronous control flow.


In node.js, install SCION 2.0 via npm:

npm install scxml

In the browser, add the following script tags to your web page:

<script src=""></script>
<script src=""></script>
<script type="text/javascript" src=""></script>

Note that SCION 2.0 assumes the presence of jQuery to handle cross-browser XMLHTTPRequest, however an alternative Ajax library could instead be used. This is set up in the following way:

    //perform this setup once, before SCION is used 
    scxml.ext.platformModule.platform.ajax = {
        get : function(url,successCallback,dataType){
            //call your preferred Ajax library here to do HTTP GET 
            //if dataType is 'xml', the Ajax response must be parsed as DOM 
        post : function(urldatasuccessCallbackdataType){
            //call your preferred Ajax library here to do HTTP POST 

Support is currently being added for Rhino.


SCION 2.0 uses SCION-CORE as its Statecharts engine. SCION 2.0 first compiles the SCXML document to a JavaScript object model. The "model" is then used to instantiate a SCION Statecharts interpreter.

Here is an example of a typical usage:

        if(err) throw err;
        //you can inspect the generated code if you like using JavaScript's Function.prototype.toString 
        //instantiate the interpreter 
        var statechart1 = new scxml.scion.Statechart(model);
        //you can instantiate a second interpreter using the same model 
        var statechart2 = new scxml.scion.Statechart(model);
        //start the interpreter 
        var initialConfiguration = statechart1.start();
        //send events 
        statechart1.gen({name : 'foo', data : 'bar'});

In node, you can also use require.

var model = require('./path/to/foo.scxml');

Note that this will only work if the SCXML <script> tags contain local filesystem paths, and not references to 'http:' URIs. The reason for this is that node's require() is a synchronous API, but requesting resources across a network must be done asynchronously.

SCION allows you to instantiate SCXML interpreters from SCXML "model" objects, which are SCXML documents that have been processed for easier interpretation. These methods allow you to create an SCXML model from an XML DOM document, document string, or url/path to document.

The SCXML constructor creates an interpreter instance from a model object.

statechart.start starts the SCXML interpreter. statechart.start should only be called once, and should be called before statechart.gen is called for the first time.

Returns a "basic configuration", which is an Array of strings representing the ids all of the basic states the interpreter is in after the call to statechart.start completes.

An SCXML interpreter takes SCXML events as input, where an SCXML event is an object with "name" and "data" properties. These can be passed to method gen as two positional arguments, or as a single object.

statechart.gen returns a "basic configuration", which is an Array of strings representing the ids all of the basic states the interpreter is in after the call to statechart.gen completes.

    var statechart = new scxml.scion.Statechart(model),
    var data = {foo:1};
    var configuration = statechart.gen("eventName",data); 
    //the following call is equivalent 
    var configuration = statechart.gen({name:"eventName",data:{foo:1}}); 

An SCXML interpreter has three forms of output:

  1. Notify listeners of state changes.
  2. Script JavaScript object references passed into the SCXML interpreter as event data. This technique is used to script the div DOM node in the drag-and-drop example above.
  3. Use SCXML <send> element to send SCXML events to web services. Right now, the <send> tag is not supported by SCION out of the box. This should be better supported by next release.

Registers a callback to receive notification of state changes, as described above.

Each onEntry, onExit and onTransition callback is optional - if the property is not present, it will be ignored.

Furthermore, for the onTransition callback, argument targetStateIds will be null for targetless transitions, rather than, e.g. an empty array.


Mailing list