Introducing: Custom Elements Manifest

This page summarizes the projects mentioned and recommended in the original post on dev.to

CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • storybook

    Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

    Using a custom-elements.json file, it would be easy to generate or display demos for your component using tools such as api-viewer-element, or automatically generate Storybook knobs for your components. 11ty plugins could be created to automatically create your documentation sites for you.

  • CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  • webcomponents

    Discontinued Web Components specifications [Moved to: https://github.com/WICG/webcomponents] (by w3c)

    The idea for a web-components.json was first suggested in this GitHub issue on the web components GitHub repository, by Pine from the VS Code team, with the initial goal for IDEs to be able to better support custom elements.

  • custom-elements-manifest

    A file format for describing custom elements

    Custom Elements Manifest is a file format that describes the custom elements in your project. This format will allow tooling and IDEs to give rich information about the custom elements in a given project. A custom-elements.json contains metadata about the custom elements in your project; their properties, methods, attributes, inheritance, slots, CSS Shadow Parts, CSS custom properties, and a modules exports. If you're interested in following the specification of the schema, or contributing to it, you can find the repository here: webcomponents/custom-elements-manifest.

  • api-viewer-element

    API documentation and live playground for Web Components. Based on Custom Elements Manifest format

    Using a custom-elements.json file, it would be easy to generate or display demos for your component using tools such as api-viewer-element, or automatically generate Storybook knobs for your components. 11ty plugins could be created to automatically create your documentation sites for you.

  • eleventy πŸ•šβš‘οΈ

    A simpler site generator. Transforms a directory of templates (of varying types) into HTML.

    Using a custom-elements.json file, it would be easy to generate or display demos for your component using tools such as api-viewer-element, or automatically generate Storybook knobs for your components. 11ty plugins could be created to automatically create your documentation sites for you.

  • elm-get

    Another interesting usecase, inspired by elm-package, is that tooling could be able to detect whether or not the public API of a custom element has changed, based on a snapshot of the current custom-elements.json file to decide the impact of an update, and potentially prevent breaking API change in patch or minor versions.

  • custom-elements-manifest

    Atomico (opt-in via community plugin)

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
  • custom-elements-manifest

    Custom Elements Manifest is a file format that describes custom elements in your project. (by open-wc)

    To get started developing custom plugins, take a look at the cem-plugin-template repository to quickly get you up and running, and take a look at the Authoring Plugins documentation for more in depth information.

  • cem-plugin-template

    Starter repo for developing custom element analyzer plugins

    To get started developing custom plugins, take a look at the cem-plugin-template repository to quickly get you up and running, and take a look at the Authoring Plugins documentation for more in depth information.

  • stencil

    A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

    Stencil (opt-in via CLI flag)

  • shoelace-css

    A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME πŸ‘‡πŸ‘‡πŸ‘‡

    Some component libraries like Fast or Shoelace provide specific instructions on how to integrate with certain frameworks. Automating this integration layer could make development easier for both authors of component libraries, but also for consumers of libraries.

  • open-wc

    Open Web Components: guides, tools and libraries for developing web components.

    It's unlikely that developers will write their custom-elements.json file by hand. So at Open Web Components, we worked hard on a tool that does it for you!

  • catalyst

    Catalyst is a set of patterns and techniques for developing components within a complex application.

    Catalyst (opt-in via CLI flag)

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Use web components for what they’re good at

    8 projects | news.ycombinator.com | 23 Aug 2023
  • Lit - a simple library for building fast, lightweight web components. At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive

    2 projects | /r/javascript | 17 Aug 2022
  • Reactifying Custom Elements using a Custom Elements Manifest

    3 projects | dev.to | 23 Jun 2021
  • Use Stencil / the ionic framework with emberjs [video]

    3 projects | news.ycombinator.com | 29 Jul 2023
  • Recommendation Needed: WebComponent UI Library

    4 projects | /r/WebComponents | 29 Mar 2023

Did you konow that JavaScript is
the 3rd most popular programming language
based on number of metions?