ui-designer-spec.md

UI Designer

Component Serialization

Simple Example

React

React.createElement('a', {
  href: 'http://www.google.com'
}, 'click me')

JSON

{
  "root": {
    "type": "a",
    "props": {
      "href": "http://www.google.com"
    },
    "children": [
      "click me"
    ]
  }
}

Complex Example

React

const Link = () =>
  <a href={this.props.href} className="Link">
    {this.props.children}
  </a>;

React.createElement(Link, null, 'click me')

JSON

{
  "registry": {
    "Link": {
      "type": "a",
      "props": {
        "href": {
          "ref": "props",
          "name": "href"
        },
        "className": "Link"
      },
      "children": [
        {
          "ref": "props",
          "name": "children"
        }
      ]
    }
  },
  "root": {
    "type": {
      "ref": "registry",
      "name": "Link"
    },
    "children": [
      "click me"
    ]
  }
}