{"id":15172184,"url":"https://github.com/stencil-community/stencil-web-types","last_synced_at":"2026-03-12T02:27:34.641Z","repository":{"id":234260714,"uuid":"779008605","full_name":"stencil-community/stencil-web-types","owner":"stencil-community","description":"Better Intellisense in JetBrains IDEs for StencilJS projects","archived":false,"fork":false,"pushed_at":"2026-03-04T19:16:40.000Z","size":1141,"stargazers_count":9,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-05T01:35:25.602Z","etag":null,"topics":["html","intellij","jetbrains","stencil","stenciljs","vue","web-types","webstorm"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stencil-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-03-28T21:13:56.000Z","updated_at":"2026-03-04T19:17:11.000Z","dependencies_parsed_at":"2024-05-17T03:26:33.392Z","dependency_job_id":"4a4908a8-d7eb-4a08-ab71-5a7470b7f9a3","html_url":"https://github.com/stencil-community/stencil-web-types","commit_stats":null,"previous_names":["stencil-community/stencil-web-types"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/stencil-community/stencil-web-types","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-web-types","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-web-types/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-web-types/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-web-types/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stencil-community","download_url":"https://codeload.github.com/stencil-community/stencil-web-types/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-web-types/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30410356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T00:40:14.898Z","status":"ssl_error","status_checked_at":"2026-03-12T00:40:08.439Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","intellij","jetbrains","stencil","stenciljs","vue","web-types","webstorm"],"created_at":"2024-09-27T09:42:03.400Z","updated_at":"2026-03-12T02:27:34.577Z","avatar_url":"https://github.com/stencil-community.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Community"],"readme":"# Stencil Web Types Output Target\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@stencil-community/web-types-output-target\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@stencil-community/web-types-output-target.svg\" alt=\"The npm package version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/ionic-team/stencil/blob/main/LICENSE.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-yellow.svg\" alt=\"Released under the MIT license.\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/stencil-community/stencil-web-types/blob/main/CONTRIBUTING.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome!\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/stenciljs\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/follow-%40stenciljs-1DA1F2?logo=twitter\" alt=\"Follow @stenciljs\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://chat.stenciljs.com\"\u003e\n    \u003cimg src=\"https://img.shields.io/discord/520266681499779082?color=7289DA\u0026label=%23stencil\u0026logo=discord\u0026logoColor=white\" alt=\"Official Ionic Discord\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA Stencil output target for generating [web types](https://plugins.jetbrains.com/docs/intellij/websymbols-web-types.html#file-structure) to provide intellisense for Stencil components in HTML and Vue files.\n\n## Overview\n\nOne of the core features of web components is the ability to create [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).\nWhen Stencil compiles a project, it generates a custom element for each component in the project.\n\nBy default, integrated development environments (IDEs) like JetBrains' WebStorm are not aware of a project's custom elements.\nThis causes the IDE to often warn developers that it doesn't have any information about their custom elements, and results in a poorer development experience.\nIn order to enable more intelligent features in JetBrains products, such as auto-completion, hover tooltips, etc., developers need to inform it of their project's custom elements.\n\nThe `webTypesOutputTarget` output target tells Stencil to generate a JSON file containing this information.\n\nThis is an opt-in feature and will write a JSON file containing web types in a directory specified by the output target.\nOnce the feature is enabled and your IDE is informed of the JSON file's location, writing code in HTML and Vue files will have similar intellisense to that of TSX files.\n\n## Set Up\n\nThe output target is not built into Stencil itself.\nIt's a third party package, that needs to be installed as a dev-dependency:\n```bash\n$ npm i --save-dev @stencil-community/web-types-output-target\n```\n\nTo generate custom element information for JetBrains IDE's, add the `webTypesOutputTarget` output target to your `stencil.config.ts`:\n```tsx\nimport { Config } from '@stencil/core';\nimport { webTypesOutputTarget } from '@stencil-community/web-types-output-target';\n\nexport const config: Config = {\n  outputTargets: [\n    webTypesOutputTarget(),\n  ]\n};\n```\n\nStencil will write a `web-types.json` to your project's root directory the next time the Stencil [build task](https://stenciljs.com/docs/cli#stencil-build) is run.\n\n## Configuration\n\nThe `webTypesOutputTarget` output target takes an optional argument, an object literal to configure the output target.\nThe following are properties on that configuration object.\n\n### `outFile`\n\nDefaults to `StencilConfig#{rootDir}/web-types.json`.\n\nSince [v0.3.0](https://github.com/stencil-community/stencil-web-types/releases/tag/v0.3.0).\n\nDescription: A string that represents location of the file generated by this output target.\nUsers may specify any of the following:\n- A relative directory (e.g. `'../'`)\n- A filename (e.g. `'my-types.json'`)\n- A relative directory ending in a filename (e.g. `'../my-types.json'`).\n\nIt is not recommended to use absolute paths for this setting, as this can cause errors in projects shared by more than one developer/environment.\nAn error will be logged to the console if an absolute path is detected.\n\nAny relative file path provided will be relative to the 'root directory' of your Stencil project.\nBy default, this is the directory your project's `stencil.config.ts` is in.\n\nIf the value provided does not end in `'.json'`, the output target assumes that a filename must be added to the path.\nIn such cases, the default name, `'web-types.json'`, will be added to the path:\n- `../` will be transformed to `../web-types.json`\n- `./web-types` will be transformed to `./web-types/web-types.json`\n- `./my-types.json` will not be transformed, as the provided value ends in `'.json'`\n\n## Using Web Types\n\nOnce web types have been written to disk, they need to be picked up by the IDE.\nWeb types for your project can be picked by JetBrains IDEs by setting the `web-types` property at the root level of your project's `package.json` file:\n\n```json\n{\n  \"name\": \"your-projects-name\",\n  \"version\": \"1.0.0\",\n  \"//\": \"Other details omitted\",\n  \"web-types\": \"./web-types.json\"\n}\n```\n\nHaving this file locally on disk will allow your JetBrains IDE to pick up additional typings automatically.\nTo provide these IDE-specific typings to users of your library, be sure to include the generated web types file in your package's distributable by adding it to your `package.json#files` array.\n\n## References\n\nhttps://plugins.jetbrains.com/docs/intellij/websymbols-web-types.html#file-structure\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstencil-community%2Fstencil-web-types","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstencil-community%2Fstencil-web-types","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstencil-community%2Fstencil-web-types/lists"}