Speccer was originally created to make it easier to document components in a design system, but you can use it for whatever you like, whenever you need to highlight any element in your web projects.
With speccer, you can highlight any element on a web page or in documentation with pins, markers, arrows, and more. This can be useful for a variety of purposes, such as:
- Showcasing the different parts of a component or design system
- Documenting how to use a particular element or feature
- Drawing attention to important information
- Creating interactive tutorials or demos
Speccer is incredibly easy to use. Simply add the
data-speccer (or other tagsf or
other features) attribute to any element you want to highlight,
and speccer will do the rest. You can also customize the look and
feel of speccer to match your own branding or style guide.
See It in ActionView Demo
Easily display padding and margin for any element in your projects.
Measure and highlight the width and height of elements with various placement options.
Pin elements to the outline of an element to showcase its structure.
Shows the typography of a given element.
Mark elements to reference them.
- Zero dependencies
- Open source
- Easy to use
- Highly customizable
- Supports a variety of highlight types, including pins, markers, arrows, and more
- Can be used on web pages and in documentation
- 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
Ready to enhance your documentation and web projects? Follow these simple steps to get started with speccer:
- Install speccer via npm:
- Choose your preferred integration method, whether it's Typescript, ESM, Script, or React.
- Customize the styling to match your project's design.
npm i @phun-ky/speccer
It is always up to date
Speccer is always up to date, ensured to you by the author!
Want some fancy specifications, measurement or pins to your example components in your styleguide/component library? Use speccer! https://t.co/sd6OaTOAUL #frontend #designguide #styleguide #ux #documentation pic.twitter.com/ncotWGm2HL— Alexander V. R-H (@phun_ky) November 16, 2018
For a detailed understanding of speccer's API, refer to the API Documentation.
Speccer offers flexibility in styling. You can customize its look and feel using CSS variables or apply CSS overrides to match your project's design preferences.