Differences between .asketch and .sketch

There are three main differences between .asketch and .sketch formats:

File format and structure

.sketch files are basically ZIP files with most of the interesting information inside document.json and page/*.json files. Additionally, there is images/ folder with raster images.

.asketch files are standalone json files that try to follow Sketch's document.json and page.json format. Zipping those files seems unnecessary at this point.

Text information

.asketch

Uses readable format to store text info.

{
  "_class": "text",
  "style": {
    "color": "rgb(0, 0, 0)",
    "fontSize": 16,
    "fontFamily": "Times New Roman",
    "fontWeight": 400,
    "textTransform": "none",
    "textDecoration": "none",
    "textAlign": "start"
  },
  "text": "some happy text",
  …
}

.sketch 😱

Uses a binary blob.

{
    "_class": "text",
    "style": {
        "_class": "style",
        "endDecorationType": 0,
        "miterLimit": 10,
        "startDecorationType": 0
    },
    "attributedString": {
        "_class": "MSAttributedString",
        "archivedAttributedString": {
            "_archive": "YnBsaXN0MDDUAQIDBAUGa2xYJHZlcnNpb25YJG9iamVjdHNZJGFyY2hpdmVyVCR0b3ASAAGGoK8QHQcIDxAiIyQlJicoNDU2Nzg5OkBETE1OT1BTV2NnVSRudWxs0wkKCwwNDlhOU1N0cmluZ1YkY2xhc3NcTlNBdHRyaWJ1dGVzgAKAHIADbxAUAKkAIAAyADAAMQA4ACAAQgBvAGgAZQBtAGkAYQBuACAAQgAuAFYALtMREgoTGiFXTlMua2V5c1pOUy5vYmplY3RzphQVFhcYGYAEgAWABoAHgAiACaYbHB0cHCCACoAPgBKAD4APgBqAEV8QKk1TQXR0cmlidXRlZFN0cmluZ0NvbG9yRGljdGlvbmFyeUF0dHJpYnV0ZV8QD05TU3RyaWtldGhyb3VnaF8QH01TQXR0cmlidXRlZFN0cmluZ0ZvbnRBdHRyaWJ1dGVfEChNU0F0dHJpYnV0ZWRTdHJpbmdUZXh0VHJhbnNmb3JtQXR0cmlidXRlW05TVW5kZXJsaW5lXxAQTlNQYXJhZ3JhcGhTdHlsZdMREgopLiGkKissLYALgAyADYAOpBwwHByAD4AQgA+AD4ARU3JlZFVhbHBoYVRibHVlVWdyZWVuIwAAAAAAAAAAIz\/k1NTU1NTV0js8PT5aJGNsYXNzbmFtZVgkY2xhc3Nlc1xOU0RpY3Rpb25hcnmiPT9YTlNPYmplY3TSCkFCQ18QGk5TRm9udERlc2NyaXB0b3JBdHRyaWJ1dGVzgBmAE9MREgpFSEuiRkeAFIAVoklKgBaAF4AYXxAYTlNDVEZvbnRVSVVzYWdlQXR0cmlidXRlXxATTlNGb250U2l6ZUF0dHJpYnV0ZV8QEkNURm9udFJlZ3VsYXJVc2FnZSNAKgAAAAAAANI7PFFSXxATTlNNdXRhYmxlRGljdGlvbmFyeaNRPT\/SOzxUVV8QEE5TRm9udERlc2NyaXB0b3KiVj9fEBBOU0ZvbnREZXNjcmlwdG9y1wpYWVpbXF1eX2BhYmJhWk5TVGFiU3RvcHNfEBROU0xpbmVIZWlnaHRNdWx0aXBsZV8QH05TQWxsb3dzVGlnaHRlbmluZ0ZvclRydW5jYXRpb25fEA9OU01heExpbmVIZWlnaHRfEA9OU01pbkxpbmVIZWlnaHRbTlNBbGlnbm1lbnSAG4AAIz\/wAAAAAAAAEAEjQDQAAAAAAADSOzxkZV8QF05TTXV0YWJsZVBhcmFncmFwaFN0eWxlo2RmP18QEE5TUGFyYWdyYXBoU3R5bGXSOzxoaV8QEk5TQXR0cmlidXRlZFN0cmluZ6JqP18QEk5TQXR0cmlidXRlZFN0cmluZ18QD05TS2V5ZWRBcmNoaXZlctFtblRyb290gAEACAARABoAIwAtADIANwBXAF0AZABtAHQAgQCDAIUAhwCyALkAwQDMANMA1QDXANkA2wDdAN8A5gDoAOoA7ADuAPAA8gD0ASEBMwFVAYABjAGfAaYBqwGtAa8BsQGzAbgBugG8Ab4BwAHCAcYBzAHRAdcB4AHpAe4B+QICAg8CEgIbAiACPQI\/AkECSAJLAk0CTwJSAlQCVgJYAnMCiQKeAqcCrALCAsYCywLeAuEC9AMDAw4DJQNHA1kDawN3A3kDewOEA4YDjwOUA64DsgPFA8oD3wPiA\/cECQQMBBEAAAAAAAACAQAAAAAAAABvAAAAAAAAAAAAAAAAAAAEEw=="
        }
    },
…
}

⚠️ No longer true! See https://github.com/brainly/html-sketchapp/issues/99

Images

Getting images while running inside of a browser is not always possible (CORS), but also base64'ing big images would make those .asketch files huge and unreadable.

.asketch

Supports external images.

{
  "_class": "fill",
  "image": {
    "_class": "MSJSONOriginalDataReference",
    "_ref_class": "MSImageData",
    "_ref": "images/haribo",
    "url": "https://example.com/external.jpg"
  },
…
}

.sketch

Supports only internal images (coming from the images/ folder).

{
  "_class": "fill",
  "image": {
    "_class": "MSJSONFileReference",
    "_ref_class": "MSImageData",
    "_ref": "images\/857a890fb02a5d3a8b8b400b0d51b6f6f25a12c1"
  },
…
}

SVG

Translating SVG into Sketch's format in JS is possible, but would require a lot of work. html-sketchapp takes a shortcut and allows SVG strings (that are later imported by SVGImporter inside of Sketch plugin).

.asketch

Supports SVG strings.

{
  "_class": "svg",
  "rawSVGString": "<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 200 200\"><circle class=\"b\" cx=\"6.03\" cy=\"5.95\" r=\"2\" style=\"cx: 6.03px; cy: 5.95px; r: 2px; fill: rgb(2, 10, 26); font-family: &quot;Times New Roman&quot;;\"></circle>…</svg>",
  "width": 133.75,
  "height": 133.1669921875,
  "x": 41.583335876464844,
  "y": 4723.47900390625
}

.sketch

Stores vector images as shapePaths, curvePoints and paths.

{
  "_class": "path",
  …
  "points": [
    {
      "_class": "curvePoint",
      "cornerRadius": 0,
      "curveFrom": "{1, 0.22222222268196964}",
      "curveMode": 3,
      "curveTo": "{1, 0.53025302765198934}",
      "hasCurveFrom": true,
      "hasCurveTo": true,
      "point": "{1, 0.50385038540200988}"
    },
    …
  ]
}