Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
html2sketch
Advanced tools
English | 简体中文
A module that transform HTML into Sketch JSON
npm i html2sketch --save
or
yarn add html2sketch
html2sketch
includes three methods nodeToLayer
、 nodeToGroup
和 nodeToSymbol
。
this method transforms a DOM node into Sketch Objects without processing children of nodes
import { nodeToLayer } from 'html2sketch';
const fn = async () => {
// 1. get DOM node
const node = document.getElementById('id');
// 2. run nodeToLayer method
const layer = await nodeToLayer(node);
// 3. generate Sketch JSON
const sketchJSON = layer.toSketchJSON();
return sketchJSON;
};
fn().then((json) => {
console.log(json);
});
This method transforms a DOM node and its children into a Sketch Group Object
import { nodeToGroup } from 'html2sketch';
const fn = async () => {
// 1. get DOM node
const node = document.getElementById('id');
// 2. run nodeToGroup method
const group = await nodeToGroup(node);
// 3. generate Sketch JSON
const sketchJSON = group.toSketchJSON();
return sketchJSON;
};
fn().then((json) => {
console.log(json);
});
This method transforms a DOM node and its children into a Sketch Symbol Object
import { nodeToSymbol } from 'html2sketch';
const fn = async () => {
// 1. get DOM node
const node = document.getElementById('id');
// 2. run nodeToSymbol method
const symbol = await nodeToSymbol(node);
// 3. generate Sketch JSON
const sketchJSON = symbol.toSketchJSON();
return sketchJSON;
};
fn().then((json) => {
console.log(json);
});
the generated Sketch JSON strictly match with Sketch File Format Schema, So you can just synthesize the JSON according to the Sketch File Format into a '. Sketch 'file .
So the Sketch file can be obtained simply by synthesizing the corresponding JSON into a '. Sketch 'file according to the Sketch file specification
There is some community modules of synthesizing:
If you want to use the JSON object directly in sketch, you can use the Sketch JSON Plugin,which will allow you just paste JSON into Sketch.
The main application of this module focus on C2D (Code to Design).This module mainly refers to html-sketchapp.
html-sketchapp can directly transforms any HTML page into a Sketch document without framework limit, but there are significant limitations:
Not supported pseudoelements, overflow,some kind of gradient, transform, and other properties: As a result, many web pages transformed by html-sketchapp are not visually restored;
Although html-sketchapp don't dependent on the framework, it fully dependent on the Sketch App: Because JSON structure generated by html-sketchapp does not strictly match Sketch File Format ,it can't generate sketch document directly.What's more,it also lead to lacking of the ability to integrate on the server side.
html-sketchapp developed by JS ,lacking perfect type definition, the project architecture is not reasonable, the secondary development is difficult
html2sketch makes a lot of optimization on the basis of html-sketchapp, and takes the essence to discard the dross:
html2sketch supports most web page styles which is not supported by html-sketchapp, such as pseudo-elements,radial gradient, text overflows, and so on.This is important for transforming result.Perhaps reproducing 80% using html-sketchapp, but 95% or more using html2sketch. Of course, the parsing capability of the module also needs to be improved step by step by covering the parsing scene. If you encounter any incorrect parsing situation under the real word, please be sure to submit an issue, I will solve it as soon as possible. The styles supported by this module are currently available on 解析用例.
The biggest difference at the functional level of html2sketch is its decoupling from the Sketch App.The relevant parsing capabilities (Svg, image, font, and so on) are all built from scratch.
Thanks to the JSON generated by html2Sketch will strictly match Sketch File Format , you can directly synthesize it into a legal .sketch
file by using sketch-json-api or node-sketch . Therefore,based on html2sketch, it is possible to parse a web page and generate the Sketch file using any normal server.
Developed with Typescript makes it a good experience for both consumers and producers.Whether it's in the organization of the project, code comments, or unit testing, there are guarantees.
Refer to Develop Guidelines
FAQs
parser HTML to Sketch
The npm package html2sketch receives a total of 13,878 weekly downloads. As such, html2sketch popularity was classified as popular.
We found that html2sketch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.