Skip to content
TypeScript types for the Sketch File Format
JavaScript TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode
.yarn
scripts
.gitignore
.nvmrc
.prettierignore
.prettierrc
.yarnrc
CHANGELOG.md
LICENSE.md
README.md
commitlint.config.js
index.ts
jest.config.js
package.json
tsconfig.json
yarn.lock

README.md

Sketch File Format TS

TypeScript types for the Sketch File Format

Overview

This repo contains TypeScript types automatically generated from the Sketch File Format JSON Schemas.

Types are maintained and exported for each Sketch File Format major version. See usage instructions below for more information.

Use cases

  • Strongly type objects representing Sketch documents, or fragments of Sketch documents in TypeScript projects

Related projects

Usage

Add the npm module using npm or yarn

npm install @sketch-hq/sketch-file-format-ts

Types for the latest file format are on the default export

import FileFormat from '@sketch-hq/sketch-file-format'

Types for historical file formats are accessible via named exports

import {
  FileFormat1,
  FileFormat2,
  FileFormat3,
} from '@sketch-hq/sketch-file-format'

Read about how file format versions map to Sketch document versions here

Examples

Create a typed layer blur object

import FileFormat from '@sketch-hq/sketch-file-format'

const blur: FileFormat.Blur = {
  _class: 'blur',
  isEnabled: false,
  center: '{0.5, 0.5}',
  motionAngle: 0,
  radius: 10,
  saturation: 1,
  type: FileFormat.BlurType.Gaussian,
}

Layer types can be narrowed using discriminated unions

import FileFormat from '@sketch-hq/sketch-file-format'

const mapLayers = (layers: FileFormat.AnyLayer[]) => {
  return layers.map(layer => {
    switch (layer._class) {
      case 'bitmap':
      // type narrowed to Bitmap
      case 'star':
      // type narrowed to Star
    }
  })
}

Work with representations of Sketch files that could have a range of document versions

import {
  FileFormat1,
  FileFormat2,
  FileFormat3,
} from '@sketch-hq/sketch-file-format'

const processDocumentContents = (
  contents: FileFormat1.Contents | FileFormat2.Contents | FileFormat3.Contents,
) => {
  if (contents.meta.version === 119) {
    // type narrowed to file format v1, i.e. Sketch documents with version 119
  } else {
    // type narrowed to a union of document versions 120 and 121
  }
}

Scripts

Script Description
yarn build Builds the project into the dist folder
yarn test Build script unit tests
yarn format-check Checks the repo with Prettier
yarn release Tags the repo and updates the changelog and semver automatically based on commit history. You'll still need to push the changes and yarn publish manually afterwards
You can’t perform that action at this time.