npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@thereincarnator/html-sketchapp

v2.1.0-11

Published

HTML to Sketch

Downloads

14

Readme

html-sketchapp Build Status npm version

HTML to Sketch export solution.

What it can do?

html-sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors.

Why?

The motivation behind this project was ability to easily share Front-End style guide with our Design team. Although similar project, react-sketchapp, already exists it does require you to:

  • use React,
  • build everything using generic components (<View>, <Text>, <Image>),
  • and keep your styles in JS.

We were unable to quickly work around these limitations, so we created html-sketchapp.

You can learn more about this project from the excellent article "Sketching in the Browser" by @markdalgleish.

Limitations

Comprehensive summary of what is, and what is not supported can be found here, but the TLDR is as follows:

  • pseudoelements are not supported,
  • some CSS properties (e.g. overflow) are not supported or not fully supported,
  • not all types of images are supported (animated gifs, webp),
  • resizing information is not generated,
  • all fonts have to be locally installed.

The good news is that all of those are fixable and that we welcome pull requests ❤️

How does it work?

Ideally, this project should be an, OS independent, NodeJS library that allows to create valid Sketch files. Unfortunately, it's not possible at this point due to Sketch format limitations.

Current solution consists of two parts. First one (html2asketch) runs in a browser (either regular or headless) and creates an almost valid Sketch file (page.asketch.json and document.asketch.json). Second one (asketch2sketch) is a Sketch plugin that takes asketch.json files and imports them into Sketch.

Why two parts? html2asketch and asketch2sketch are built in different technologies and run in different environments. html2asketch is written in JavaScript and runs in a browser where it can easily extract all information from DOM nodes: their position, size, styles and children. Extracted information are then translated into Sketch's document.json and page.json files. Unfortunately, at the moment Sketch file format is not fully readable and some parts can't be easily generated from JavaScript (most notably text styling information which is saved as a binary blob). Additionally, the script running in the browser is limited by CORS and may not be able to download all of the images used on page. That's where we need asketch2sketch which is a Sketch plugin written in cocoascript (JavaScript + Objective-C). It "fixes" .asketch.json files (changes text styling information format, downloads and inlines images) and loads them into the Sketch app.

You can read more about .asketch format in the wiki.

How do I run it?

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. There is no one right way of using html2asketch, but you can start by checking out the two examples that we provide:

  • html-sketchapp-example - minimal script that takes an URL and produces a page.asketch.json file
  • 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.

All .asketch.json files should be loaded to Sketch via the asketch2sketch.sketchplugin plugin.

You can install html-sketchapp from npm:

npm i @brainly/html-sketchapp

You can download ready to use Sketch plugin from the "Releases" section, or build it yourself from the sources:

npm i # install dependencies
npm run build # build the plugin

Projects using html-sketchapp

  • html-sketchapp-cli - "Quickly generate Sketch libraries from HTML documents and living style guides."
  • story2sketch - "Convert Storybook stories into Sketch symbols."

Standing on the shoulders of giants :heart:

This project uses huge bits and pieces from the fantastic react-sketchapp and wouldn't be possible without skpm and information from Sketch-Headers.