Show HN: Mark 1.0, a notation that unifies JSON, HTML, JSX, XML, YAML, and more

3 months ago 2

Mark is a unified notation for both object and markup data, combining the best of JSON, HTML, and XML with a clean syntax and succinct data model.

Open Source JS Friendly Cross Platform

<form // element with name 'form' <div class:'form-group' // nested child element <label for:email // 'for' and its value, both unquoted "Email address:" // text needs to be double quoted > <input type:email, id:email> // element without child > <div class:'form-group' // 'form-group' is a quoted symbol <label for:pwd; "Password"> // pwd is an unquoted symbol <input type:password, id:pwd> // attrs separated by comma, like JSON > <button class:[btn,'btn-info'] // attribute with complex values "Submit" // comment like in JS! > >

Clean Syntax

Enjoy a fully-typed data model with clean, readable syntax that's more human-friendly than JSON or XML.

Mixed Content Support

Built-in support for mixed content, making it perfect for document-oriented data that's awkward in JSON.

Generic & Extensible

Unlike HTML's specialized format, Mark is generic and extensible for any data representation needs.

Strongly Typed

Every Mark element has a name, which can bind to a type. It also has more built-in types than JSON.

No Whitespace Ambiguity

Text objects are explicitly quoted, so Mark can be minified or prettified without changing content.

JavaScript-Friendly

Maps directly to plain JavaScript objects, making it ideal for web and Node.js environments.

Mark Data Type Hierarchy

Datatype Hierarchy

Mark adds a few new data types to JSON: symbol, datetime, binary, list and element, well covering all the commonly used built-in datatypes in JS.

Element

Mark element = name + map + array.
It maps to just one plain JavaScript object, containing both named and indexed properties. Much more compact and efficient than other JSON-based DOM models.

{ "type": "form", "children": [ { "type": "div", "class": "form-group", "children": [ { "type": "label", "for": "email", "children": ["Email address:"] }, { "type": "input", "type": "email", "id": "email" } ] } ] }

<form>  <div class="form-group"> <label for="email">Email address:</label> <input type="email" id="email"> </div> <div class="form-group"> <label for="pwd">Password</label> <input type="password" id="pwd"> </div> <button class="btn btn-info">Submit</button> </form>

<form>  <div class="form-group"> <label for="email">Email address:</label> <input type="email" id="email"/> </div> <div class="form-group"> <label for="pwd">Password</label> <input type="password" id="pwd"/> </div> <button class="btn btn-info">Submit</button> </form>

Mark Notation

The most salient syntax feature of Mark is the introduction of Mark element.

It is a JSON object extended with a type name and a list of content items, similar to element in HTML and XML. It also allows complex, typed data for its attributes and content.

Mark vs JSON

Mark advantages over JSON:

Additional scalar types: symbol, decimal, datetime, binary
Mark elements have type names, unlike anonymous JSON objects
Built-in mixed-content support for document-oriented data
Syntax enhancements: comments, unquoted names, cleaner structure
More compact representation of hierarchical data

Mark vs HTML

Mark advantages over HTML:

Generic data format vs. specialized web content format
No whitespace ambiguity - text objects are explicitly quoted
Complex attribute values supported (like JSON)
Clean, unambiguous syntax vs. HTML5 parsing complexity
Maps to plain JavaScript objects for easy processing vs. complex DOM APIs

Mark vs XML

Mark advantages over XML:

Complex objects as attribute values vs. string-only XML attributes
Much cleaner syntax without verbose closing tags
No whitespace ambiguity issues
Fully-typed data model vs. semi-typed XML
No legacy baggage like DTD or schema complexity
Direct mapping to JavaScript objects vs. complex DOM APIs

npm install mark-js --save

const Mark = require('mark-js'); var obj = Mark.parse(`<div <span "Hello World!">>`); console.log("Greeting from Mark: " + Mark.stringify(obj));

Syntax Specification

Complete syntax reference with examples and best practices.

Read the spec →

API Reference

Detailed API documentation for all mark.js functions and methods.

View API docs →

FAQ

Frequently asked questions about Mark Notation and its usage.

Read FAQ →

Examples

Live examples and interactive demonstrations of Mark features.

Try examples →

Planned Enhancements

1.0 release just means whatever is released in this version will receive backward compatible support in the foreseeable future like the ever-green HTML.

And some of the planned further enhancements include:

Namespace support
ID and IDREF support

Building the Ecosystem

For a new notation to be widely adopted, just defining the syntax and data model is not enough. It needs languages, tools and eco-system to work with it.

Thus a new project, Lambda Script, has been started to develop a general-purpose, pure functional language to validate, query, transform, and present data stored in Mark format.

Read Entire Article