diff --git a/docs/api/index.md b/docs/api/index.md
index ec3fbfd..ec13ce2 100644
--- a/docs/api/index.md
+++ b/docs/api/index.md
@@ -310,7 +310,7 @@ The right one determines whether the result of the left one should be output or
 
 ---
 
-#### CSS expressions `class="{'urgent':msg.urgency, msg.category}"` or compound expressions
+#### CSS expressions `class="{msg.category} {{'urgent':msg.urgency}}"` or compound expressions
 
 You can combine several expressions into one expression statement using the comma; note that there is only one pair of braces which is for the compound expression, subexpressions being delimited by commas.
 
@@ -319,7 +319,7 @@ The results of the expressions will be concatenated with a single white space be
 Because of the space which always gets _inserted between the expressions_, it does not suit all use cases. However, this is perfect to define the `class` attribute of a HTML element for instance.
 
 ```cs
-<div class="{'urgent':msg.urgency, msg.category}"></div>
+<div class="{msg.category} {{'urgent':msg.urgency}}"></div>
 ```
 
 ## Modifiers
diff --git a/docs/index.md b/docs/index.md
index 33b225d..a328681 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -21,7 +21,7 @@ Hashspace turns static HTML pages into dynamic templates with the help of a few
 {if tasklist.length > 0}
   <ul>
   {foreach task in tasklist}
-    <li class="{'done': task.completed, 'ongoing': !task.completed}">
+    <li class="{{'done': task.completed, 'ongoing': !task.completed}}">
       {task.description}
     </li>
   {/foreach}
diff --git a/docs/playground/layout.hsp b/docs/playground/layout.hsp
index b966395..7388dc1 100644
--- a/docs/playground/layout.hsp
+++ b/docs/playground/layout.hsp
@@ -46,7 +46,7 @@ var DescriptionCtrl = Class({
 {export template mainLayout(data, playground)}
     <#sampleList data="{data}" playground="{playground}"/>
 
-    <div class="{'hsp-sample', 'hsp-sample-full': data.navCollapsed}" onclick="{hideNavHover(event, data)}">
+    <div class="hsp-sample {{'hsp-sample-full': data.navCollapsed}}" onclick="{hideNavHover(event, data)}">
         <!--div class="actions">
             <a href="" title="Toggle code panel"><span class="icon icon-code icon-active"></span></a>
             <a href="" title="Toggle description panel"><span class="icon icon-preview icon-active"></span></a>
@@ -102,7 +102,7 @@ function hideNavHover(event, data) {
 }
 
 {template sampleList(data, playground)}
-    <div class="{'samples-list', 'samples-list-collapsed': data.navCollapsed}"
+    <div class="samples-list {{'samples-list-collapsed': data.navCollapsed}}"
         onclick="{hideNavHover(event, data)}">
 
         <a href="" class="collapse" title="{data.navCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}" onclick="{collapseNav(event, data, playground)}"><span class="icon"></span></a>
@@ -120,7 +120,7 @@ function hideNavHover(event, data) {
                 {if sample.category}
                     <div class="category">{sample.category}</div>
                 {else}
-                    <div class="{'item', 'selected': data.sampleIndex === index}">
+                    <div class="item {{'selected': data.sampleIndex === index}}">
                         <a href="{'#' + sample.folder}">{sample.title}</a>
                     </div>
                 {/if}
diff --git a/docs/playground/splitter.hsp b/docs/playground/splitter.hsp
index 260b8ef..7f9b0e4 100644
--- a/docs/playground/splitter.hsp
+++ b/docs/playground/splitter.hsp
@@ -75,7 +75,7 @@ var SplitterCtrl = Class({
 
 {template splitter using controller:SplitterCtrl}
     <div class="splitter" onmousedown="{controller.onMouseDown(event)}"></div>
-    <div class="{'splitter-proxy', 'splitter-proxy-hidden': !controller.active}"></div>
+    <div class="splitter-proxy {{'splitter-proxy-hidden': !controller.active}}"></div>
 {/template}
 
 module.exports = splitter;
diff --git a/docs/samples/clock/clock.hsp b/docs/samples/clock/clock.hsp
index 7946cca..bc83ab3 100644
--- a/docs/samples/clock/clock.hsp
+++ b/docs/samples/clock/clock.hsp
@@ -51,7 +51,7 @@ var ClockController=klass({
 		    // minute markers
         	{foreach idx,m in c.minuteMarkers}
         		// {foreach i in [1..60]} should be supported in a future version
-          		<line class="{'major':m.major,'minor':!m.major}" y1="{m.major?35:42}"
+          		<line class="{{'major':m.major,'minor':!m.major}}" y1="{m.major?35:42}"
           		y2="45" transform="rotate({360*idx/c.minuteMarkers.length})"/>
         	{/foreach}
 		    // hour hand
diff --git a/docs/samples/component2/nbrfield.hsp b/docs/samples/component2/nbrfield.hsp
index 60af305..7c57206 100644
--- a/docs/samples/component2/nbrfield.hsp
+++ b/docs/samples/component2/nbrfield.hsp
@@ -73,7 +73,7 @@ function getNumber(s) {
 {export template nbrfield using c:NbrField}
   <span class="nbrfield">
     <input type="text" model="{c.internalValue}"
-    class="{'nbrfield', 'error': !c.isValid}"/>
+    class="nbrfield {{'error': !c.isValid}}"/>
     <button onclick="{c.resetField()}">reset</button>
   </span>
 {/template}
diff --git a/docs/samples/component3/pagination.hsp b/docs/samples/component3/pagination.hsp
index 915d50d..ec18574 100644
--- a/docs/samples/component3/pagination.hsp
+++ b/docs/samples/component3/pagination.hsp
@@ -45,15 +45,15 @@ var Pagination=klass({
 
 {template pagination using p:Pagination}
     <ul class="pagination">
-        <li class="{'disabled':p.activepage===0}">
+        <li class="{{'disabled':p.activepage===0}}">
             <a href="javascript:void(0)" onclick="{p.selectPage(p.activepage-1)}">Previous</a>
         </li>
         {foreach page in p.pages}
-            <li class="{'active':page==p.activepage}">
+            <li class="{{'active':page==p.activepage}}">
                 <a href="javascript:void(0)" onclick="{p.selectPage(page)}">{page + 1}</a>
             </li>
         {/foreach}
-        <li class="{'disabled':p.activepage>=p.noOfPages-1}">
+        <li class="{{'disabled':p.activepage>=p.noOfPages-1}}">
             <a href="javascript:void(0)" onclick="{p.selectPage(p.activepage+1)}">Next</a>
         </li>
     </ul>
diff --git a/docs/samples/cssclass/cssclass.hsp b/docs/samples/cssclass/cssclass.hsp
index 5ba17e0..505fb2c 100644
--- a/docs/samples/cssclass/cssclass.hsp
+++ b/docs/samples/cssclass/cssclass.hsp
@@ -4,11 +4,11 @@
         <a href="javascript:void(0)" onclick="{toggleUrgency()}">Change Urgency</a> -
         <a href="javascript:void(0)" onclick="{setCategory('personal')}">Set "Personal"</a> -
         <a href="javascript:void(0)" onclick="{setCategory('professional')}">Set "Professional"</a>
-        <div class="{'msg', 'urgent':msg.urgency, msg.category}">
+        <div class="msg {msg.category} {{'urgent':msg.urgency}}">
             Message: {msg.text}
         </div>
         <div class="note">
-            Class value: "{'msg', 'urgent':msg.urgency, msg.category}"
+            Class value: "msg {msg.category} {msg.urgency ? 'urgent' : ''}"
         </div>
     </div>
 {/template}
diff --git a/docs/samples/cssclass/description.md b/docs/samples/cssclass/description.md
index 2c841a3..4f82319 100644
--- a/docs/samples/cssclass/description.md
+++ b/docs/samples/cssclass/description.md
@@ -3,12 +3,13 @@ This sample shows a special type of expression that is particularly convenient f
 
 [#output]
 
-As you can see in the example, this expression is structured as a comma-separated list of sub-expressions that can have the following forms:
-
-+ either a **Hashspace expression** - a subset of the JavaScript expression syntax, such as
- - a string - e.g. *"urgent"* - in this case this will be considered as a mandatory class element
- - a path resolving to a string - e.g. *msg.category* to use dynamic class elements
- - a more complex expression - e.g. *'type'+msg.urgency* to build a more dynamic class element
-+ or a **pair of Hashspace expressions** separated by a colon - e.g. *'urgent' : msg.urgency===1*
- - the first expression will be resolved as the class element that should be inserted (e.g. *'urgent'*)
- - whereas the second expression should resolve to a boolean to tell if the class element should be inserted or not (e.g. *msg.urgency===1*)
+As you can see in the example, you can combine static values and expressions inside the "class" attribute.
+If an expression is used it can evaluate to either:
+
++ a string - e.g. *msg.category* - in this case it will be interpreted as class names to add
++ an object - e.g. *{'urgent' : msg.urgency===1}*
+ - each key in an object is interpreted as a class name that should be inserted (e.g. *'urgent'*)
+ - whereas the expression in the value part should resolve to a boolean to tell if the class element should be
+ inserted or not (e.g. *msg.urgency===1*)
+
+You can use more complex expression - e.g. *'type'+msg.urgency* to build a more dynamic class element.
\ No newline at end of file
diff --git a/docs/samples/list2/list.hsp b/docs/samples/list2/list.hsp
index e0a25d5..e3b35e0 100644
--- a/docs/samples/list2/list.hsp
+++ b/docs/samples/list2/list.hsp
@@ -49,7 +49,7 @@ var ListCtrl = klass({
         {foreach idx,itm in lc.content}
           {if itm.tagName==="@option"}
             <li class="opt" onclick="{lc.select(itm.value)}">
-              <span class="{'item','highlight':itm.selected}"><#itm.label/></span>
+              <span class="item {{'highlight':itm.selected}}"><#itm.label/></span>
             </li>
           {else if itm.tagName==="@separator" &&  !itm_isfirst && !itm_islast}
             <hr/>
diff --git a/docs/samples/simplelist/simplelist.hsp b/docs/samples/simplelist/simplelist.hsp
index 69172d9..4aa9f06 100644
--- a/docs/samples/simplelist/simplelist.hsp
+++ b/docs/samples/simplelist/simplelist.hsp
@@ -2,7 +2,7 @@
     <div class="msg">Click on a person to see more details:</div>
     <ul class="noTextSelection">
     {foreach p in d.people}
-        <li class="{'details':p.showdetails, 'special':p.name==='Bart'}"
+        <li class="{{'details':p.showdetails, 'special':p.name==='Bart'}}"
             onclick="{toggleDetails(p)}">
             {p.name}
             {if p.showdetails}: {p.age} years old{/if}
diff --git a/hsp/compiler/parser/hspblocks.pegjs b/hsp/compiler/parser/hspblocks.pegjs
index 83e1c04..af758dd 100644
--- a/hsp/compiler/parser/hspblocks.pegjs
+++ b/hsp/compiler/parser/hspblocks.pegjs
@@ -209,7 +209,7 @@ HTMLAttribute
   }
 
 HTMLAttributeValue
-  = (HTMLAttributeText / ExpressionBlock)*
+  = (HTMLAttributeText / ExpressionTextBlock)*
 
 HTMLAttributeText
   = chars:HTMLAttributeChar+
diff --git a/hsp/compiler/treebuilder/hExpression.js b/hsp/compiler/treebuilder/hExpression.js
deleted file mode 100644
index 3cc0733..0000000
--- a/hsp/compiler/treebuilder/hExpression.js
+++ /dev/null
@@ -1,415 +0,0 @@
-var klass = require("../../klass");
-var HExpression = klass({
-    /**
-     * Process the HExpression node parsed by the PEG grammar to generate a more digestable format for the syntax tree
-     * (note:processing is mostly for the JSExpression parts)
-     * @param {JSON} node the node generated by the PEG Grammar (cf. HExpression)
-     * @param {SyntaxTree} globalSyntaxTree the parent syntax tree
-     */
-    $constructor : function (node, globalSyntaxTree) {
-        this.rootExpression = node;
-        this.errors = null;
-        this.globalSyntaxTree = globalSyntaxTree;
-        if (node.expType) {
-            node.type = node.expType;
-        }
-
-        if (node.category !== "jsexpression") {
-            // we only reprocess jsexpression
-            this.syntaxTree = node;
-        } else {
-            if (node.pipes) {
-                node=this._transformPipesIntoFnCalls(node);
-                node.type=node.expType;
-            }
-            this._objectRefs = []; // list of objectref expressions found in the jsexpression
-            var code = this._process(node), oref=this._objectRefs;
-            this.rootExpression.code = code;
-            this.syntaxTree = {
-                type : "expression",
-                category : "jsexpression",
-                objectrefs : oref,
-                code : code
-            };
-
-            // if we have only one variable, we can simplify the syntaxtree
-            if (code === "a0") {
-                this.syntaxTree = oref[0];
-            } else if (code.match(/^a\d+$/) && oref && oref[oref.length-1].category==="dynref") {
-                // this is a dynamic object path
-
-                this.syntaxTree = oref[oref.length-1];
-                oref.pop();
-                this.syntaxTree.objectrefs = oref;
-            } else if (code.match(/^ *$/)) {
-                // there is no code to display
-                this.syntaxTree = {
-                    "type" : "text",
-                    "value" : code
-                };
-            }
-
-            // add line / column nbr if present
-            if (node.line) {
-                this.syntaxTree.line = node.line;
-                this.syntaxTree.column = node.column;
-            }
-
-            // check errors
-            if (this.errors) {
-                for (var i = 0; i < this.errors.length; i++) {
-                    globalSyntaxTree._logError(this.errors[i], this.rootExpression);
-                }
-            }
-        }
-    },
-    /**
-     * Return the syntax tree node to put in the global syntax tree
-     */
-    getSyntaxTree : function () {
-        return this.syntaxTree;
-    },
-
-    /**
-     * Log an error on the syntax tree associated to this expression
-     */
-    _logError : function (msg) {
-        if (!this.errors) {
-            this.errors = [];
-        }
-        this.errors.push(msg);
-    },
-
-    /**
-     * Internal recursive method to process a node
-     * @param {JSON} node the expression node to be processed
-     * @return {String} the JS code associated to this node - e.g. "((a0 + 2) + \"a\")"
-     */
-    _process : function (node) {
-        var result = "";
-        switch (node.type) {
-            case "expression" : // root node - we have to look at node.category
-                result = this._getValue(node);
-                break;
-            case "BinaryExpression" : // e.g. a + b
-                result = '(' + this._process(node.left) + ' ' + node.operator + ' ' + this._process(node.right) + ')';
-                break;
-            case "UnaryExpression" : // e.g. !x +x -x typeof x. Note that ++x and --x will not be supported
-                result = '' + node.operator + '(' + this._process(node.expression) + ')';
-                if (node.operator === '++' || node.operator === '--') {
-                    this._logError('Unary operator ' + node.operator + ' is not allowed');
-                }
-                break;
-            case "PostfixExpression" : // e.g. x++ or x-- (not allowed)
-                result = '' + '(' + this._process(node.expression) + ')' + node.operator;
-                this._logError('Postfix operator ' + node.operator + ' is not allowed');
-                break;
-            case "Variable" :
-                // return an argument name (e.g. "a0") through _getValue
-                result = this._getValue({
-                    type : "expression",
-                    "category" : "objectref",
-                    bound : node.bound,
-                    "path" : [node.name]
-                });
-                break;
-            case "PropertyAccess" :
-                // we fall in this category when we have sth like xxx.prop or xxx[yyy] where xxx and yyy are expressions
-                // in this case 'xxx' corresponds to the 'base' property of the parsed tree and 'yyy' corresponds to the 'name'
-                // e.g "a.b", "a.b['c'].d" or "a.b(foo)[blah]"
-
-                // as square-bracket access may contain sub-expressions we have to
-                // 1. split the expression in a list of objectrefs / expressions
-                //      e.g. for a.b[1+2][2+3].c.d we should have "a.b", "1+2", "2+3", "c", "d"
-                // 2. if there is only one chunk, create an objectref
-                // 3. otherwise create a dynref with sub-expressions (the 1st one being an objectref cf. a.b in previous example)
-
-                var n = node, path = [], name, dynref=false;
-                // determine if we are in an objectref or dynref use case:
-                while (n) {
-                    name = n.name;
-                    if (name.type) {
-                        // for person.name -> "name": "name"
-                        // for person["name"] -> "name": { "type": "Variable","name": "property","code": "property" }
-                        // for person["a"+123] -> "name": {"type": "BinaryExpression", "operator": "+", ...}
-
-                        if (name.type === "expression") {
-                            // in this case name is a simple type like number or string:
-                            // { type: 'expression', category: 'number', value: 2, code: '2' }
-                            path.push(name.value);
-                        } else {
-                            // name is a complex expression - so we will have to create a dynref instead of objectref
-                            dynref=true;
-                            break;
-                        }
-                    } else {
-                        path.push(name);
-                    }
-                    n = n.base;
-                }
-
-                if (!dynref) {
-                    // std objectref - e.g. "a.b.c"
-                    path.reverse();
-                    // _getValue will return an argument nbr - e.g. "a1"
-                    result = this._getValue({
-                        type : "expression",
-                        "category" : "objectref",
-                        bound : node.bound,
-                        "path" : path
-                    });
-                } else {
-
-                    // dynref: path contains expressions - e.g. a.b[foo][1+2]
-                    var exprs=[]; // list of expressions that compose the path
-                    n=node;
-                    while (n) {
-                        name = n.name;
-                        if (!name.type) {
-                            // name is a string
-                            name={ type: 'expression', category: 'string', value: name, code: name };
-                        }
-                        exprs.push(name);
-                        n = n.base;
-                    }
-                    exprs.reverse();
-
-                    // the first string expressions should be gathered as an objectref
-                    var p1=[], e;
-                    for (var i=0;exprs.length>i;i++) {
-                        e=exprs[i];
-                        if (e.type==='expression' && e.category === 'string') {
-                            p1.push(e.value);
-                            i--;
-                            exprs.shift();
-                        } else {
-                            break;
-                        }
-                    }
-
-                    // add objectref as first element
-                    if (!p1.length) {
-                        this._logError('Invalid dynamic data reference!');
-                    } else {
-                        exprs.splice(0,0,{
-                            type : "expression",
-                            "category" : "objectref",
-                            bound : node.bound,
-                            "path" : p1
-                        });
-                    }
-
-                    // convert all expressions
-                    var fragments=[];
-                    if (exprs) {
-                        for (var i=0;exprs.length>i;i++) {
-                            fragments.push(this._process(exprs[i])); // this can be "a1" or "(1+a3)"
-                        }
-                    }
-
-                    // _getValue will return an argument nbr - e.g. "a1"
-                    result = this._getValue({
-                        type : "expression",
-                        "category" : "dynref",
-                        "codefragments" : fragments
-                    });
-                }
-                break;
-            case "ConditionalExpression" :
-                result = '(' + this._process(node.condition) + '? ' + this._process(node.trueExpression) + ' : '
-                        + this._process(node.falseExpression) + ')';
-                break;
-            case "NewExpression":
-                var constr=this._process(node.callee), args=[];
-                if (node.arguments) {
-                    for (var i=0;node.arguments.length>i;i++) {
-                        args.push(this._process(node.arguments[i]));
-                    }
-                }
-                result = 'new ' + constr + '(' + args.join(',') + ')';
-                break;
-            case "FunctionCall" :
-                // this is an object ref
-                var n = node.name, path = [];
-                while (n) {
-                    path.push(n.name);
-                    n = n.base;
-                }
-                path.reverse();
-
-                var n = {
-                    type : "expression",
-                    "category" : "functionref",
-                    bound : node.bound,
-                    "path" : path
-                };
-                result = this._getValue(n);
-
-                // add arguments
-                var outArgs = [], args = node.arguments;
-                for (var i = 0; i < (args ? args.length : 0); i++) {
-                    if (!args[i].category) {
-                        // add category otherwise HExpression will not be parsed
-                        args[i].category = "jsexpression";
-                    }
-                    var expr = new HExpression(args[i], this.globalSyntaxTree);
-                    outArgs[i] = expr.getSyntaxTree();
-                }
-                n.args = outArgs;
-                break;
-            case "CssClassElement" :
-                result = "((" + this._process(node.right) + ")? ''+" + this._process(node.left) + ":'')";
-                break;
-            case "CssClassExpression" :
-                var list = node.list, length = list.length, code = [];
-                for (var i = 0; i < length; i++) {
-                    code[i] = this._process(list[i]);
-                }
-                if (length < 1) {
-                    result = '';
-                } else {
-                    result = "[" + code.join(",") + "].join(' ')";
-                }
-                break;
-            case "ObjectLiteral":
-                var properties = node.properties, length = properties.length, code = [];
-                for (var i = 0; i < length; i++) {
-                    code[i] = this._process(properties[i]);
-                }
-                if (length < 1) {
-                    result = '';
-                } else {
-                    result = "{" + code.join(",") + "}";
-                }
-                break;
-            case "PropertyAssignment":
-                var name = node.name, child = node.value;
-                var code = this._process(child);
-                result = name + ":" + code;
-                break;
-            default :
-                this._logError(node.type + '(s) are not supported yet');
-                console.warn('[HExpression] ' + node.type + '(s) are not supported yet:');
-                console.dir(node);
-                break;
-        }
-        return result;
-    },
-
-    /**
-     * Returns the code value for a node of type "expression" (i.e. literals, objectrefs...).
-     * @param {Object} node the node.
-     * @return {String} the value of the node.
-     */
-    _getValue : function (node) {
-        var result = '';
-        switch (node.category) {
-            case "objectref" :
-                var length = this._objectRefs.length, expr, pathLength, ok;
-
-                // check if an identical expression already exist
-                for (var i = 0; i < length; i++) {
-                    expr = this._objectRefs[i];
-                    if (expr.category !== "objectref") {
-                        continue;
-                    }
-                    pathLength = expr.path.length;
-                    ok = true;
-                    // only the path may vary
-                    if (pathLength === node.path.length) {
-                        for (var j = 0; j < pathLength; j++) {
-                            if (expr.path[j] !== node.path[j]) {
-                                ok = false;
-                                break;
-                            }
-                        }
-                        if (ok) {
-                            result = "a" + i;
-                            break;
-                        }
-                    }
-                }
-
-                if (!result) {
-                    // objectref doesn't exist in previous expressions
-                    result = "a" + length; // argument variable
-                    this._objectRefs[length] = node;
-                }
-                break;
-            case "dynref":
-                var length = this._objectRefs.length;
-                result = "a" + length; // argument variable
-                this._objectRefs[length] = node;
-                break;
-            case "functionref" :
-                // add the function call to the object ref list
-                // we don't optimize the storeage as it is less likely to have the same combination repeated
-                // than with simple object refs
-                var length = this._objectRefs.length;
-                result = "a" + length; // argument variable
-                this._objectRefs[length] = node;
-                break;
-            case "string" :
-                result = '"' + node.value.replace(/\"/g, '\\"') + '"';
-                break;
-            case "boolean" :
-            case "number" :
-                result = node.value;
-                break;
-            case "null" :
-                result = "null";
-                break;
-        }
-        return result;
-    },
-
-    /**
-     * Transforms a node that contains a pipes[] collection into another node
-     * that uses function call expressions and that can be processed in a standard way
-     */
-    _transformPipesIntoFnCalls:function(node) {
-        var pipes=node.pipes, p, arg0, args;
-        if (!pipes || !pipes.length) {
-            return node;
-        }
-
-        var nd;
-        for (var i=0;pipes.length>i;i++) {
-            p=pipes[i];
-            // create the node corresponding to the first argument
-            if (i===0) {
-                arg0={};
-                // copy properties from the original node
-                for (var k in node) {
-                    if (node.hasOwnProperty(k)) {
-                        if (k==="expType") {
-                            arg0.type=node[k];
-                        } else if (k!=="pipes" && k!=="line" && k!=="column" && k!=="bound" && k!=="type" && k!=="category") {
-                            arg0[k]=node[k];
-                        }
-                    }
-                }
-            } else {
-                arg0=nd;
-            }
-            args=p.args;
-            args.splice(0,0,arg0);
-            nd={
-                "type": "FunctionCall",
-                "name": p.fnexpr,
-                "arguments": args
-            };
-        }
-
-        // add general information to the main node
-        nd.type="expression";
-        nd.category="jsexpression";
-        nd.expType="FunctionCall";
-        nd.line=node.line;
-        nd.column=node.column;
-        nd.bound=node.bound;
-
-        return nd;
-    }
-});
-exports.HExpression = HExpression;
\ No newline at end of file
diff --git a/hsp/compiler/treebuilder/syntaxTree.js b/hsp/compiler/treebuilder/syntaxTree.js
index 857bf6a..8f2bf1e 100644
--- a/hsp/compiler/treebuilder/syntaxTree.js
+++ b/hsp/compiler/treebuilder/syntaxTree.js
@@ -1,5 +1,4 @@
 var klass = require("../../klass");
-var HExpression = require("./hExpression").HExpression;
 var htmlEntitiesToUtf8 = require("./htmlEntities").htmlEntitiesToUtf8;
 var exParser = require('../../expressions/parser');
 
@@ -54,6 +53,10 @@ var reservedKeywords = {
     "scope": true
 };
 
+function isEventHandlerAttr(attrName) {
+    return attrName.match(/^on/i);
+}
+
 /**
  * The SyntaxTree class made to build the syntax tree from the block list from the parser. 
  * Entry point: generateTree()
@@ -95,6 +98,21 @@ var SyntaxTree = klass({
         this.errors.push(desc);
     },
 
+    /**
+     * Validates expression for syntax errors
+     * @param {String} exp
+     * @return {Object} ast or undefined if expression is not valid
+     */
+    _validateExpressionBlock : function(block) {
+        //parse the expression to detect errors
+        //TODO(pk): avoid parsing the same expression several times
+        try {
+            return exParser(block.value);
+        } catch (e) {
+            this._logError("Invalid expression: '" + block.value + "'", block);
+        }
+    },
+
     /**
      * Process a list of blocks and advance the cursor index that scans the collection.
      * @param {Array} blocks the full list of blocks.
@@ -302,27 +320,10 @@ var SyntaxTree = klass({
                     }
                 }
             } else if (block.type === "expression") {
-
-                if (block.category === "jsexptext") {
-                    //parse the expression to detect errors
-                    //TODO(pk): avoid parsing the same expression several times
-                    try {
-                        exParser(block.value);
-                        buffer.push(block);
-                    } catch (e) {
-                        this._logError("Invalid expression: '" + block.value + "'", block);
-                    }
-                } else if (block.category === "jsexpression") {
-                    // pre-process expression
-                    var expr = new HExpression(block, this);
-                    // inject the processed expression in the block list
-                    block = blocks[nextIndex] = expr.getSyntaxTree();
-                } else if (block.category === "invalidexpression") {
-                    this._logError("Invalid expression", block);
-                } else {
+                //parse the expression to detect errors
+                if (this._validateExpressionBlock(block)){
                     buffer.push(block);
                 }
-
             } else if (block.type === "comment") {
                 // ignore comments
             } else {
@@ -603,7 +604,7 @@ var SyntaxTree = klass({
      * @return {Integer} the index of the block where the function stopped or -1 if all blocks have been handled.
      */
     _elementOrComponent : function (blockType, index, blocks, out) {
-        var node = new Node(blockType), block = blocks[index];
+        var node = new Node(blockType), block = blocks[index], blockValue, expAst;
         node.name = block.name;
         node.closed = block.closed;
         if (block.ref) {
@@ -620,7 +621,7 @@ var SyntaxTree = klass({
             var length = attribute.value.length;
 
             if (length === 0) {
-                // this case arises when the attibute is empty - so let's create an empty text node
+                // this case arises when the attribute is empty - so let's create an empty text node
                 if (attribute.value === '') {
                     // attribute has no value - e.g. autocomplete in an input element
                     outAttribute = {
@@ -639,50 +640,42 @@ var SyntaxTree = klass({
                 }
                 length = 1;
             }
+
             if (length === 1) {
                 // literal or expression
                 var type = attribute.value[0].type;
                 if (type === "text" || type === "expression") {
+                    outAttribute = attribute.value[0];
+                    outAttribute.name = attribute.name;
                     if (type === "expression") {
-                        var value = attribute.value[0], category = value.category;
-                        if (category === "jsexpression") {
-                            // pre-process expression
-                            var expr = new HExpression(value, this);
-                            // inject the processed expression in the block list
-                            attribute.value[0] = expr.getSyntaxTree();
-                        } else if (category === "invalidexpression") {
-                            this._logError("Invalid expression", value);
-                        } else if (attribute.name.match(/^on/i) && category !== "functionref") {
-                            this._logError("Event handler attribute only support function expressions", value);
+                        expAst = this._validateExpressionBlock(outAttribute);
+                        //verify that an event handler is a function call
+                        if (expAst && isEventHandlerAttr(attribute.name) && expAst.v !== '(') {
+                            this._logError("Event handler attribute only support function expressions", attribute.value[0]);
                         }
                     }
-                    outAttribute = attribute.value[0];
-                    outAttribute.name = attribute.name;
                 } else {
                     this._logError("Invalid attribute type: " + type, attribute);
                     continue;
                 }
             } else {
                 // length > 1 so attribute is a text block
-
                 // if attribute is an event handler, raise an error
-                if (attribute.name.match(/^on/i)) {
+                if (isEventHandlerAttr(attribute.name)) {
                     this._logError("Event handler attributes don't support text and expression mix", attribute);
                 }
-                // raise errors if we have invalid attributes
-                for (var j = 0; j < length; j++) {
-                    var value = attribute.value[j];
-                    if (value.type === "expression") {
-                        if (value.category === "jsexpression") {
-                            // pre-process expression
-                            var expr = new HExpression(value, this);
-                            // inject the processed expression in the block list
-                            attribute.value[j] = expr.getSyntaxTree();
-                        } else if (value.category === "invalidexpression") {
-                            this._logError("Invalid expression", value);
+
+                //check expression attributes for syntax errors
+                for (var j=0; j<length; j++) {
+                    blockValue = attribute.value[j];
+                    if (blockValue.type === "expression") {
+                        expAst = this._validateExpressionBlock(blockValue);
+                        if (expAst && isEventHandlerAttr(attribute.name) && expAst.v !== '(') {
+                            this._logError("Event handler attribute only support function expressions", attribute.value[0]);
                         }
                     }
                 }
+
                 outAttribute = {
                     name : attribute.name,
                     type : "textblock",
diff --git a/hsp/expressions/manipulator.js b/hsp/expressions/manipulator.js
index bcb201d..c3f75d0 100644
--- a/hsp/expressions/manipulator.js
+++ b/hsp/expressions/manipulator.js
@@ -15,6 +15,7 @@
 
 var ast = require('./parser');
 var evaluator = require('./evaluator');
+var json = require("../json");
 
 /**
  * Expressions handling util that can evaluate and manipulate
@@ -54,9 +55,9 @@ module.exports = function(input, inputTree) {
             }
 
             if (tree.a === 'idn') {
-                scope[tree.v] = newValue;
+                json.set(scope, tree.v, newValue);
             } else if (tree.a === 'bnr') {
-                evaluator(tree.l, scope)[evaluator(tree.r, scope)] = newValue;
+                json.set(evaluator(tree.l, scope), evaluator(tree.r, scope), newValue);
             }
         },
         isAssignable: isAssignable,
diff --git a/hsp/expressions/observable.js b/hsp/expressions/observable.js
index 655a6e9..9600780 100644
--- a/hsp/expressions/observable.js
+++ b/hsp/expressions/observable.js
@@ -54,7 +54,7 @@ module.exports = function getObservablePairs(tree, scope) {
         return [];
     } else if (tree.a === 'idn') {
         //TODO: deal with "parent scopes" (traverse up using +parent) => should it be done here?
-        return scope[tree.v] instanceof Array ? [[scope, tree.v], [scope[tree.v], null]] : [[scope, tree.v]];
+        return scope[tree.v] && scope[tree.v] instanceof Array ? [[scope, tree.v], [scope[tree.v], null]] : [[scope, tree.v]];
     } else if (tree.a === 'unr') {
         return getObservablePairs(tree.l, scope);
     } else if (tree.a === 'bnr') {
diff --git a/hsp/rt.js b/hsp/rt.js
index ae308a3..bad00f9 100644
--- a/hsp/rt.js
+++ b/hsp/rt.js
@@ -211,12 +211,14 @@ var customAttributesRegistry = [];
  * @param {Array|String} names the name of the attributes.
  * @param {Object} handler the attribute handler function, which can implement:
  *  - $constructor(nodeInstance, callback): used to create the handler instance.
- *  - $setValue(name, value): called each time the attribute value changed, including when the initial value is set.
+ *  - $setValue(name, stringValue): called each time the attribute value changed, including when the initial value is set.
+ *  - $setValueFromExp(name, expresionValues): called each time the attribute is refreshed, including when the initial value is set.
  *  - $onAttributesRefresh(): called at the end of the attributes'refresh process, i.e. once all attributes have their new value.
  *  - $handleEvent(event): called when an event for which the custom attribute registered for is fired.
  *  - $dispose(): used to dispose the handler instance. 
  *  It is instanciated on each element node with one of the custom attributes.
  *  WARNING: when $constructor is executed, the node instance tree is not fully built, so links with other nodes (parent, children, siblinngs) must be done in setValue.
+ *  WARNING: custom attribute handler should implement only one of $setValue and $setValueFromExp
  * @param {Integer} priority the priority of the handler, default value is 0, the higher the more priority (i.e. higher executed first).
  * @param {Array} tags the list of tags on which the handler will apply, undefined means all.
  */
diff --git a/hsp/rt/$root.js b/hsp/rt/$root.js
index 5f6595b..fa5faea 100644
--- a/hsp/rt/$root.js
+++ b/hsp/rt/$root.js
@@ -532,8 +532,7 @@ var $CptNode = klass({
                 var cv=exp.getValue(pvs,this.eh);
                 if (cv!==change.newValue) {
                     // if current value is different, we update it on the scope object that owns it
-                    var vs=this.parent.getScopeOwner(exp.path[0],pvs);
-                    exp.setValue(vs, change.newValue);
+                    exp.setValue(pvs, change.newValue);
                 }
             }
         }
diff --git a/hsp/rt/attributes/class.js b/hsp/rt/attributes/class.js
index 652b5dc..bba612b 100644
--- a/hsp/rt/attributes/class.js
+++ b/hsp/rt/attributes/class.js
@@ -21,7 +21,23 @@ var ClassHandler = klass({
         this.previousClasses = null;
     },
 
-    $setValue: function (name, newClasses) {
+    $setValueFromExp: function (name, exprVals) {
+        var newClassesArr = [], newClasses, classExpr;
+
+        for (var i = 0; i < exprVals.length; i++) {
+            if (exprVals % 2 || typeof exprVals[i] !== 'object') {
+                newClassesArr.push(exprVals[i]);
+            } else {
+                classExpr = exprVals[i];
+                for (var className in classExpr) {
+                    if (classExpr.hasOwnProperty(className) && classExpr[className]) {
+                        newClassesArr.push(className);
+                    }
+                }
+            }
+        }
+        newClasses = newClassesArr.join(' ');
+
         var currentClasses = this.nodeInstance.node.className;
         var results = currentClasses? currentClasses.split(' '): [];
         if (this.previousClasses) {
diff --git a/hsp/rt/eltnode.js b/hsp/rt/eltnode.js
index b048ecf..829c1fd 100644
--- a/hsp/rt/eltnode.js
+++ b/hsp/rt/eltnode.js
@@ -311,12 +311,14 @@ var EltNode = klass({
                 var customHandlers = this._custAttrHandlers[name];
                 if (customHandlers) {
                     var newValue = attribute.getValue(expressionHandler, vscope, null);
-                    if (this._custAttrData[name].value !== newValue) {
-                        for (var j = 0; customHandlers && j < customHandlers.length; j++) {
-                            var handlerInstance = customHandlers[j].instance;
-                            if (handlerInstance.$setValue) {
-                                handlerInstance.$setValue(name, newValue);
-                            }
+                    var stringValueHasChanged = this._custAttrData[name].value !== newValue;
+                    var newExprValues = attribute.getExprValues(expressionHandler, vscope, null);
+                    for (var j = 0; customHandlers && j < customHandlers.length; j++) {
+                        var handlerInstance = customHandlers[j].instance;
+                        if (handlerInstance.$setValueFromExp) {
+                            handlerInstance.$setValueFromExp(name, newExprValues);
+                        } else if (handlerInstance.$setValue && stringValueHasChanged) {
+                            handlerInstance.$setValue(name, newValue);
                         }
                     }
                     this._custAttrData[name].value = newValue;
diff --git a/hsp/rt/exphandler.js b/hsp/rt/exphandler.js
index 5d1ffcf..e73adcf 100644
--- a/hsp/rt/exphandler.js
+++ b/hsp/rt/exphandler.js
@@ -156,6 +156,15 @@ var PrattExpr = klass({
         }
     },
 
+    executeCb : function (evt, eh, vscope) {
+        var cbScope = Object.create(vscope);
+        //create a throw-away scope to expose additional identifiers to
+        //callback expression
+        cbScope.event = evt;
+
+        return this.getValue(cbScope, eh);
+    },
+
     getObservablePairs : function (eh, vscope) {
         return this.bound ? exobservable(this.ast, vscope) : null;
     }
diff --git a/hsp/rt/tnode.js b/hsp/rt/tnode.js
index d697d6a..83d2f66 100644
--- a/hsp/rt/tnode.js
+++ b/hsp/rt/tnode.js
@@ -437,6 +437,10 @@ var TSimpleAtt = klass({
 
     getValue : function (eh, vscope, defvalue) {
         return this.value;
+    },
+
+    getExprValues: function(eh, vscope, defvalue) {
+        return [this.value];
     }
 });
 
@@ -470,12 +474,26 @@ var TExpAtt = klass({
 
         for (var i = 0; sz > i; i++) {
             // odd elements are variables
-            if (i % 2)
-                buf.push(eh.getValue(tcfg[i], vscope, defvalue));
-            else
-                buf.push(tcfg[i]);
+            buf.push(i % 2 ? eh.getValue(tcfg[i], vscope, defvalue) : tcfg[i]);
         }
+
         return buf.join("");
+    },
+
+    /**
+     * Returns an array of text values / evaluated expression values
+     * @param eh
+     * @param vscope
+     * @param defvalue
+     * @returns {Array}
+     */
+    getExprValues: function(eh, vscope, defvalue) {
+        var textConfig = this.textcfg, result = [];
+        for (var i = 0; i < textConfig.length; i++) {
+            // odd elements are variables
+            result.push(i % 2 ? eh.getValue(textConfig[i], vscope, defvalue) : textConfig[i]);
+        }
+        return result;
     }
 });
 
diff --git a/test/compiler/errsamples/element6.txt b/test/compiler/errsamples/element6.txt
index fe47dd0..2f6f14d 100644
--- a/test/compiler/errsamples/element6.txt
+++ b/test/compiler/errsamples/element6.txt
@@ -6,9 +6,8 @@
 ##### Errors:
 [
   {
-    "description": "Invalid expression",
+    "description": "Invalid expression: 'doClick('blah',event,)'",
     "line": 2,
-    "column": 19,
-    "code": "doClick('blah',event,)"
+    "column": 19
   }
 ]
\ No newline at end of file
diff --git a/test/compiler/errsamples/element7.txt b/test/compiler/errsamples/element7.txt
index e1f5f53..18dd8db 100644
--- a/test/compiler/errsamples/element7.txt
+++ b/test/compiler/errsamples/element7.txt
@@ -11,9 +11,8 @@
     "column": 10
   },
   {
-    "description": "Invalid expression",
+    "description": "Invalid expression: 'doClick('blah',event,)'",
     "line": 2,
-    "column": 22,
-    "code": "doClick('blah',event,)"
+    "column": 22
   }
 ]
diff --git a/test/compiler/samples/class1.txt b/test/compiler/samples/class1.txt
index 8f1c714..7c30f29 100644
--- a/test/compiler/samples/class1.txt
+++ b/test/compiler/samples/class1.txt
@@ -1,6 +1,6 @@
 ##### Template:
 {template test(msg)}
-	<div class="{'warning':msg.urgent==='1'}">
+	<div class="{{'warning':msg.urgent==='1'}}">
     Hello World
   </div>
 {/template}
@@ -17,29 +17,9 @@
             "name": "class",
             "value": [{
                 "type": "expression",
-                "category": "jsexpression",
-                "expType": "CssClassElement",
+                "category": "jsexptext",
+                "value": "{'warning':msg.urgent==='1'}",
                 "bound": true,
-                "left": { "type": "expression", "category": "string", "value": "warning"},
-                "right": {
-                  "type": "BinaryExpression",
-                  "operator": "===",
-                  "left": {
-                    "type": "PropertyAccess",
-                    "base": {
-                      "type": "Variable",
-                      "name": "msg",
-                      "code": "msg"
-                    },
-                    "name": "urgent"
-                  },
-                  "right": {
-                    "type": "expression",
-                    "category": "string",
-                    "value": "1",
-                    "code": "1"
-                  }
-                }
               }
             ]
           }
@@ -61,11 +41,8 @@
           {
             "name":"class",
             "type": "expression",
-            "category": "jsexpression",
-            "objectrefs": [
-              {"type": "expression", "category": "objectref","path": ["msg","urgent"]}
-            ],
-            "code": "(((a0 === \"1\"))? ''+\"warning\":'')",
+            "category": "jsexptext",
+            "value": "{'warning':msg.urgent==='1'}",
             "line": 2,
             "column": 14
           }
@@ -86,7 +63,7 @@
 ##### Template Code
 test=[__s,
     n.elt(  "div", 
-            {e1:[6,function(a0) {return (((a0 === "1"))? ''+"warning":'');},2],e2:[1,2,"msg","urgent"]},
+            {e1:[9,"{'warning':msg.urgent==='1'}"]},
             {"class":["",1]},
             0,[
                 n.$text(0,["Hello World "])
diff --git a/test/compiler/samples/class2.txt b/test/compiler/samples/class2.txt
index 1e62e1f..a742d04 100644
--- a/test/compiler/samples/class2.txt
+++ b/test/compiler/samples/class2.txt
@@ -1,6 +1,6 @@
 ##### Template:
 {template test(msg)}
-	<div class="{'warning':msg.urgent, msg.category}">
+	<div class="{{'warning':msg.urgent}} {msg.category}">
     Hello World
   </div>
 {/template}
@@ -14,8 +14,8 @@
 ##### Template Code
 test=[__s,
     n.elt(  "div", 
-            {e1:[6,function(a0,a1) {return [((a0)? ''+"warning":''),a1].join(' ');},2,3],e2:[1,2,"msg","urgent"],e3:[1,2,"msg","category"]},
-            {"class":["",1]},
+            {e1:[9,"{'warning':msg.urgent}"], e2:[9,"msg.category"]},
+            {"class":["",1,"",2]},
             0,[
                 n.$text(0,["Hello World "])
             ]
diff --git a/test/compiler/samples/class3.txt b/test/compiler/samples/class3.txt
index f520bf7..c3d0e16 100644
--- a/test/compiler/samples/class3.txt
+++ b/test/compiler/samples/class3.txt
@@ -1,6 +1,6 @@
 ##### Template:
 {template test(msg)}
-	<div class="{msg.category, 'warning':msg.urgent, 'msg'}">
+	<div class="{msg.category} {{'warning':msg.urgent}} msg">
     Hello World
   </div>
 {/template}
@@ -14,8 +14,8 @@
 ##### Template Code
 test=[__s,
     n.elt(  "div", 
-            {e1:[6,function(a0,a1) {return [a0,((a1)? ''+"warning":''),"msg"].join(' ');},2,3],e2:[1,2,"msg","category"],e3:[1,2,"msg","urgent"]},
-            {"class":["",1]},
+            {e1:[9,"msg.category"],e2:[9,"{'warning':msg.urgent}"]},
+            {"class":["",1,"",2,"msg"]},
             0,[
                 n.$text(0,["Hello World "])
             ]
diff --git a/test/compiler/samples/class4.txt b/test/compiler/samples/class4.txt
index 0c75bd1..01fe28d 100644
--- a/test/compiler/samples/class4.txt
+++ b/test/compiler/samples/class4.txt
@@ -1,6 +1,6 @@
 ##### Template:
 {template test(msg)}
-	<div class="{}">
+	<div class="{{}}">
     Hello World
   </div>
 {/template}
@@ -14,8 +14,8 @@
 ##### Template Code
 test=[__s,
     n.elt(  "div", 
-            0,
-            {"class":""},
+            {e1:[9,"{}"]},
+            {"class":["",1]},
             0,[
                 n.$text(0,["Hello World "])
             ]
diff --git a/test/compiler/samples/class5.txt b/test/compiler/samples/class5.txt
index 3e6d716..fce284f 100644
--- a/test/compiler/samples/class5.txt
+++ b/test/compiler/samples/class5.txt
@@ -1,13 +1,9 @@
 ##### Template:
 {template test(msg)}
-	<div class="{ 'one',
-        'two':msg.isTrue }">
+  <div class="one {{'two':msg.isTrue}}">
     foo
   </div>
-  <div class="{
-    'one',
-    'two':msg.isTrue
-  }">
+  <div class="one {{'two':msg.isTrue}}">
     foo
   </div>
 {/template}
@@ -22,14 +18,14 @@
 test=[__s,
     n.elt(
         "div",
-        {e1:[6,function(a0) {return ["one",((a0)? ''+"two":'')].join(' ');},2],e2:[1,2,"msg","isTrue"]},
-        {"class":["",1]},
+        {e1:[9,"{'two':msg.isTrue}"]},
+        {"class":["one",1]},
         0,
         [n.$text(0,["foo "])]
     ),n.elt(
         "div",
-        {e1:[6,function(a0) {return ["one",((a0)? ''+"two":'')].join(' ');},2],e2:[1,2,"msg","isTrue"]},
-        {"class":["",1]},
+        {e1:[9,"{'two':msg.isTrue}"]},
+        {"class":["one",1]},
         0,
         [n.$text(0,["foo "])]
     )
diff --git a/test/compiler/samples/component3.txt b/test/compiler/samples/component3.txt
index 7bb0e6d..49ec8b8 100644
--- a/test/compiler/samples/component3.txt
+++ b/test/compiler/samples/component3.txt
@@ -1,7 +1,7 @@
 ##### Template:
 
 {template nbrfield using c:lib.NbrField}
-  <input type="text" model="{c.fieldValue}" class="{'nbrfield','error': c.invalidValue, 'mandatory': c.attributes.mandatory}"/>
+  <input type="text" model="{c.fieldValue}" class="nbrfield {{'error': c.invalidValue, 'mandatory': c.attributes.mandatory}}"/>
   <input type="button" value="..." onclick="{c.resetField()}"/>
 {/template}
 
@@ -14,12 +14,12 @@
 ##### Template Code:
 nbrfield=[__s,
   n.elt("input",
-    {e1:[1,2,"c","fieldValue"],e2:[6,function(a0,a1) {return ["nbrfield",((a0)? ''+"error":''),((a1)? ''+"mandatory":'')].join(' ');},3,4],e3:[1,2,"c","invalidValue"],e4:[1,3,"c","attributes","mandatory"]},
-    {"type":"text","model":["",1],"class":["",2]},
+    {e1:[9,"c.fieldValue"], e2:[9,"{'error': c.invalidValue, 'mandatory': c.attributes.mandatory}"]},
+    {"type":"text","model":["",1],"class":["nbrfield",2]},
     0
   ),
   n.elt("input",
-    {e1:[3,2,"c","resetField"]},
+    {e1:[9,"c.resetField()"]},
     {"type":"button","value":"..."},
     {"click":1}
   )
diff --git a/test/compiler/samples/component4.txt b/test/compiler/samples/component4.txt
index 47cf1d5..6bc87b3 100644
--- a/test/compiler/samples/component4.txt
+++ b/test/compiler/samples/component4.txt
@@ -13,9 +13,9 @@
 
 ##### Template Code:
 test=[__s,
-  n.elt("input",{e1:[1,2,"d","value"]},{"type":"text","value":["",1]},0),
+  n.elt("input",{e1:[9,"d.value"]},{"type":"text","value":["",1]},0),
   n.cpt([_lib,"lib","nbrfield"],{
-    e1:[1,2,"d","value"],
-    e2:[4,1,_notifyReset,0,123]
+    e1:[9,"d.value"],
+    e2:[9,"notifyReset(123)"]
   },{"value":["",1],"min":"-10","max":"10"},{"reset":2})
 ]
diff --git a/test/compiler/samples/component7.txt b/test/compiler/samples/component7.txt
index 023428d..71adcbf 100644
--- a/test/compiler/samples/component7.txt
+++ b/test/compiler/samples/component7.txt
@@ -12,5 +12,6 @@
 
 ##### Template Code:
 test=[__s,
-  n.cpt([_lib,"lib","nbrfield"],{e1:[6,function(a0,a1) {return {value:a0,min:10,max:"10",reset:a1};},2,3],e2:[1,2,"d","value"],e3:[4,1,_notifyReset,0,123]},{"objliteral":["",1]},0)
+  n.cpt([_lib,"lib","nbrfield"],{e1:[9,"{value: d.value, min: 10, max: \"10\", reset: notifyReset(123)}"]},
+  {"objliteral":["",1]},0)
 ]
diff --git a/test/compiler/samples/element1.txt b/test/compiler/samples/element1.txt
index 7a20dbf..15fe88f 100644
--- a/test/compiler/samples/element1.txt
+++ b/test/compiler/samples/element1.txt
@@ -15,11 +15,12 @@
     "content": [
     	{type:"element", name:"div", closed:false, attributes:[
     		{type:"attribute", name:"title", value:[{type:"text", value:"Some text"}]},
-    		{type:"attribute", name:"id", value:[{type:"expression", "category": "jsexpression", expType:"PropertyAccess", "bound": true, base:{type:"Variable", name:"person"}, name:"id"}]},
+    		{type:"attribute", name:"id", value:[{type:"expression", "category": "jsexptext", "bound": true,
+    		value:"person.id"}]},
     		{type:"attribute", name:"class", value:[
-    			{type:"expression", "category": "jsexpression", expType:"PropertyAccess", "bound": true, base:{type:"Variable", name:"person"}, name:"gender"},
+    			{type:"expression", "category": "jsexptext", "bound": true, value:"person.gender"},
     			{type:"text", value:" "},
-    			{type:"expression", "category": "jsexpression", expType:"PropertyAccess", "bound": true, base:{type:"Variable", name:"person"}, name:"category"}
+    			{type:"expression", "category": "jsexptext", "bound": true, value:"person.category"}
     		]}
     	]},
     	{"type": "text","value": "Hello "},
@@ -40,11 +41,11 @@
     "content": [
       {type:"element", name:"div", closed:false, attributes:[
           {name:"title", type:"text", value:"Some text"},
-          {name:"id", type:"expression", "category": "objectref", "bound": true, "path": [ "person", "id" ]},
+          {name:"id", type:"expression", "category": "jsexptext", "bound": true, "value": "person.id"},
           {name:"class", type:"textblock", content:[
-          	{type:"expression", "category": "objectref", "bound": true, "path": [ "person", "gender" ]},
+          	{type:"expression", "category": "jsexptext", "bound": true, "value": "person.gender"},
 			{type:"text", value:" "},
-			{type:"expression", "category": "objectref", "bound": true, "path": [ "person", "category" ]}
+			{type:"expression", "category": "jsexptext", "bound": true, "value": "person.category"}
           ]}
       ],"content": [
       	{ "type": "textblock", "content": [
@@ -60,7 +61,7 @@
 ##### Template Code
 test=[__s,
 	n.elt(	"div", 
-			{e1:[1,2,"person","id"],e2:[1,2,"person","gender"],e3:[1,2,"person","category"]} ,
+			{e1:[9,"person.id"],e2:[9,"person.gender"],e3:[9,"person.category"]} ,
 			{"title":"Some text","id":["",1],"class":["",2," ",3]},
 			0,[
 				n.$text({e1:[9,"person.name"]},["Hello ",1,"! "])
diff --git a/test/compiler/samples/element2.txt b/test/compiler/samples/element2.txt
index 9b9c0dd..bf4ca84 100644
--- a/test/compiler/samples/element2.txt
+++ b/test/compiler/samples/element2.txt
@@ -27,7 +27,7 @@
 		{"type": "endelement",name:"b"},
 		{type:"element", name:"input", closed:true, attributes:[
     		{type:"attribute", name:"type", value:[{type:"text", value:"text"}]},
-    		{type:"attribute", name:"value", value:[{type:"expression", "category": "jsexpression", expType:"PropertyAccess", "bound": true, base:{type:"Variable", name:"person"}, name:"name"}]}
+    		{type:"attribute", name:"value", value:[{type:"expression", "category": "jsexptext", "value":"person.name"}]}
     	]},
     	{"type": "endelement",name:"div"}
     ]
@@ -55,7 +55,7 @@
 			]},
 			{type:"element", name:"input", closed:true, content:[], attributes:[
           		{name:"type", type:"text", value:"text"},
-          		{name:"value", type:"expression", "category": "objectref", "bound": true, "path": [ "person", "name" ]}
+          		{name:"value", type:"expression", "category": "jsexptext", "value":"person.name"}
           	]}
       ]}
     ]
@@ -78,7 +78,7 @@ test=[__s,
 					])
 				]),
 				n.elt("input", 
-					{e1:[1,2,"person","name"]},
+					{e1:[9,"person.name"]},
 					{"type":"text", "value":["",1]},
 					0
 				)
diff --git a/test/compiler/samples/element5.txt b/test/compiler/samples/element5.txt
index 2cee5b6..47dae72 100644
--- a/test/compiler/samples/element5.txt
+++ b/test/compiler/samples/element5.txt
@@ -14,11 +14,10 @@
 ##### Template Code
 filterLink=[__s,
     n.elt("a",
-        {   e1:[3,2,"ctl","selectFilter",1,2],
-            e2:[1,1,"filterCode"],
-            e3:[1,1,"label"]
+        {   e1:[9,"ctl.selectFilter(filterCode)"],
+            e2:[9,"label"]
         },
-        {"title":["",3]},
+        {"title":["",2]},
         {"click":1},
         [n.$text({e1:[9,"label"]},["",1," "])]
     )
diff --git a/test/compiler/samples/evthandler1.txt b/test/compiler/samples/evthandler1.txt
index b04cc4a..dd7cd8e 100644
--- a/test/compiler/samples/evthandler1.txt
+++ b/test/compiler/samples/evthandler1.txt
@@ -6,111 +6,25 @@
 {/template}
 
 ##### Parsed Tree
-
-[
-  {
-    "type": "template",
-    "name": "test",
-    "args": ["path","ctl", "person"],
-    "content": [
-    	{type:"element", name:"img", closed:true, attributes:[
-    		{type:"attribute", name:"src", value:[
-    			{type:"text", value:"http://someting.com/"},
-    			{type:"expression", "category": "jsexpression", expType:"Variable", "bound": true, name:"path"}
-     		]},
-    		{type:"attribute", name:"onclick", value:[
-          {"type": "expression", "category": "jsexpression", "expType": "FunctionCall", "bound": true,
-            "name": {
-              "type": "PropertyAccess",
-              "base": {"type": "Variable", "name": "ctl"},
-              "name": "handleClick"
-            },
-            "arguments": []
-          }
-    		]}
-    	]},
-    	{type:"element", name:"img", closed:true, attributes:[
-    		{type:"attribute", name:"onclick", value:[
-          {"type": "expression", "category": "jsexpression", "expType": "FunctionCall", "bound": true,
-            "name": {
-              "type": "PropertyAccess",
-              "base": {"type": "Variable", "name": "ctl"},
-              "name": "handleClick"
-            },
-            "arguments": [
-              {"type": "Variable","name": "path"},
-              {"type": "PropertyAccess", "base": {"type": "Variable","name": "person"}, "name": "name"},
-              {"type": "expression", "category": "string", "value": "literal arg", "code": "literal arg"},
-              {"type": "Variable", "name": "event"}
-            ]
-          }
-    		]}
-    	]},
-    	{type:"element", name:"img", closed:true, attributes:[
-    		{type:"attribute", name:"onclick", value:[
-          {"type": "expression", "category": "jsexpression", "expType": "FunctionCall", "bound": true,
-            "name": {
-              "type": "Variable",
-              "name": "doClick"
-            },
-            "arguments": [
-              {"type": "expression", "category": "string", "value": "blah", "code": "blah"},
-              {"type": "Variable", "name": "event"}
-            ]
-          }
-        ]}
-    	]}
-    ]
-  }
-]
+"skip"
 
 ##### Syntax Tree
-
-[
-  {
-    "type": "template",
-    "name": "test",
-    "args": ["path","ctl", "person"],
-    "content": [
-      {type:"element", name:"img", closed:true, attributes:[
-          	{name:"src", type:"textblock", content:[
-          		{type:"text", value:"http://someting.com/"},
-          		{type:"expression", "category": "objectref", "bound": true, "path": [ "path" ]}
-          	]},
-          	{name:"onclick", type:"expression", "category": "functionref", "bound": true, path:["ctl","handleClick"], args:[]}
-      ],"content": []},
-      {type:"element", name:"img", closed:true, attributes:[
-          	{name:"onclick", type:"expression", "category": "functionref", "bound": true, path:["ctl","handleClick"], args:[
-          	    {"category": "objectref", "path": ["path"]},
-          	    {"category": "objectref", "path": ["person", "name"]},
-          	    {"category": "string",value: "literal arg"},
-          	    {"category": "objectref", "path": ["event"]}
-          	]}
-      ],"content": []},
-      {type:"element", name:"img", closed:true, attributes:[
-          	{name:"onclick", type:"expression", "category": "functionref", "bound": true, path:["_doClick"], args:[
-          	    {"category": "string",value: "blah"},
-          	    {"category": "objectref", "path": ["event"]}
-          	]}
-      ],"content": []}
-    ]
-  }
-]
+"skip"
 
 ##### Template code
 test=[__s,
     n.elt(	"img", 
-            {e1:[1,1,"path"],e2:[3,2,"ctl","handleClick"]} ,
+            {e1:[9,"path"],e2:[9,"ctl.handleClick()"]} ,
             {"src":["http://someting.com/",1]},
             {"click":2}
     ),
     n.elt(	"img", 
-            {e1:[3,2,"ctl","handleClick",1,2,1,3,0,"literal arg",1,4],e2:[1,1,"path"],e3:[1,2,"person","name"],e4:[0,1,"event"]} ,
+            {e1:[9,"ctl.handleClick(path, person.name, \"literal arg\", event)"]} ,
             0,
             {"click":1}
     ),
     n.elt(	"img", 
-            {e1:[4,1,_doClick,0,"blah",1,2],e2:[0,1,"event"]},
+            {e1:[9,"doClick('blah',event)"]},
             0,
             {"click":1}
     )
diff --git a/test/compiler/samples/evthandler2.txt b/test/compiler/samples/evthandler2.txt
index 97e6216..a0670a6 100644
--- a/test/compiler/samples/evthandler2.txt
+++ b/test/compiler/samples/evthandler2.txt
@@ -12,7 +12,7 @@
 ##### Template code
 test=[__s,
     n.elt(	"img", 
-            {e1:[4,1,_doClick,0,1]},
+            {e1:[9,"doClick(1)"]},
             0,
             {"click":1}
     )
diff --git a/test/compiler/samples/jsexpression12.txt b/test/compiler/samples/jsexpression12.txt
index 7389b3d..e58ac9f 100644
--- a/test/compiler/samples/jsexpression12.txt
+++ b/test/compiler/samples/jsexpression12.txt
@@ -12,14 +12,11 @@
 ##### Template Code
 hello=[__s,
     n.elt("div",{
-        e1:[7,2,function(i,a0,a1) {return [a0,a1][i];},2,3],
-        e2:[1,1,"person"],
-        e3:[1,1,"bar"],
-        e4:[7,3,function(i,a0) {return [a0,(1 + 2),"blah"][i];},5],
-        e5:[1,2,"person","foo"]
+        e1:[9,"person[bar]"],
+        e2:[9,"person.foo[1+2].blah"]
     },{
         "title":["",1],
-        "class":["",4]
+        "class":["",2]
     },0,[
         n.$text(0,["..."])
     ])
diff --git a/test/compiler/samples/jsexpression15.txt b/test/compiler/samples/jsexpression15.txt
index 0381715..1a6732c 100644
--- a/test/compiler/samples/jsexpression15.txt
+++ b/test/compiler/samples/jsexpression15.txt
@@ -21,53 +21,8 @@
             "value": [
               {
                 "type": "expression",
-                "name": {
-                  "type": "Variable",
-                  "name": "foo",
-                  "code": "foo"
-                },
-                "arguments": [
-                  {
-                    "type": "FunctionCall",
-                    "name": {"type": "Variable","name": "bar","code": "bar"},
-                    "arguments": [
-                      {
-                        "type": "BinaryExpression",
-                        "operator": "+",
-                        "left": {
-                          "type": "PropertyAccess",
-                          "base": {"type": "Variable", "name": "person", "code": "person"},
-                          "name": "name",
-                          "code": "person.name"
-                        },
-                        "right": {
-                          "type": "expression",
-                          "category": "string",
-                          "value": "!",
-                          "code": "!"
-                        }
-                      },
-                      {
-                        "type": "BinaryExpression",
-                        "operator": "+",
-                        "left": {
-                          "type": "expression",
-                          "category": "number",
-                          "value": 1,
-                          "code": "1"
-                        },
-                        "right": {
-                          "type": "expression",
-                          "category": "number",
-                          "value": 2,
-                          "code": "2"
-                        }
-                      }
-                    ]
-                  }
-                ],
-                "category": "jsexpression",
-                "expType": "FunctionCall",
+                "category": "jsexptext",
+                "value": "foo(bar(person.name+\"!\",1+2))",
                 "line": 2,
                 "column": 15,
                 "bound": true
@@ -100,36 +55,9 @@
         "attributes": [
           {
             "type": "expression",
-            "category": "functionref",
+            "category": "jsexptext",
+            "value": "foo(bar(person.name+\"!\",1+2))",
             "bound": true,
-            "path": [ "_foo" ],
-            "args": [
-              {
-                "type": "expression",
-                "category": "functionref",
-                "path": [ "_bar" ],
-                "args": [
-                  {
-                    "type": "expression",
-                    "category": "jsexpression",
-                    "objectrefs": [
-                      {
-                        "type": "expression",
-                        "category": "objectref",
-                        "path": [ "person", "name" ]
-                      }
-                    ],
-                    "code": "(a0 + \"!\")"
-                  },
-                  {
-                    "type": "expression",
-                    "category": "jsexpression",
-                    "objectrefs": [],
-                    "code": "(1 + 2)"
-                  }
-                ]
-              }
-            ],
             "line": 2,
             "column": 15,
             "name": "title"
@@ -145,11 +73,7 @@
 ##### Template Code
 test=[__s,
     n.elt("div",{
-        e1:[4,1,_foo,1,2],
-        e2:[4,1,_bar,1,3,1,5],
-        e3:[6,function(a0) {return (a0 + "!");},4],
-        e4:[1,2,"person","name"],
-        e5:[6,function() {return (1 + 2);}]
+        e1:[9,"foo(bar(person.name+\"!\",1+2))"]
     },{
         "title":["",1]
     },0,[
diff --git a/test/compiler/samples/jsexpression16.txt b/test/compiler/samples/jsexpression16.txt
index 6d429b3..0906722 100644
--- a/test/compiler/samples/jsexpression16.txt
+++ b/test/compiler/samples/jsexpression16.txt
@@ -21,54 +21,10 @@
             "value": [
               {
                 "type": "expression",
-                "operator": "+",
-                "left": {
-                  "type": "PropertyAccess",
-                  "base": {"type": "Variable","name": "person","code": "person"},
-                  "name": "name",
-                  "code": "person.name"
-                },
-                "right": {
-                  "type": "expression",
-                  "category": "string",
-                  "value": "!",
-                  "code": "!"
-                },
-                "category": "jsexpression",
-                "expType": "BinaryExpression",
+                "category": "jsexptext",
+                "value": "person.name+\"!\"|bar:1+2|foo",
                 "line": 2,
                 "column": 15,
-                "pipes": [
-                  {
-                    "fnexpr": {"type": "Variable","name": "bar","code": "bar"},
-                    "args": [
-                      {
-                        "type": "BinaryExpression",
-                        "operator": "+",
-                        "left": {
-                          "type": "expression",
-                          "category": "number",
-                          "value": 1,
-                          "code": "1"
-                        },
-                        "right": {
-                          "type": "expression",
-                          "category": "number",
-                          "value": 2,
-                          "code": "2"
-                        }
-                      }
-                    ]
-                  },
-                  {
-                    "fnexpr": {
-                      "type": "Variable",
-                      "name": "foo",
-                      "code": "foo"
-                    },
-                    "args": []
-                  }
-                ],
                 "bound": true
               }
             ],
@@ -99,40 +55,13 @@
         "closed": false,
         "attributes": [
           {
+            "name": "title",
             "type": "expression",
-            "category": "functionref",
+            "category": "jsexptext",
+            "value": "person.name+\"!\"|bar:1+2|foo",
             "bound": true,
-            "path": [ "_foo" ],
-            "args": [
-              {
-                "type": "expression",
-                "category": "functionref",
-                "path": [ "_bar" ],
-                "args": [
-                  {
-                    "type": "expression",
-                    "category": "jsexpression",
-                    "objectrefs": [
-                      {
-                        "type": "expression",
-                        "category": "objectref",
-                        "path": [ "person", "name" ]
-                      }
-                    ],
-                    "code": "(a0 + \"!\")"
-                  },
-                  {
-                    "type": "expression",
-                    "category": "jsexpression",
-                    "objectrefs": [],
-                    "code": "(1 + 2)"
-                  }
-                ]
-              }
-            ],
             "line": 2,
-            "column": 15,
-            "name": "title"
+            "column": 15
           }
         ],
         "content": [{"type": "text","value": "hello "}]
@@ -145,11 +74,7 @@
 ##### Template Code
 test=[__s,
     n.elt("div",{
-        e1:[4,1,_foo,1,2],
-        e2:[4,1,_bar,1,3,1,5],
-        e3:[6,function(a0) {return (a0 + "!");},4],
-        e4:[1,2,"person","name"],
-        e5:[6,function() {return (1 + 2);}]
+        e1:[9,"person.name+\"!\"|bar:1+2|foo"]
     },{
         "title":["",1]
     },0,[
diff --git a/test/compiler/samples/jsexpression19.txt b/test/compiler/samples/jsexpression19.txt
index 6ff30b4..5c8180e 100644
--- a/test/compiler/samples/jsexpression19.txt
+++ b/test/compiler/samples/jsexpression19.txt
@@ -13,8 +13,7 @@
 test=[__s,
   n.elt(
     "div",{
-      e1:[6,function(a0) {return {main:{value:{A:"val A",B:a0,C:{C1:"val C1",C2:"val C2"}}}};},2],
-      e2:[1,2,"person","name"]
+      e1:[9,"{main : {'value' : {A : 'val A', B : person.name, C: {C1:'val C1', C2:'val C2'}}}}"]
     },
     {"title":["",1]},
     0,
diff --git a/test/rt/attributes/class.spec.hsp b/test/rt/attributes/class.spec.hsp
index fc12e0e..210a432 100644
--- a/test/rt/attributes/class.spec.hsp
+++ b/test/rt/attributes/class.spec.hsp
@@ -18,8 +18,8 @@ var $set = require('hsp/$set');
 
 {template test1(model)}
     <div class="test"></div>
-    <div class="{'active': model.isActive}"></div>
-    <div class="{'base', 'active': model.isActive}"></div>
+    <div class="{{'active': model.isActive}}"></div>
+    <div class="base {{'active': model.isActive}}"></div>
     <div class="{model.list}"></div>
     <div class="base {model.more}"></div>
 {/template}
diff --git a/test/rt/attributes/modelvalue.spec.hsp b/test/rt/attributes/modelvalue.spec.hsp
index fd8a64f..39833c1 100644
--- a/test/rt/attributes/modelvalue.spec.hsp
+++ b/test/rt/attributes/modelvalue.spec.hsp
@@ -21,8 +21,8 @@ var hsp=require("hsp/rt"),
 {template inputSample(data)}
     <div class="info section">All the following inputs are synchronized:</div>
     <div class="section">
-        Comment #1: <input type="text" value="{data.comment}"/><br/>
-        Comment #2: <input type="text" model="{data.comment}"/><br/>
+        Comment #1: <input id="1" type="text" value="{data.comment}"/><br/>
+        Comment #2: <input id="2" type="text" model="{data.comment}"/><br/>
         Comment #3: <span class="inputText">{data.comment}</span><br/>
     </div>
     <div class="section">
@@ -47,7 +47,7 @@ var hsp=require("hsp/rt"),
     <div class="info section">Please type a command and press enter.</div>
     <pre>{object.commandsHistory}</pre>
     <input type="text" value="{object.value}" onkeydown="{object.keydown(event)}" placeholder="Your command"><br>
-    <input type="text" model="{object.value}" onkeydown="{object.keydown(event)}" placeholder="Your command"><br>
+    <input type="text" value="{object.value}" onkeydown="{object.keydown(event)}" placeholder="Your command"><br>
 {/template}
 
 {template html5NumberInput(model)}
diff --git a/test/rt/cptwrapper.spec.hsp b/test/rt/cptwrapper.spec.hsp
index 431ad9f..c4b2152 100644
--- a/test/rt/cptwrapper.spec.hsp
+++ b/test/rt/cptwrapper.spec.hsp
@@ -117,7 +117,7 @@ lib.NbrField = klass({
 
 
 {template nbrfield using c:lib.NbrField}
-  <input type="text" model="{c.internalValue}" class="{'nbrfield','error': c.invalidValue, 'mandatory': c.mandatory}"/>
+  <input type="text" model="{c.internalValue}" class="nbrfield {{'error': c.invalidValue, 'mandatory': c.mandatory}}"/>
   <input type="button" value="..." onclick="{c.resetField()}"/>
 {/template}
 
diff --git a/test/rt/customAttributes.spec.hsp b/test/rt/customAttributes.spec.hsp
index 013cf02..11548c1 100644
--- a/test/rt/customAttributes.spec.hsp
+++ b/test/rt/customAttributes.spec.hsp
@@ -14,7 +14,7 @@ var klass = klass=require("hsp/klass");
 {/template}
 
 {template test3(ctl)}
-    <div style="height: 20px" customheightdiv="{ctl.myHeight}" class="{'active': ctl.isActive}">
+    <div style="height: 20px" customheightdiv="{ctl.myHeight}" class="{{'active': ctl.isActive}}">
         <span>Test</span>
     </div>
 {/template}