@cmp-dev/sketch2json

sketch2json

Get a JSON output out of a buffer of Sketch v43+ data (works both in Node and in the browser)

Combined with the stylish React JSON Tree, you can inspect the Sketch file contents easily:

You can also run this from the command like with the sketchy package.

Installation

npm install --save @cmp-dev/sketch2json

Usage

In Node, you can read a Sketch file from the file system and pass it to sketch2json to get the JSON representation of it's internal data. You can use the file in tests/fixtures/simple.sketch as an example

const fs = require('fs')
const sketch2json = require('@cmp-dev/sketch2json')

fs.readFile(__dirname + '/simple.sketch', (error, data) => {
  sketch2json(data).then(result => console.log(result))
})

The result will be an object structure like:

{
  document: {}, // parsed contents of document.json
  user: {}, // parsed contents of user.json
  meta: {}, // parsed contents of meta.json
  pages: {
    '0F364A54-A488-4D6F-BAA4-F93FB057C5A3': {}, // parsed contents of pages/0F364A54-A488-4D6F-BAA4-F93FB057C5A3.json, and so on for every page file
    ...
  }
}

In the browser

In the browser, it depends on how you read the file. If you get it from a FileReader you will need to make sure to read it as an ArrayBuffer. The implementation in the demo is a little complex but might be of help.

Get a Folktale Task monad instead of a Promise:

const fs = require('fs')
const sketch2json = require('sketch2json')

fs.readFile(__dirname + '/simple.sketch', (error, data) => {
-  sketch2json(data).then(result => console.log(result))
+  sketch2json(data, {task: true}).map(result => console.log(result)).run()
})

What is the structure of the contents of each file?

As far as I know, there is no official documentation yet.

Meanwhile here you can find Flowtype definitions for Sketch 43+ JSON by @darknoon to use as guide.

Related

• sketch-loader Webpack loader for Sketch v43+ files, uses this lib underneath the hood

License

Unlicense