Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate

🏗 Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate
https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate

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

Last synced: 4 months ago
JSON representation

🏗 Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate

Awesome Lists containing this project

README 

        
# 🏗 svelte-webcomponent-boilerplate



[![v2.0.1](https://img.shields.io/badge/version-v2.0.1-lightgray.svg?style=flat&logo=)](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/blob/main/CHANGELOG.md) [![](https://img.shields.io/npm/v/@ptkdev/svelte-webcomponent-boilerplate?color=CC3534&logo=npm)](https://www.npmjs.com/package/@ptkdev/svelte-webcomponent-boilerplate) [![License: MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat&logo=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&logo=svelte)](https://svelte.dev/) [![Language: TypeScript](https://img.shields.io/badge/language-typescript-blue.svg?style=flat&logo=typescript)](https://www.typescriptlang.org/) [![ECMAScript: 2019](https://img.shields.io/badge/ES-9-F7DF1E.svg?style=flat&logo=javascript)](https://github.com/tc39/ecma262) [![Discord Server](https://discordapp.com/api/guilds/383373985666301975/embed.png)](https://discord.ptkdev.io)



Create your HTML5 Web Component with Svelte. Made your web components with this user friendly boilerplate.



This 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.



## 🎁 Support: Donate



> 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!**



[![Donate Paypal](https://img.shields.io/badge/donate-paypal-005EA6.svg?style=for-the-badge&logo=paypal)](https://www.paypal.me/ptkdev) [![Donate Ko-Fi](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?style=for-the-badge&logo=ko-fi)](https://ko-fi.com/ptkdev) [![Donate Github Sponsors](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?style=for-the-badge&logo=github)](https://github.com/sponsors/ptkdev) [![Donate Patreon](https://img.shields.io/badge/donate-patreon-F87668.svg?style=for-the-badge&logo=patreon)](https://www.patreon.com/join/ptkdev) [![Donate Bitcoin](https://img.shields.io/badge/BTC-35jQmZCy4nsxoMM3QPFrnZePDVhdKaHMRH-E38B29.svg?style=flat-square&logo=bitcoin)](https://ptk.dev/img/icons/menu/bitcoin_wallet.png) [![Donate Ethereum](https://img.shields.io/badge/ETH-0x8b8171661bEb032828e82baBb0B5B98Ba8fBEBFc-4E8EE9.svg?style=flat-square&logo=ethereum)](https://ptk.dev/img/icons/menu/ethereum_wallet.png)



## 📎 Menu



-   💡 [Features](#-features)

-   🕹 [Demo](https://codepen.io/ptkdev/pen/jOyNmEQ)

-   👔 [Screenshot](#-screenshot)

-   🚀 [How to use](#-installation)

-   -   🌎 [Web](#-installation-web)

-   -   📦 [Webpack/Browserify](#-installation-npm-module---browserifywebpack)

-   -   📖 [Wordpress](#-installation-wordpress)

-   -   🔵 [React](#-installation-react)

-   -   🔴 [Angular](#-installation-angular)

-   -   🟠 [Svelte](#-installation-svelte)

-   -   🟢 [Vue](#-installation-vue)

-   📚 [Documentation](#-documentation)

-   -   🧰 [Options / Attributes](#-options--attributes)

-   -   🎨 [CSS Customization](#-css-customization)

-   🔨 [Developer Mode](#-developer-mode)

-   -   🏁 [Run Project](#-run-project)

-   -   💾 [Setup Project](#-setup-project)

-   👨‍💻 [Contributing](#-contributing)

-   🐛 [Known Bugs](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/issues?q=is%3Aopen+is%3Aissue+label%3Abug)

-   🍻 Community:

    -    Telegram ([🇬🇧 English](http://t.me/ptkdev_support) | [🇮🇹 Italian](http://t.me/ptkdev_support_italian))

    -    [Discord](http://discord.ptkdev.io) ([🇬🇧 English](https://discord.gg/jqUSGPKdmA) | [🇮🇹 Italian](https://discord.gg/SJFcbvG6RU) | [🇵🇱 Polish](https://discord.gg/25vg4VFhb7))

    -    [Twitter](http://twitter.com/ptkdevio)



## 💡 Features



-   [✔️] Easy to use

-   [✔️] MIT License

-   [✔️] Text animation by [Nooray Yemon](https://codepen.io/yemon) on [Codepen](https://codepen.io/yemon/pen/pWoROm)

-   [✔️] Friendly boilerplate + Github templates

-   [✔️] Powered by svelte framework

-   [✔️] Without jQuery depencence

-   [✔️] Configurable with attributes

-   [✔️] Customization with CSS Style

-   [✔️] HTML5 Custom Elements - Native webcomponents

-   [✔️] Work with: Browserify / Webpack / ReactJS / Svelte / Angular / Vue / Wordpress

-   [✔️] Typescript + TSPaths preconfigured

-   [✔️] Userfriendly folders tree

-   [✔️] Prettiers and ESLint preconfigured

-   [✔️] all-contributors-cli and all-shields-cli preconfigured

-   [✔️] JEST Test preconfigured

-   [✔️] Full async code

-   [✔️] Github and Vscode dotfiles preconfigured

-   [✔️] Translations i18n (Help me ❤️)



## 👔 Screenshot



See [Demo here](https://codepen.io/ptkdev/pen/jOyNmEQ).



[![](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)



## 🚀 Installation (Web)



1. Add html code to your page:



```html



```



2. Require javascript in yourpage (before `