JsonML.org

JSON Markup Language (JsonML)

JsonML (JSON Markup Language) is an application of the JSON (JavaScript Object Notation) format. The purpose of JsonML is to provide a compact format for transporting XML-based markup as JSON which allows it to be losslessly converted back to its original form.

Native XML/XHTML doesn't sit well embedded in JavaScript. When XHTML is stored in script it must be properly encoded as an opaque string. JsonML allows easy manipulation of the markup in script before completely rehydrating back to the original form.

JsonML + Browser-Side Templating (JBST)

JBST is an MVC-style client-side Ajax templating solution which syntactically feels like JavaServer Pages / ASP.NET UserControls. It uses JsonML as the encoding and pure JavaScript as the template language.

Once JBST is compiled to JsonML+JavaScript, it may be combined and compressed with all other JavaScript to produce a lightweight templating system with true separation of data and layout.

See it in action.

Links

"Get to know JsonML"

A good JsonML article was published on IBM developerWorks. The author walks the reader through some good background on Ajax & JSON before delving into a specific tutorial of JsonML usage.

JsonML in JSON Libraries

Several JSON libraries provide built-in support for JsonML & JBST:

XML-to-JsonML Client-Side Proxy

An interesting use of JsonML in an XML to JSON Proxy. The tool enables cross-domain XML service calls without the need for a server-side proxy.

Topics

JsonML + Browser-Side Templating (JBST) is a client-side templating system utilizing JsonML which demonstrates the strengths of templating in the browser. Leveraging a familiar ASP/JSP syntax, it makes building Ajax solutions much easier.

A primary use for JsonML is to send XHTML across the wire to a JSON-aware client (e.g. web browser) and have it easily parse it into DOM elements. JsonML is an ideal format to transmit UI markup via JSON-RPC. It also provides an excellent mechanism for storing UI markup inside of JavaScript.

See how JsonML can help when building UI in Ajax applications. Also, the JsonML filter callback can easily be used to bind behaviors to DOM elements for implementing techniques such as "Progressive Enhancement".

Learn how any arbitrary XML is transformed into JsonML via a simple XSLT.

For an interesting exercise, see how to convert DOM elements to JsonML and back.

Examples

To see JBST in action, play with the live JBST Example.

Other demonstrations give an idea of the expressive power of JsonML. They also demonstrate the power of the JsonML filter callback for binding behaviors to DOM elements.

Downloads

An open source JsonML + Browser-Side Template (JBST) Compiler:
JsonFx.NET for ASP.NET 2.0-3.5
An open source JsonML builder which doesn't modify the native String/Array objects. Requires json2.js:
JsonML2 UI Builder: JsonML2.js (9.05K, uncompressed)
An open source JsonML builder. It is built in the spirit of Douglas Crockford's JavaScript JSON implementation, and requires json.js:
JsonML UI Builder: JsonML.js (8.24K, uncompressed)
An open source JBST template data-binding script:
JBST Data Binder: JsonML_BST.js (6.37K, uncompressed)
An open source transformation which converts any XML-based document into JsonML:
XML-to-JsonML XSLT: JsonML.xslt (6.38K, uncompressed)
An open source script which converts DOM elements back into JsonML:
DOM-to-JsonML Script: JsonML_DOM.js (1.94K, uncompressed)
Open source license

Feedback

Feedback is welcome. If this sounds useful to you, send an email. If you have suggestions which are consistent with the intent here, please feel free to share them.

- Stephen M. McKamey

stephen@jsonml.org

Grammar (BNF)

The following grammar represents how XML-based markup (e.g. XHTML) is encoded into JsonML. As per JSON, whitespace is permitted between tokens.

element
= '[' tag-name ',' attributes ',' element-list ']'
| '[' tag-name ',' attributes ']'
| '[' tag-name ',' element-list ']'
| '[' tag-name ']'
| json-string
;
tag-name
= json-string
;
attributes
= '{' attribute-list '}'
| '{' '}'
;
attribute-list
= attribute ',' attribute-list
| attribute
;
attribute
= attribute-name ':' attribute-value
;
attribute-name
= json-string
;
attribute-value
= json-string
| json-number
| json-boolean
;
element-list
= element ',' element-list
| element
;

Usage Recommendations

Tuple order: [tag-name, attributes, element-list]

Implementors MUST serialize the tag-name of the element before attributes or before any element-list. This is because any child text nodes will be siblings to the tag-name of the element.

Implementors MUST serialize attributes before any child element as it is more natural to finish populating element attributes before moving onto other elements.

XML Namespaces

JsonML supports namespaces the same way that namespaces were handled in XML 1.0. The element name is a concatenation of the namespace prefix, the colon ':' character, and the element local-name.

DOM Quirks

While the process is fairly straight forward to recursively hydrate a DOM element tree from JsonML, there are a number of inconsistencies and quirks to be aware of.

Colorful Table Example

Rendered in DOM:

#5D28D1 Example text here
#AF44EF 127310656
#AAD034  © 

XHTML Markup (516 bytes):

<table class="MyTable" style="background-color:yellow">
<tr>
<td class="MyTD" style="border:1px solid black">
#5D28D1</td>
<td class="MyTD" style="background-color:red">
Example text here</td>
</tr>
<tr>
<td class="MyTD" style="border:1px solid black">
#AF44EF</td>
<td class="MyTD" style="background-color:green">
127310656</td>
</tr>
<tr>
<td class="MyTD" style="border:1px solid black">
#AAD034</td>
<td class="MyTD" style="background-color:blue">
&nbsp;
<span style="background-color:maroon">&copy;</span>
&nbsp;
</td>
</tr>
</table>

JsonML Markup (558 bytes):

["table",
{
"class" : "MyTable",
"style" : "background-color:yellow"
},
["tr",
["td",
{
"class" : "MyTD",
"style" : "border:1px solid black"
},
"#550758"
],
["td",
{
"class" : "MyTD",
"style" : "background-color:red"
},
"Example text here"
]
],
["tr",
["td",
{
"class" : "MyTD",
"style" : "border:1px solid black"
},
"#993101"
],
["td",
{
"class" : "MyTD",
"style" : "background-color:green"
},
"127624015"
]
],
["tr",
["td",
{
"class" : "MyTD",
"style" : "border:1px solid black"
},
"#E33D87"
],
["td",
{
"class" : "MyTD",
"style" : "background-color:blue"
},
"\u00A0",
["span",
{ "style" : "background-color:maroon" },
"\u00A9"
],
"\u00A0"
]
]
]

Bulleted List Example

Rendered in DOM:

XHTML Markup (173 bytes):

<ul>
<li style="color:red">First Item</li>
<li title="Some hover text." style="color:green">
Second Item
</li>
<li><span class="code-example-third">Third</span>
Item</li>
</ul>

JsonML Markup (184 bytes):

["ul",
["li",
{ "style" : "color:red" },
"First Item"
],
["li",
{
"title" : "Some hover text.",
"style" : "color:green"
},
"Second Item"
],
["li",
["span",
{ "class" : "code-example-third" },
"Third"
],
" Item"
]
]