{"id":20594374,"url":"https://github.com/etcherjs/etcher","last_synced_at":"2025-04-14T23:32:27.800Z","repository":{"id":61998012,"uuid":"536534501","full_name":"etcherjs/etcher","owner":"etcherjs","description":"Create reusable web components without touching a single line of javascript.","archived":false,"fork":false,"pushed_at":"2023-03-05T01:05:46.000Z","size":1065,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-04-26T12:20:41.878Z","etag":null,"topics":["etcher","etcherjs","framework","javascript","vscode-extension","web-components"],"latest_commit_sha":null,"homepage":"https://etcherjs.vercel.app/","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/etcherjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":"TheCommieAxolotl"}},"created_at":"2022-09-14T10:53:42.000Z","updated_at":"2023-11-22T01:36:49.000Z","dependencies_parsed_at":"2024-11-15T19:02:58.594Z","dependency_job_id":null,"html_url":"https://github.com/etcherjs/etcher","commit_stats":{"total_commits":77,"total_committers":2,"mean_commits":38.5,"dds":"0.012987012987012991","last_synced_commit":"59f64ca79b94e3060fe8f1be2473d3f21ef08e87"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etcherjs%2Fetcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etcherjs%2Fetcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etcherjs%2Fetcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etcherjs%2Fetcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etcherjs","download_url":"https://codeload.github.com/etcherjs/etcher/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248978795,"owners_count":21192845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["etcher","etcherjs","framework","javascript","vscode-extension","web-components"],"created_at":"2024-11-16T08:08:48.357Z","updated_at":"2025-04-14T23:32:27.769Z","avatar_url":"https://github.com/etcherjs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/TheCommieAxolotl"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://etcherjs.vercel.app/assets/etcher.png\" width=\"100\"/\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n[size-img]: https://img.shields.io/bundlephobia/minzip/@etcher/core?color=d34ebb\u0026style=for-the-badge\n[latest-img]: https://img.shields.io/npm/v/@etcher/core/latest?color=d34ebb\u0026label=latest\u0026style=for-the-badge\n[next-img]: https://img.shields.io/npm/v/@etcher/core/next?color=d34ebb\u0026label=next\u0026style=for-the-badge\n[license-img]: https://img.shields.io/npm/l/@etcher/core?color=d34ebb\u0026style=for-the-badge\n[discord-img]: https://img.shields.io/badge/Discord-d34ebb?style=for-the-badge\n[site-img]: https://img.shields.io/badge/EtcherJS-d34ebb?style=for-the-badge\n\n[![EtcherJS][site-img]](https://etcherjs.vercel.app)\n[![Discord][discord-img]](https://discord.gg/Vqd3BRFR5D)\n[![Size][size-img]](https://bundlephobia.com/result?p=@etcher/core)\n[![Latest][latest-img]](https://www.npmjs.com/package/@etcher/core)\n[![Next][next-img]](https://www.npmjs.com/package/@etcher/core)\n[![License][license-img]](https://github.com/etcherjs/etcher/tree/main/packages/core/LICENSE.md)\n\n# Etcher\n\nA _✨ blazingly fast ✨_ frontend 'framework' to create reusable web components without touching a single line of javascript.\n\nThis is a monolithic repository that contains the source code for the following packages:\n\n-   [@etcher/core](packages/core) - Etcher's core library\n-   [create-etcher](packages/create-etcher) - The `npm create etcher` package\n-   [etcher-vscode](packages/etcher-vscode) - VSCode support for Etcher\n\n# Why?\n\nEtcher allows you to take advantage of custom elements, a feature [natively supported in **all** major browsers](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements#browser_compatibility).\n\nEthcer's custom web elements have\n\n-   CSS Scoping through the Shadow DOM\n-   Reusability\n-   Event handling\n\nand much more.\n\n# VS Code Extension\n\nEtcher comes with a VS Code extension that allows you to access syntax highlighting, code completion, and more.\n\n[![GitHub](https://img.shields.io/badge/GitHub-d34ebb?style=for-the-badge)](https://github.com/etcherjs/etcher/tree/main/packages/vscode-etcher)\n[![Visual Studio Marketplace](https://img.shields.io/badge/Marketplace-d34ebb?style=for-the-badge)](https://marketplace.visualstudio.com/items?itemName=TheCommieAxolotl.etcher-vscode)\n\n# Installation\n\n```bash\nnpm i @etcher/core -g\n```\n\n# Usage\n\nTo use etcher, you need to follow this directory structure:\n\n```\n├── src\n│   ├── components\n│   |   └── ...component xtml files\n│   ├── pages\n│   |   └── ...page xtml files\n```\n\n(You can configure these directories in the `etcher.config.js` file.)\n\nTo generate chisel, run:\n\n```bash\netcher -b # build\netcher -w # watch\n```\n\nThis will move all your pages into your `public` directory, and generate a `_chisel.js` file, which is the output of etcher.\n\n# Configuration\n\nYou can configure etcher by creating a `etcher.config.js` file in the root directory of your project. Here's an example:\n\n```js\nexport default {\n    input: 'src',\n    output: 'dist',\n    plugins: [\n        // ...\n    ],\n};\n```\n\n# Example\n\n```html\n\u003c!-- src/pages/index.xtml --\u003e\n\u003chtml\u003e\n    \u003cbody\u003e\n        \u003c!-- our `label` attribute will be passed to the button file --\u003e\n        \u003cetcher-Button label=\"Click Me!\"\u003e\u003c/etcher-Button\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```html\n\u003c!-- src/components/Button.xtml --\u003e\n\u003cbutton\u003e{{label}}\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetcherjs%2Fetcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetcherjs%2Fetcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetcherjs%2Fetcher/lists"}