{"id":14990203,"url":"https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate","last_synced_at":"2025-04-12T02:06:15.534Z","repository":{"id":57138397,"uuid":"349123482","full_name":"ptkdev-boilerplate/svelte-webcomponent-boilerplate","owner":"ptkdev-boilerplate","description":"🏗 Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate","archived":false,"fork":false,"pushed_at":"2022-06-08T23:38:27.000Z","size":4988,"stargazers_count":60,"open_issues_count":2,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-12T02:06:08.917Z","etag":null,"topics":["boilerplate","create-svelte-app","create-web-app","create-webcomponents","custom-elements","custom-elements-v1","github-template","html5","htmlelements","svelte","svelte-boilerplate","svelte-components","svelte-example","svelte-framework","svelte-webcomponents","typescript","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/@ptkdev/svelte-webcomponent-boilerplate","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ptkdev-boilerplate.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["ptkdev"],"patreon":"ptkdev","ko_fi":"ptkdev"}},"created_at":"2021-03-18T15:25:42.000Z","updated_at":"2024-07-16T15:31:32.000Z","dependencies_parsed_at":"2022-09-02T20:21:58.229Z","dependency_job_id":null,"html_url":"https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate","commit_stats":null,"previous_names":[],"tags_count":7,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptkdev-boilerplate%2Fsvelte-webcomponent-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptkdev-boilerplate%2Fsvelte-webcomponent-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptkdev-boilerplate%2Fsvelte-webcomponent-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptkdev-boilerplate%2Fsvelte-webcomponent-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ptkdev-boilerplate","download_url":"https://codeload.github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505862,"owners_count":21115354,"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":["boilerplate","create-svelte-app","create-web-app","create-webcomponents","custom-elements","custom-elements-v1","github-template","html5","htmlelements","svelte","svelte-boilerplate","svelte-components","svelte-example","svelte-framework","svelte-webcomponents","typescript","webcomponent","webcomponents"],"created_at":"2024-09-24T14:19:42.202Z","updated_at":"2025-04-12T02:06:15.514Z","avatar_url":"https://github.com/ptkdev-boilerplate.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ptkdev","https://patreon.com/ptkdev","https://ko-fi.com/ptkdev","https://www.paypal.me/ptkdev","https://www.patreon.com/join/ptkdev"],"categories":[],"sub_categories":[],"readme":"# 🏗 svelte-webcomponent-boilerplate\n\n\u003c!-- all-shields/header-badges:START --\u003e\n\n[![v2.0.1](https://img.shields.io/badge/version-v2.0.1-lightgray.svg?style=flat\u0026logo=)](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/blob/main/CHANGELOG.md) [![](https://img.shields.io/npm/v/@ptkdev/svelte-webcomponent-boilerplate?color=CC3534\u0026logo=npm)](https://www.npmjs.com/package/@ptkdev/svelte-webcomponent-boilerplate) [![License: MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat\u0026logo=license)](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/blob/main/LICENSE.md) [![Powered By Svelte](https://img.shields.io/badge/powered%20by-svelte-FF3C02.svg?style=flat\u0026logo=svelte)](https://svelte.dev/) [![Language: TypeScript](https://img.shields.io/badge/language-typescript-blue.svg?style=flat\u0026logo=typescript)](https://www.typescriptlang.org/) [![ECMAScript: 2019](https://img.shields.io/badge/ES-9-F7DF1E.svg?style=flat\u0026logo=javascript)](https://github.com/tc39/ecma262) [![Discord Server](https://discordapp.com/api/guilds/383373985666301975/embed.png)](https://discord.ptkdev.io)\n\n\u003c!-- all-shields/header-badges:END --\u003e\n\nCreate your HTML5 Web Component with Svelte. Made your web components with this user friendly boilerplate.\n\nThis is a [github template](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/), you can fork it or [use as template](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/generate) for start new project with this repository as hello-world. I hate start new project with empty template, often i missing correct configuration, readme instruction or i need of samples of code. Use this repository as template solve this problem.\n\n## 🎁 Support: Donate\n\n\u003e This project is **free**, **open source** and I try to provide excellent **free support**. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. **THANK YOU!**\n\n\u003c!-- all-shields/sponsors-badges:START --\u003e\n\n[![Donate Paypal](https://img.shields.io/badge/donate-paypal-005EA6.svg?style=for-the-badge\u0026logo=paypal)](https://www.paypal.me/ptkdev) [![Donate Ko-Fi](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?style=for-the-badge\u0026logo=ko-fi)](https://ko-fi.com/ptkdev) [![Donate Github Sponsors](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?style=for-the-badge\u0026logo=github)](https://github.com/sponsors/ptkdev) [![Donate Patreon](https://img.shields.io/badge/donate-patreon-F87668.svg?style=for-the-badge\u0026logo=patreon)](https://www.patreon.com/join/ptkdev) [![Donate Bitcoin](https://img.shields.io/badge/BTC-35jQmZCy4nsxoMM3QPFrnZePDVhdKaHMRH-E38B29.svg?style=flat-square\u0026logo=bitcoin)](https://ptk.dev/img/icons/menu/bitcoin_wallet.png) [![Donate Ethereum](https://img.shields.io/badge/ETH-0x8b8171661bEb032828e82baBb0B5B98Ba8fBEBFc-4E8EE9.svg?style=flat-square\u0026logo=ethereum)](https://ptk.dev/img/icons/menu/ethereum_wallet.png)\n\n\u003c!-- all-shields/sponsors-badges:END --\u003e\n\n## 📎 Menu\n\n-   💡 [Features](#-features)\n-   🕹 [Demo](https://codepen.io/ptkdev/pen/jOyNmEQ)\n-   👔 [Screenshot](#-screenshot)\n-   🚀 [How to use](#-installation)\n-   -   🌎 [Web](#-installation-web)\n-   -   📦 [Webpack/Browserify](#-installation-npm-module---browserifywebpack)\n-   -   📖 [Wordpress](#-installation-wordpress)\n-   -   🔵 [React](#-installation-react)\n-   -   🔴 [Angular](#-installation-angular)\n-   -   🟠 [Svelte](#-installation-svelte)\n-   -   🟢 [Vue](#-installation-vue)\n-   📚 [Documentation](#-documentation)\n-   -   🧰 [Options / Attributes](#-options--attributes)\n-   -   🎨 [CSS Customization](#-css-customization)\n-   🔨 [Developer Mode](#-developer-mode)\n-   -   🏁 [Run Project](#-run-project)\n-   -   💾 [Setup Project](#-setup-project)\n-   👨‍💻 [Contributing](#-contributing)\n-   🐛 [Known Bugs](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/issues?q=is%3Aopen+is%3Aissue+label%3Abug)\n-   🍻 Community:\n    -   \u003cimg src=\"https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/main/.github/assets/social_telegram.png\" height=\"18px\"\u003e Telegram ([🇬🇧 English](http://t.me/ptkdev_support) | [🇮🇹 Italian](http://t.me/ptkdev_support_italian))\n    -   \u003cimg src=\"https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/main/.github/assets/social_discord.png\" height=\"18px\"\u003e [Discord](http://discord.ptkdev.io) ([🇬🇧 English](https://discord.gg/jqUSGPKdmA) | [🇮🇹 Italian](https://discord.gg/SJFcbvG6RU) | [🇵🇱 Polish](https://discord.gg/25vg4VFhb7))\n    -   \u003cimg src=\"https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/main/.github/assets/social_twitter.png\" height=\"18px\"\u003e [Twitter](http://twitter.com/ptkdevio)\n\n## 💡 Features\n\n-   [✔️] Easy to use\n-   [✔️] MIT License\n-   [✔️] Text animation by [Nooray Yemon](https://codepen.io/yemon) on [Codepen](https://codepen.io/yemon/pen/pWoROm)\n-   [✔️] Friendly boilerplate + Github templates\n-   [✔️] Powered by svelte framework\n-   [✔️] Without jQuery depencence\n-   [✔️] Configurable with attributes\n-   [✔️] Customization with CSS Style\n-   [✔️] HTML5 Custom Elements - Native webcomponents\n-   [✔️] Work with: Browserify / Webpack / ReactJS / Svelte / Angular / Vue / Wordpress\n-   [✔️] Typescript + TSPaths preconfigured\n-   [✔️] Userfriendly folders tree\n-   [✔️] Prettiers and ESLint preconfigured\n-   [✔️] all-contributors-cli and all-shields-cli preconfigured\n-   [✔️] JEST Test preconfigured\n-   [✔️] Full async code\n-   [✔️] Github and Vscode dotfiles preconfigured\n-   [✔️] Translations i18n (Help me ❤️)\n\n## 👔 Screenshot\n\nSee [Demo here](https://codepen.io/ptkdev/pen/jOyNmEQ).\n\n[![](https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/main/.github/assets/screenshot.png)](https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/main/.github/assets/screenshot.png)\n\n## 🚀 Installation (Web)\n\n1. Add html code to your page:\n\n```html\n\u003csvelte-webcomponent-boilerplate\n\theader=\"make\"\n\tflip=\"svelte,webcomponents,opensource\"\n\tfooter=\"awesome!\"\n\u003e\u003c/svelte-webcomponent-boilerplate\u003e\n```\n\n2. Require javascript in yourpage (before `\u003c/body\u003e`):\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@ptkdev/svelte-webcomponent-boilerplate@latest/dist/webcomponent.js\"\u003e\u003c/script\u003e\n```\n\nYou can replace `@latest` with specific version, example `@2.0.1`.\n\nBelow is available a description of `options` values.\n\n## 📦 Installation (NPM Module - Browserify/Webpack)\n\n1. Install npm module: `npm install @ptkdev/svelte-webcomponent-boilerplate --save`\n2. Add html code to your page:\n\n```html\n\u003csvelte-webcomponent-boilerplate\n\theader=\"make\"\n\tflip=\"svelte,webcomponents,opensource\"\n\tfooter=\"awesome!\"\n\u003e\u003c/svelte-webcomponent-boilerplate\u003e\n```\n\n3. Require javascript in your app:\n\n```javascript\nrequire(\"@ptkdev/svelte-webcomponent-boilerplate\");\n```\n\nor\n\n```javascript\nimport \"@ptkdev/svelte-webcomponent-boilerplate\";\n```\n\nBelow is available a description of `options` values.\n\n## 📖 Installation (Wordpress)\n\n1. Download wordpress plugin from [mirror](https://cdn.jsdelivr.net/npm/@ptkdev/svelte-webcomponent-boilerplate@latest/dist/wordpress/svelte-webcomponent-boilerplate-wordpress-plugin.zip) and install it.\n1. Add code to your html widget, example: `Appearance` --\u003e `Widget` --\u003e insert `HTML Widget` and paste html code:\n\n```html\n\u003csvelte-webcomponent-boilerplate\n\theader=\"make\"\n\tflip=\"svelte,webcomponents,opensource\"\n\tfooter=\"awesome!\"\n\u003e\u003c/svelte-webcomponent-boilerplate\u003e\n```\n\nYou can insert this html code in posts, widget, html box or theme.\n\n## 🔵 Installation (React)\n\n1. Install npm module with `npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save`:\n2. Import module in your `src/App.js` on header:\n\n```javascript\nimport \"@ptkdev/svelte-webcomponent-boilerplate\";\n```\n\n3. Add html code to your `App.js` template:\n\n```html\n\u003csvelte-webcomponent-boilerplate\n\theader=\"make\"\n\tflip=\"svelte,webcomponents,opensource\"\n\tfooter=\"awesome!\"\n\u003e\u003c/svelte-webcomponent-boilerplate\u003e\n```\n\n## 🔴 Installation (Angular)\n\n1. Install npm module with `npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save`:\n2. Import module in your `app/app.modules.ts` on header:\n\n```javascript\nimport \"@ptkdev/svelte-webcomponent-boilerplate\";\n```\n\n3. Add html code to your html component:\n\n```html\n\u003csvelte-webcomponent-boilerplate\n\theader=\"make\"\n\tflip=\"svelte,webcomponents,opensource\"\n\tfooter=\"awesome!\"\n\u003e\u003c/svelte-webcomponent-boilerplate\u003e\n```\n\n## 🟠 Installation (Svelte)\n\n1. Install npm module with `npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save`:\n2. Import module in your `src/App.svelte` on header:\n\n```javascript\nimport \"@ptkdev/svelte-webcomponent-boilerplate\";\n```\n\n3. Add html code to your html component:\n\n```html\n\u003csvelte-webcomponent-boilerplate\n\theader=\"make\"\n\tflip=\"svelte,webcomponents,opensource\"\n\tfooter=\"awesome!\"\n\u003e\u003c/svelte-webcomponent-boilerplate\u003e\n```\n\n## 🟢 Installation (Vue)\n\n1. Install npm module with `npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save`:\n2. Import module in your `src/App.vue` and add webcomponent to ignoreElements of vue config:\n\n```javascript\nimport Vue from \"vue\";\nimport \"@ptkdev/svelte-webcomponent-boilerplate\";\n\nVue.config.ignoredElements = [\"svelte-webcomponent-boilerplate\"];\n```\n\n3. Add html code to your html component:\n\n```html\n\u003csvelte-webcomponent-boilerplate\n\theader=\"make\"\n\tflip=\"svelte,webcomponents,opensource\"\n\tfooter=\"awesome!\"\n\u003e\u003c/svelte-webcomponent-boilerplate\u003e\n```\n\n## 🧰 Options / Attributes\n\n| Parameter | Description                                  | Values             | Default value                     | Available since |\n| --------- | -------------------------------------------- | ------------------ | --------------------------------- | --------------- |\n| header    | Setup top text                               | String             | `make`                            | v1.0.20210319   |\n| flip      | Setup middle flip text (separte with commas) | String with commas | `svelte,webcomponents,opensource` | v1.0.20210319   |\n| footer    | Setup bottom text                            | String             | `awesome!`                        | v1.0.20210319   |\n\n#### HTML Code with attributes:\n\n```html\n\u003csvelte-webcomponent-boilerplate\n\theader=\"make\"\n\tflip=\"svelte,webcomponents,opensource\"\n\tfooter=\"awesome!\"\n\u003e\u003c/svelte-webcomponent-boilerplate\u003e\n```\n\n## 🎨 CSS Customization\n\nYou can overwrite default css with selector `::part`, example:\n\n```html\n\u003cstyle\u003e\n\tsvelte-webcomponent-boilerplate::part(flip) {\n\t\tborder: 2px solid red;\n\t}\n\u003c/style\u003e\n```\n\nPart attribute is, generally, suffix of a class. Use chrome inspector for get the correct value of `part=\"\"` attributes. See [MDN selector ::part docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).\n\n## 🔨 Developer Mode\n\n#### 🏁 Run Project\n\n1. Clone this repository or download [nightly](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/archive/nightly.zip), [beta](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/archive/beta.zip) or [stable](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/archive/main.zip).\n2. Run `npm install`\n3. Run `npm run dev`\n4. Run `http://localhost:5000`\n\n#### 💾 Setup Project\n\nIf you want replace all strings (example: package name, author, urls, etc...) in markdown file, source files and others files of this project you need edit `setup.json` with correct values and run `npm run setup`.\n\n## 📚 Documentation\n\nRun `npm run docs`\n\n## 👑 Backers and Sponsors\n\nThanks to all our backers! 🙏 Donate 3$ or more on [paypal](https://www.paypal.me/ptkdev), [ko-fi](https://ko-fi.com/ptkdev), [github](https://github.com/sponsors/ptkdev) or [patreon](https://www.patreon.com/join/ptkdev) and send me [email](mailto:support@ptkdev.io) with your avatar and url.\n\n[![](https://api.ptkdev.io/backers/sponsor1.png?)](https://api.ptkdev.io/backers/sponsor1.html) [![](https://api.ptkdev.io/backers/sponsor2.png?)](https://api.ptkdev.io/backers/sponsor2.html) [![](https://api.ptkdev.io/backers/sponsor-kofi1.png?)](https://api.ptkdev.io/backers/sponsor-kofi1.html) [![](https://api.ptkdev.io/backers/sponsor-kofi2.png?)](https://api.ptkdev.io/backers/sponsor-kofi2.html) [![](https://api.ptkdev.io/backers/sponsor-kofi3.png?)](https://api.ptkdev.io/backers/sponsor-kofi3.html) [![](https://api.ptkdev.io/backers/sponsor3.png?)](https://api.ptkdev.io/backers/sponsor3.html) [![](https://api.ptkdev.io/backers/sponsor4.png?)](https://api.ptkdev.io/backers/sponsor4.html) [![](https://api.ptkdev.io/backers/sponsor5.png?)](https://api.ptkdev.io/backers/sponsor5.html) [![](https://api.ptkdev.io/backers/sponsor6.png?)](https://api.ptkdev.io/backers/sponsor6.html) [![](https://api.ptkdev.io/backers/sponsor7.png?)](https://api.ptkdev.io/backers/sponsor7.html) [![](https://api.ptkdev.io/backers/sponsor8.png?)](https://api.ptkdev.io/backers/sponsor8.html) [![](https://api.ptkdev.io/backers/sponsor9.png?)](https://api.ptkdev.io/backers/sponsor9.html) [![](https://api.ptkdev.io/backers/sponsor10.png?)](https://api.ptkdev.io/backers/sponsor10.html) [![](https://api.ptkdev.io/backers/sponsor11.png?)](https://api.ptkdev.io/backers/sponsor11.html) [![](https://api.ptkdev.io/backers/sponsor12.png?)](https://api.ptkdev.io/backers/sponsor12.html) [![](https://api.ptkdev.io/backers/sponsor13.png?)](https://api.ptkdev.io/backers/sponsor13.html) [![](https://api.ptkdev.io/backers/sponsor14.png?)](https://api.ptkdev.io/backers/sponsor14.html) [![](https://api.ptkdev.io/backers/sponsor15.png?)](https://api.ptkdev.io/backers/sponsor15.html) [![](https://api.ptkdev.io/backers/backer1.png?)](https://api.ptkdev.io/backers/backer1.html) [![](https://api.ptkdev.io/backers/backer2.png?)](https://api.ptkdev.io/backers/backer2.html) [![](https://api.ptkdev.io/backers/backer3.png?)](https://api.ptkdev.io/backers/backer3.html) [![](https://api.ptkdev.io/backers/backer4.png?)](https://api.ptkdev.io/backers/backer4.html) [![](https://api.ptkdev.io/backers/backer5.png?)](https://api.ptkdev.io/backers/backer5.html) [![](https://api.ptkdev.io/backers/backer6.png?)](https://api.ptkdev.io/backers/backer6.html) [![](https://api.ptkdev.io/backers/backer7.png?)](https://api.ptkdev.io/backers/backer7.html) [![](https://api.ptkdev.io/backers/backer8.png?)](https://api.ptkdev.io/backers/backer8.html) [![](https://api.ptkdev.io/backers/backer9.png?)](https://api.ptkdev.io/backers/backer9.html) [![](https://api.ptkdev.io/backers/backer10.png?)](https://api.ptkdev.io/backers/backer10.html) [![](https://api.ptkdev.io/backers/backer11.png?)](https://api.ptkdev.io/backers/backer11.html) [![](https://api.ptkdev.io/backers/backer12.png?)](https://api.ptkdev.io/backers/backer12.html) [![](https://api.ptkdev.io/backers/backer13.png?)](https://api.ptkdev.io/backers/backer13.html) [![](https://api.ptkdev.io/backers/backer14.png?)](https://api.ptkdev.io/backers/backer14.html) [![](https://api.ptkdev.io/backers/backer15.png?)](https://api.ptkdev.io/backers/backer15.html) [![](https://api.ptkdev.io/backers/backer16.png?)](https://api.ptkdev.io/backers/backer16.html) [![](https://api.ptkdev.io/backers/backer17.png?)](https://api.ptkdev.io/backers/backer17.html) [![](https://api.ptkdev.io/backers/backer18.png?)](https://api.ptkdev.io/backers/backer18.html) [![](https://api.ptkdev.io/backers/backer19.png?)](https://api.ptkdev.io/backers/backer19.html) [![](https://api.ptkdev.io/backers/backer20.png?)](https://api.ptkdev.io/backers/backer20.html) [![](https://api.ptkdev.io/backers/backer21.png?)](https://api.ptkdev.io/backers/backer21.html) [![](https://api.ptkdev.io/backers/backer22.png?)](https://api.ptkdev.io/backers/backer22.html) [![](https://api.ptkdev.io/backers/backer23.png?)](https://api.ptkdev.io/backers/backer23.html) [![](https://api.ptkdev.io/backers/backer24.png?)](https://api.ptkdev.io/backers/backer24.html) [![](https://api.ptkdev.io/backers/backer25.png?)](https://api.ptkdev.io/backers/backer25.html) [![](https://api.ptkdev.io/backers/backer26.png?)](https://api.ptkdev.io/backers/backer26.html) [![](https://api.ptkdev.io/backers/backer27.png?)](https://api.ptkdev.io/backers/backer27.html) [![](https://api.ptkdev.io/backers/backer28.png?)](https://api.ptkdev.io/backers/backer28.html) [![](https://api.ptkdev.io/backers/backer29.png?)](https://api.ptkdev.io/backers/backer29.html)\n\n## 👨‍💻 Contributing\n\nI ❤️ contributions! I will happily accept your pull request! (**IMPORTANT**: Only to nightly branch!) Translations, grammatical corrections (GrammarNazi you are welcome! Yes my English is bad, sorry), etc... Do not be afraid, if the code is not perfect we will work together 👯 and remember to insert your name in `.all-contributorsrc` and `package.json` file.\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://ptk.dev\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/442844?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePatryk Rzucidło\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ptkdev/ptkdev-boilerplate/svelte-webcomponent-boilerplate/commits?author=ptkdev\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#translation-ptkdev\" title=\"Translation\"\u003e🌍\u003c/a\u003e \u003ca href=\"https://github.com/ptkdev/ptkdev-boilerplate/svelte-webcomponent-boilerplate/commits?author=ptkdev\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/ptkdev/ptkdev-boilerplate/svelte-webcomponent-boilerplate/issues?q=author%3Aptkdev\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n\u003e 💰 In the future, if the donations allow it, I would like to share some of the success with those who helped me the most. For me open source is share of code, share development knowledges and share donations!\n\n## 🦄 Other Projects\n\n\u003c!-- all-shields/projects-badges1:START --\u003e\n\n[![](https://img.shields.io/badge/%F0%9F%92%BB%20My-Portfolio-3498db.svg?style=flat\u0026logo=)](https://ptk.dev/)\n\n\u003c!-- all-shields/projects-badges1:END --\u003e\n\n\u003c!-- all-shields/projects-badges2:START --\u003e\n\n[![](https://img.shields.io/badge/%F0%9F%A6%92%20Tools-Node%20Logger-9b59b6.svg?style=flat\u0026logo=)](https://github.com/ptkdev/ptkdev-logger) [![](https://img.shields.io/badge/%F0%9F%A6%8C%20Tools-All%20Shields%20CLI-9b59b6.svg?style=flat\u0026logo=)](https://github.com/ptkdev/all-shields-cli) [![](https://img.shields.io/badge/%F0%9F%96%A5%EF%B8%8F%20Tools-Aspect%20Ratio%2021%3A9-9b59b6.svg?style=flat\u0026logo=)](https://github.com/ptkdev/chrome-extension-aspectratio219) [![](https://img.shields.io/badge/%F0%9F%9B%A1%20Tools-Badges%3A%20Available%20on-9b59b6.svg?style=flat\u0026logo=)](https://availableon.badge.ptkdev.io/) [![](https://img.shields.io/badge/%F0%9F%90%BE%20Tools-JSON%20Token%20Replace-9b59b6.svg?style=flat\u0026logo=)](https://github.com/ptkdev/json-token-replace) [![](https://img.shields.io/badge/%F0%9F%90%8D%20Tools-ESLint%3A%20snakecasejs-9b59b6.svg?style=flat\u0026logo=)](https://github.com/ptkdev/eslint-plugin-snakecasejs)\n\n\u003c!-- all-shields/projects-badges2:END --\u003e\n\n\u003c!-- all-shields/projects-badges3:START --\u003e\n\n[![](https://img.shields.io/badge/%F0%9F%9A%A7%20WebComponents-My%20Collection-e74c3c.svg?style=flat\u0026logo=)](https://github.com/ptkdev-components) [![](https://img.shields.io/badge/%F0%9F%94%96%20Bot-AboutMeInfo-1FA0F2.svg?style=flat\u0026logo=)](https://github.com/ptkdev/aboutmeinfo-telegram-bot) [![](https://img.shields.io/badge/%E2%8F%B1%20Bot-QuizQuickAnswer-FEC91A.svg?style=flat\u0026logo=)](https://github.com/ptkdev/quizquickanswer-telegram-game-bot) [![](https://img.shields.io/badge/%F0%9F%93%9A%20Bot-GameBookChat-34495e.svg?style=flat\u0026logo=)](https://t.me/gamebookchatbot) [![](https://img.shields.io/badge/%F0%9F%8E%A8%20Themes-VSCode-f1c40f.svg?style=flat\u0026logo=)](https://github.com/ptkdev/vscode-theme-dark-blood) [![](https://img.shields.io/badge/%F0%9F%97%84%20Sourcesense-Joyce-CECBE6.svg?style=flat\u0026logo=)](https://github.com/sourcesense/joyce)\n\n\u003c!-- all-shields/projects-badges3:END --\u003e\n\n\u003c!-- all-shields/projects-badges4:START --\u003e\n\n[![](https://img.shields.io/badge/%F0%9F%91%94%20Boilerplate-Svelte-f368e0.svg?style=flat\u0026logo=)](https://github.com/ptkdev-boilerplate?q=svelte) [![](https://img.shields.io/badge/%F0%9F%91%94%20Boilerplate-WebComponents-f368e0.svg?style=flat\u0026logo=)](https://github.com/ptkdev-boilerplate?q=webcomponent) [![](https://img.shields.io/badge/%F0%9F%91%94%20Boilerplate-BOT-f368e0.svg?style=flat\u0026logo=)](https://github.com/ptkdev-boilerplate?q=bot) [![](https://img.shields.io/badge/%F0%9F%91%94%20Boilerplate-Node-f368e0.svg?style=flat\u0026logo=)](https://github.com/ptkdev-boilerplate?q=node) [![](https://img.shields.io/badge/%F0%9F%92%85%20App-Me%20in%20Gifs-2ecc71.svg?style=flat\u0026logo=)](https://meingifs.pics/) [![](https://img.shields.io/badge/%F0%9F%93%B1%20App-Stickers-2ecc71.svg?style=flat\u0026logo=)](https://github.com/ptkdev/ptkdev-stickers#-installation)\n\n\u003c!-- all-shields/projects-badges4:END --\u003e\n\n## 💫 License\n\n-   Code and Contributions have **MIT License**\n-   Images and logos have **CC BY-NC 4.0 License**\n-   Documentations and Translations have **CC BY 4.0 License**\n\n###### Copyleft (c) 2021 [Patryk Rzucidło](https://ptk.dev) ([@PTKDev](https://twitter.com/ptkdev)) \u003c[support@ptkdev.io](mailto:support@ptkdev.io)\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fptkdev-boilerplate%2Fsvelte-webcomponent-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fptkdev-boilerplate%2Fsvelte-webcomponent-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fptkdev-boilerplate%2Fsvelte-webcomponent-boilerplate/lists"}