@phun-ky/speccer - npm

SPECCER was originally created to simplify documenting components in a design system, but it can be used to annotate or highlight any HTML element on a webpage. If you need to draw attention to elements, SPECCER is your tool!

If you want to control SPECCER a bit more, you have some options. Apply one of these attributes to the script element for different types of initialization:

In your component examples, use the following attribute. Remember to use the data-speccer="pin-area"-attribute on a parent element to scope the marking.

The lines from the element to the pin is drawn with a svg path and circle, so remember to add the following svg into your document:

from v9.5 you can utilize the pin feature to annotate or highlight the anatomy of an element programaticaly. Here is an example with a click event.

[!NOTE] getComputedStyles are used to get the computed values, so for example, a line-height set to 1.5 will be presented in pixels, like 96px if the font-size is set to 64px.

Leave a Comment