What is SPECCER?
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.
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 tags for 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.
Use Cases
- Documentation
Use SPECCER to bring your component documentation to a professional level. Highlight, spec, and really pin down the parts of each component. It works great with live documentation, and used with Gatsby and Storybook.
- Overlay for editors
You can use SPECCER as a tool to highlight things in the web interface of any editor you create, helping the user.
- As a helpful tool to reference features/Product tour
Use SPECCER to reference parts of your website to help and assist your users.
Developer Experience
SPECCER is a zero-dependency package, served as a package through npm or CDNs like UNPKG, or in your own files.
It is Open Source, and easy to use.
Performance
SPECCER is created with performance in mind, zero dependency, low carbon footprint and fast to load.