# @iamstarkov/html-sketchapp-cli
> Quickly generate Sketch libraries from HTML documents and living style guides, powered by html-sketchapp
Latest version **0.2.0** (published 2018-03-09) ยท MIT license ยท 0 weekly downloads
## Install
```sh
npm install @iamstarkov/html-sketchapp-cli
pnpm add @iamstarkov/html-sketchapp-cli
yarn add @iamstarkov/html-sketchapp-cli
bun add @iamstarkov/html-sketchapp-cli
```
Provides the command `html-sketchapp`.
## Health
**Score 15/100 (F)** โ status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.2.0 |
| Published | 2018-03-09 |
| First published | 2018-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=7.6 |
| Dependencies | 11 |
| Unpacked size | 312.7 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 636 |
| Author | SEEK |
| Maintainers | iamstarkov |
## Links
- npm: https://www.npmjs.com/package/@iamstarkov/html-sketchapp-cli
- Repository: https://github.com/seek-oss/html-sketchapp-cli
- Homepage: https://github.com/seek-oss/html-sketchapp-cli#readme
- Issues: https://github.com/seek-oss/html-sketchapp-cli/issues
- npm.io page: https://npm.io/package/@iamstarkov/html-sketchapp-cli
## Dependencies (11)
- [opn](https://npm.io/package/opn.md) ^5.1.0
- [serve](https://npm.io/package/serve.md) ^6.4.9
- [yargs](https://npm.io/package/yargs.md) ^11.0.0
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [find-up](https://npm.io/package/find-up.md) ^2.1.0
- [wait-on](https://npm.io/package/wait-on.md) ^2.1.0
- [get-port](https://npm.io/package/get-port.md) ^3.2.0
- [url-join](https://npm.io/package/url-join.md) ^4.0.0
- [puppeteer](https://npm.io/package/puppeteer.md) ^1.0.0
- [es6-promisify](https://npm.io/package/es6-promisify.md) ^6.0.0
- [@iamstarkov/html-sketchapp](https://npm.io/package/@iamstarkov/html-sketchapp.md) ^1.0.0
## Recent versions
- 0.2.0 (latest) โ 2018-03-09
## README
[](http://travis-ci.org/seek-oss/html-sketchapp-cli) [](https://www.npmjs.com/package/html-sketchapp-cli) [](https://david-dm.org/seek-oss/html-sketchapp-cli) [](https://david-dm.org/seek-oss/html-sketchapp-cli?type=dev) [](https://github.com/semantic-release/semantic-release) [](http://commitizen.github.io/cz-cli/)
# html-sketchapp-cli
Quickly generate [Sketch libraries](https://www.sketchapp.com/docs/libraries/) from HTML documents and living style guides, powered by [html-sketchapp](https://github.com/brainly/html-sketchapp) and [Puppeteer](https://github.com/GoogleChrome/puppeteer).
Add some simple markup to your page, for example:
```html
...
...
...
```
Then run the `html-sketchapp` command to generate JSON files in html-sketchapp's ["Almost Sketch"](https://github.com/brainly/html-sketchapp#how-does-it-work) format, ready to be [imported into Sketch](#importing-into-sketch).
```bash
$ html-sketchapp --file sketch.html --out-dir dist/sketch
```
## Install
```bash
$ npm install --global html-sketchapp-cli
```
Then, install the Sketch plugin.
```bash
$ html-sketchapp install
```
## Page Setup
Before using this tool, you'll need to add some hooks to your page so that everything can be selected, extracted and named correctly.
Annotate symbols with `data-sketch-symbol` attributes. Note that forward slashes will create nested menu items within Sketch.
```html
...
```
Annotate all text styles with `data-sketch-text` attributes.
```html
...
```
Annotate all colors with `data-sketch-color` attributes. Note that colors are unnamed in Sketch, so only the hex value needs to be provided.
```html
...
```
For a real world example, check out [SEEK Style Guide's sketch exports page](http://seek-oss.github.io/seek-style-guide/sketch-exports) and the corresponding [source code](https://github.com/seek-oss/seek-style-guide/blob/master/docs/src/components/SketchExports/SketchExports.js).
## CLI Usage
### Importing from a local file
If your page is self-contained, you can import from a local HTML file.
```bash
$ html-sketchapp --file sketch.html --out-dir dist
```
### Importing from a local static web server
If your page needs to be hosted on a static web server, you can provide a local directory to serve and a root relative URL to import from.
```bash
$ html-sketchapp --serve docs --url /sketch --out-dir dist
```
### Importing from existing web server
If your page is hosted on an existing web server, you can provide an absolute URL.
```bash
$ html-sketchapp --url http://localhost:3000 --out-dir dist
```
### Viewport sizes and responsive design
If you provide a set of one or more named viewports, every symbol and text style will be rendered for each screen size.
```bash
$ html-sketchapp --viewports.Desktop 1024x768 --viewports.Mobile 320x568 --file sketch.html --out-dir dist
```
If multiple screen sizes are provided, the viewport name will be being appended to all symbol and text style names. For example, `Button/Primary` will be exported as `Button/Primary/Desktop` and `Button/Primary/Mobile`.
### Puppeteer args
If you need to provide command line arguments to the browser instance via [Puppeteer](https://github.com/GoogleChrome/puppeteer), you can provide the `puppeteer-args` option.
Since Puppeteer uses [Chromium](https://www.chromium.org/Home) internally, you can refer to the [List of Chromium Command Line Switches](https://peter.sh/experiments/chromium-command-line-switches) for available options.
For example, if you'd like to disable the browser sandbox:
```bash
$ html-sketchapp --puppeteer-args="--no-sandbox --disable-setuid-sandbox" --file sketch.html --out-dir dist
```
*Note: Because Puppeteer args are prefixed with hyphens, you **must** use an equals sign and quotes when providing this option via the command line (as seen above).*
### Chromium executable
If you'd like to override the Chromium used by Puppeteer, you can provide a path to the executable with the `puppeteer-executable-path` option.
```bash
$ html-sketchapp --puppeteer-executable-path google-chrome-unstable --file sketch.html --out-dir dist
```
### Config file
All options can be provided via an `html-sketchapp.config.js` file.
```js
module.exports = {
file: 'sketch.html',
outDir: 'dist/sketch',
viewports: {
Desktop: '1024x768',
Mobile: '320x568'
},
puppeteerArgs: '--no-sandbox --disable-setuid-sandbox',
puppeteerExecutablePath: 'google-chrome-unstable'
};
```
You can provide an alternate config file path with the `--config` option.
```bash
$ html-sketchapp --config example.config.js
```
## Importing into Sketch
Once this command has successfully run, the following files will be generated in the output directory.
- `document.asketch.json`
- `page.asketch.json`
These need to be imported into Sketch via html-sketchapp's corresponding Sketch plugin. To ease the install process, you can run the following command.
```bash
$ html-sketchapp install
```
Then, open a new Sketch document and, from the menu, select `Plugins > From *Almost* Sketch to Sketch`. In the file picker, select both `document.asketch.json` and `page.asketch.json`, and click `Choose`.
Congratulations! You should now have your symbols, text styles and document colors available within Sketch! ๐๐
## Contributing
Refer to [CONTRIBUTING.md](./CONTRIBUTING.md).
## License
MIT.
---
_Source: https://npm.io/package/@iamstarkov/html-sketchapp-cli ยท Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._