{"id":13394226,"url":"https://github.com/html-sketchapp/html-sketchapp","last_synced_at":"2025-05-15T16:05:23.825Z","repository":{"id":40904261,"uuid":"100018043","full_name":"html-sketchapp/html-sketchapp","owner":"html-sketchapp","description":"HTML to Sketch export solution","archived":false,"fork":false,"pushed_at":"2022-12-07T17:33:26.000Z","size":2336,"stargazers_count":1852,"open_issues_count":59,"forks_count":115,"subscribers_count":66,"default_branch":"master","last_synced_at":"2025-03-31T20:08:20.869Z","etag":null,"topics":["design-systems","html","html-sketchapp","sketch","sketch-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/html-sketchapp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-11T09:53:20.000Z","updated_at":"2025-03-20T08:57:05.000Z","dependencies_parsed_at":"2023-01-24T19:33:06.376Z","dependency_job_id":null,"html_url":"https://github.com/html-sketchapp/html-sketchapp","commit_stats":null,"previous_names":["brainly/html-sketchapp"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-sketchapp%2Fhtml-sketchapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-sketchapp%2Fhtml-sketchapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-sketchapp%2Fhtml-sketchapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-sketchapp%2Fhtml-sketchapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/html-sketchapp","download_url":"https://codeload.github.com/html-sketchapp/html-sketchapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730069,"owners_count":20986404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-systems","html","html-sketchapp","sketch","sketch-plugin"],"created_at":"2024-07-30T17:01:13.086Z","updated_at":"2025-04-07T21:13:34.038Z","avatar_url":"https://github.com/html-sketchapp.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# html-sketchapp [](https://travis-ci.org/html-sketchapp/html-sketchapp) [](https://www.npmjs.com/package/@brainly/html-sketchapp) [](https://github.com/brainly/html-sketchapp/blob/master/LICENSE.md) [](https://www.npmjs.com/package/@brainly/html-sketchapp)\n\nHTML to Sketch export solution.\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg alt=\"html-sketchapp\" src=\"https://i.imgur.com/TeMMW8b.png\" height=\"200\" /\u003e\n\u003c/div\u003e\n\n## What it can do?\n\nhtml-sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors.\n\n\u003cimg src=\"https://i.imgur.com/yPjMwFU.png\" width=\"100%\" /\u003e\n\n## Why?\n\nThe motivation behind this project was ability to easily share Front-End style guide with our Design team. Although similar project, [react-sketchapp](https://github.com/airbnb/react-sketchapp), already exists it does require you to:\n\n- use React,\n- build everything using generic components (`\u003cView\u003e`, `\u003cText\u003e`, `\u003cImage\u003e`),\n- and keep your styles in JS.\n\nWe were unable to quickly work around these limitations, so we created html-sketchapp.\n\nYou can learn more about this project from:\n- [our wiki](https://github.com/html-sketchapp/html-sketchapp/wiki),\n- and the excellent article [\"Sketching in the Browser\"](https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526) by @markdalgleish.\n\n## Limitations\n\nComprehensive summary of what is, and what is not supported can be found [here](https://github.com/html-sketchapp/html-sketchapp/wiki/What's-supported%3F), but the TLDR is as follows:\n\n- pseudoelements are not supported,\n- some CSS properties (e.g. overflow) are not supported or not fully supported,\n- not all types of images are supported (animated gifs, webp),\n- resizing information is not generated,\n- all fonts have to be locally installed.\n\nThe good news is that all of those are fixable and that we welcome pull requests ❤️\n\n## How do I run it?\n\n### Install html-sketchapp\n\nYou can get stable version of html-sketchapp from NPM.\n\n```sh\nnpm i @brainly/html-sketchapp\n```\n\n### Create .asketch files\n\n`html2asketch` is a library that you can use to create a script that extracts specific parts of your website and saves them as layers, shared text styles, document colors and symbols. Your script then can be run in a regular or a headless browser.\n\nThere is no one right way of using `html2asketch`, but you can start by checking out the [\"Usage Examples\"](https://github.com/html-sketchapp/html-sketchapp/wiki/Usage-Examples) section of the wiki or the two example projects that we provide:\n\n- [html-sketchapp-example](https://github.com/html-sketchapp/html-sketchapp-example) - minimal script that takes an URL and produces a `page.asketch.json` file\n- [html-sketchapp-style-guide](https://github.com/brainly/html-sketchapp-style-guide) - script that takes parts of the Brainly style-guide and exports them as Sketch symbols, shared text styles and document colors. This script produces `document.asketch.json` and `page.asketch.json`.\n\n*If you are wondering what are, and why we need `.asketch` files, plese see our [wiki](https://github.com/html-sketchapp/html-sketchapp/wiki/How-does-it-work%3F).*\n\n### Import .asketch files to Sketch\n\nAll `.asketch.json` files should be loaded to Sketch via the `asketch2sketch.sketchplugin` plugin.\n\n\u003cimg src=\"https://i.imgur.com/9eDm6NQ.png\" width=\"450\" alt=\"Installing Sketch plugin\" title=\"Installing Sketch plugin\" /\u003e\n\nYou can download ready to use Sketch plugin from the [\"Releases\"](https://github.com/html-sketchapp/html-sketchapp/releases/latest) section, or build it yourself from the sources:\n\n```\nnpm i # install dependencies\nnpm run build # build the plugin\n```\n\n## Projects using html-sketchapp\n\n- [html-sketchapp-cli](https://github.com/seek-oss/html-sketchapp-cli) - \"Quickly generate Sketch libraries from HTML documents and living style guides.\"\n- [story2sketch](https://github.com/chrisvxd/story2sketch) - \"Convert Storybook stories into Sketch symbols.\"\n- [UIengine](https://github.com/dennisreimann/uiengine) - \"Workbench for UI-driven development.\"\n- [Alva](https://github.com/meetalva/alva) - \"Alva is a radically new design tool that enables cross-functional teams to design digital products\"\n- [FAST-DNA](https://github.com/Microsoft/fast-dna) - \"A set of tooling, resources, and components used to accelerate building Web sites and applications.\"\n- [HTML to Sketch](https://kimdal-hyeong.github.io/html-to-sketch-electron/download-analyst/) - \"You can draw a website in an open sketch window.\"\n\n## Standing on the shoulders of giants :heart:\n\nThis project uses huge bits and pieces from the fantastic [react-sketchapp](https://github.com/airbnb/react-sketchapp) and wouldn't be possible without [skpm](https://github.com/skpm/skpm) and information from [Sketch-Headers](https://github.com/abynim/Sketch-Headers).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtml-sketchapp%2Fhtml-sketchapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtml-sketchapp%2Fhtml-sketchapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtml-sketchapp%2Fhtml-sketchapp/lists"}