web-component-analyzer
A CLI tool that analyzes web components and generates documentation in multiple formats.
What is web-component-analyzer?
web-component-analyzer is a CLI tool that analyzes web component source code to automatically generate documentation. It extracts properties, attributes, methods, events, slots, CSS custom properties, and CSS shadow parts from both JavaScript and TypeScript components, supporting various web component libraries.
Web component developers and teams using libraries like LitElement, Polymer, or Stencil who need to maintain accurate API documentation for their component libraries.
It automates the tedious process of documenting web components, supports multiple output formats for different use cases, and integrates with JSDoc for enhanced documentation, saving time and reducing errors compared to manual documentation.
Overview
CLI that analyzes web components and emits documentation
Use Cases
Best For
- Generating API documentation for web component libraries
- Creating VSCode IntelliSense data for custom elements
- Automating documentation updates in CI/CD pipelines
- Extracting component metadata for design systems
- Analyzing web components built with LitElement or Polymer
- Producing JSON output for custom tooling or documentation sites
Not Ideal For
- Projects using unsupported web component frameworks like Fast or SkateJS, as library coverage is limited to LitElement, Polymer, Stencil (partial), LWC, and vanilla.
- Teams needing runtime or interactive documentation generation, since the tool relies solely on static analysis of source code.
- Environments where components lack JSDoc annotations, as key features like slots and events depend on manual documentation.
- Small, ad-hoc projects with minimal components, where the CLI setup and JSDoc overhead may outweigh the benefits of automation.
Pros & Cons
Pros
Supports major web component libraries like LitElement, Polymer, and vanilla components, making it versatile for diverse codebases, as highlighted in the README's library list.
Generates documentation in Markdown, JSON, and VSCode custom data formats, catering to needs from readmes to IDE integration, with clear CLI options for each format.
Uses JSDoc comments to document slots, events, and CSS properties, enhancing accuracy where static analysis falls short, with a detailed table of supported tags in the README.
Provides an API to analyze source files or text directly, enabling integration into custom build tools or workflows, as demonstrated in the API section.
Cons
Stencil analysis is only partial, limiting reliability for projects heavily using that framework, as admitted in the README with 'stencil (partial)'.
The JSON output format is unstable and subject to breaking changes, noted in the README as 'for experimental and demo purposes' and actively discussed, which can disrupt tooling integrations.
Effective documentation of slots, events, and CSS properties requires comprehensive JSDoc annotations; without them, the tool may miss critical API elements, adding manual overhead.
Frequently Asked Questions
Related Projects
Custom Elements LocatorChrome extension to find custom elements on a page, and search the catalog for extra information
Web Components CodemodsCodemods for Web Components. Breaking changes? Don't panic :)
BacklightWith collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems
webcomponents.devComponent IDE for web platform developers
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.