SPECCERA tool to annotate or highlight elements

Speccer is a zero dependency JavaScript package to highlight elements on web pages and in documentation. It's easy to use and highly customizable, making it the perfect tool for developers, designers, and content creators alike.

Get started

View on GitHub

View demo

Element Spacing

Easily display padding and margin for any element in your projects.

Element Dimensions

Measure and highlight the width and height of elements with various placement options.

Highlight Anatomy

Pin elements to the outline of an element to showcase its structure.

Highlight Typography

Shows the typography of a given element.

Highlight Elements

Mark elements to reference them.

Accessibility notation

Annotate accessibility elements.

Used By

Other features

Zero dependencies
Open source
Easy to use
Highly customizable
Supports a variety of highlight types, including pins, markers, text and more
Can be used on web pages and in documentation

Benefits

Improve the clarity and readability of your web pages and documentation
Make it easier for users to understand how to use your products and services
Create more engaging and interactive tutorials and demos

Get Started

Ready to enhance your documentation and web projects? Follow these simple steps to get started with SPECCER:

Install SPECCER via npm: npm i @phun-ky/speccer
Choose your preferred integration method, whether it's Typescript, ESM, Script, or React.
Customize the styling to match your project's design.