Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/svelte-brasil/awesome-svelte

Uma lista de coisas incríveis relacionadas ao Svelte
https://github.com/svelte-brasil/awesome-svelte

List: awesome-svelte

bibliotecas exemplos hacktoberfest sapper svelte

Last synced: about 2 months ago
JSON representation

Uma lista de coisas incríveis relacionadas ao Svelte

Awesome Lists containing this project

README 

        



Logo da comunidade Svelte Brasil



Awesome Svelte Brasil








  Outros projetos interessantes

  


  Eventos Svelte Brasil   

  Criado sua biblioteca Svelte











> Uma lista de coisas incríveis relacionadas ao Svelte



- [Recursos](#recursos)

  - [Recursos Oficiais](#recursos-oficiais)

  - [Comunidade](#comunidade)

  - [Playlist no Youtube](#playlist-no-youtube)

  - [Lives](#lives)

- [Tutoriais](#tutoriais)

- [Projetos usando Svelte](#projetos-usando-svelte)

- [Exemplos](#exemplos)

- [Bibliotecas e Componentes](#bibliotecas-e-componentes)

  - [UI Layout](#ui-layout)

  - [UI Componentes](#ui-componentes)

  - [Roteamento](#roteamento)

  - [Utilitários](#utilitários)

- [Templates](#templates)

- [Extensões para VSCode](#extensão-para-vscode)

- [Artigos](#artigos)

- [Como Contribuir](https://github.com/svelte-brasil/awesome-svelte/blob/master/CONTRIBUTING.md)



# Recursos



## Recursos Oficiais



- [Site Oficial](https://svelte.dev/)

  - [Tutorial](https://svelte.dev/tutorial)

  - [API Docs](https://svelte.dev/docs)

  - [Exemplos](https://svelte.dev/examples)

  - [REPL](https://svelte.dev/repl)

  - [Blog](https://svelte.dev/blog)

- [GitHub Repo](https://github.com/sveltejs/svelte)

- [Sveltekit](https://kit.svelte.dev/) - SSR, Roteamento e PWA Framework para Svelte.

- [Sapper](https://sapper.svelte.dev/) - SSR e PWA Framework para Svelte (Este projeto foi depreciado).

- [Svelte Native](https://svelte-native.technology/) - Projeto para desenvolvimento Mobile Nativo com Svelte, baseado no NativeScript.

- [Svelte GL](https://github.com/sveltejs/gl) - Projeto para criar animações 3D com WebGL API.



## Comunidade



- [Twitter](https://twitter.com/sveltebrasil)

- [Grupo Telegram](https://t.me/sveltebrasil)

- [Youtube](https://www.youtube.com/channel/UCp8jamqJRGg86eMnewxjWng)

- [GitHub Repo](https://github.com/svelte-brasil)

- [Grupo Facebook](https://www.facebook.com/groups/sveltebrasil/)

- [Página Facebook](https://www.facebook.com/sveltebrasil/)



### Comunidade Global



- [Svelte Society](https://sveltesociety.dev/) - comunidade global de Svelte. 



## Playlist no Youtube



- [Canal Geek Dev](https://www.youtube.com/playlist?list=PL8fIRnD1uUSmU16gpVMEfJ_kjobR201vk) - Aprenda Svelte JS

- [CodDev TV](https://www.youtube.com/playlist?list=PLhW5jRUibMHU7p6LgBId1VlfWRAC_Fud8) - Svelte

- [Matheus Castiglioni](https://www.youtube.com/playlist?list=PLt28SuGsHXH3PN2Tgs8oY4fH5tM7hRUfo) - Svelte

- [Space Devs](https://www.youtube.com/playlist?list=PLZ8sofC1-EAbzsCJELSQBdiFukV7SraQh) - Controle de Estoque Utilizando Flask, SvelteJS, Docker e Bootstrap.



## Lives



- [marcobrunodev](https://twitch.tv/marcobrunodev) - Lives criando projetos real com Svelte do início ao fim.



## Outros sites



- [Curso de Svelte (Fabio Vedovelli)](https://classes.vedovelli.com.br/?class=curso-de-svelte-introducao) - Curso introdutório ao Svelte.



# Tutoriais



- [Tutorial Rápido](https://t.co/iLM6sJR0UN?amp=1) - PDF para consulta rápida das principais features do Svelte

- [Cheat Sheet](https://sveltebrasil.dev/#/cheatsheet) - Guia rápido para aprender Svelte em português.



# Projetos usando Svelte



- [Shop-Shop](https://github.com/paiva-thiago/shop-shop/) - Uma loja virtual estática desenvolvida com Svelte

- [Leja](https://github.com/paiva-thiago/leja/) - Um CMS estático.

- [OpenWhats](https://github.com/paiva-thiago/open-whats) - Aplicação para envio de mensagens de whatsapp sem precisar incluir nos contatos do celular.

- [Trellu](https://github.com/valmisson/trellu) - Projeto inspirado no Trello, para gerenciamento de projeto.

- [Projeto do Curso Svelte](https://github.com/vedovelli/curso-svelte) - Projeto desenvolvido no Curso de Svelte do Fabio Vedovelli

- [Hello World](https://svelte.dev/repl/f103940f981a45808ed58d55d1b72790)

- [Bind Values](https://svelte.dev/repl/dab8dc4a8d3442168e066df981d1b650)

- [Carousel - svelte-carousel](https://svelte.dev/repl/64bc4bc4420c43d2b120ecec54c3b2b1)

- [CRUD com Svelte+Sapper+Bulma](https://github.com/danielschmitz/svelte-sapper-bulma-crud)

- [Finance Notes App](https://financenotes.com.br/) - Finance Notes é um web aplicativo PWA para auxiliar no controle e domínio das suas finanças pessoais.



# Jogos usando Svelte



- [2048 Svelte](https://github.com/GuilhermeBohnstedt/2048-svelte) - Jogo 2048 recriado em Svelte



# Comparações e Análises



- [Revelt](https://github.com/andrelmlins/revelt) - Análise de um projeto utilizando as tecnologias React e Svelte.

- [Will it Scale?](https://github.com/halfnelson/svelte-it-will-scale#readme) - Comparando o "ponto de inflação" da bundle entre projetos React e Svelte



# Bibliotecas e Componentes



## Animação



- [svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) - Um efeito de digitação (typewriter) simples e reutilizável para suas aplicações Svelte



## UI Layout



- [Svelte Materialify](https://svelte-materialify.vercel.app/) - Material Design para Svelte.

- [Svelte Material UI](https://sveltematerialui.com/) - Material Design para Svelte.

- [Svelma](https://c0bra.github.io/svelma/) - Componentes Bulma para Svelte.

- [Sveltestrap](https://bestguy.github.io/sveltestrap/?path=/story/introduction--get-started) - Componentes com Bootstrap 4.

- [Smelte](https://smelte.netlify.com/) - Componentes baseados no Vuetify com Material Design e Tailwind CSS.

- [Carbon](https://ibm.github.io/carbon-components-svelte/?path=/story/accordion--default) - Conjunto de componentes do design system da IBM.

- [Svelte Chota](https://alexxnb.github.io/svelte-chota/) - Biblioteca de componentes UI para Svelte feita com o pequenino chota.css.

- [Svelteit](https://docs.svelteit.dev/) - Biblioteca de componentes UI/UX minimalista para projetos Svelte e Sapper.

- [Svelte Mui](https://svelte-mui.ibbf.ru/) - Conjunto de componentes UI bem leves (~30 KB minzipped) para Svelte, inspirado no Material Design do Google.

- [MDBSvelte](https://saurav.tech/mdbsvelte/?path=/story/intoduction--getting-started) Biblioteca de componentes desenvolvida com Material Design e Boostrat.

- [Notus Svelte](https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-index&_ga=2.131577935.1110073640.1603367230-1934189105.1603367230) - Conjunto de componentes desenvolvidos com Tailwind CSS



## UI Componentes



- [Svelte Carousel](https://github.com/beyonk-adventures/svelte-carousel) - Um carrossel leve e simples para o Svelte 3.

- [Svelte Fullscreen](https://github.com/andrelmlins/svelte-fullscreen) - Realiza fullscreen em elementos do DOM.

- [Svelte Infinite Scroll](https://github.com/andrelmlins/svelte-infinite-scroll) - Insere a função de infinite scroll em listas.

- [Svelte Resize Observer](https://github.com/andrelmlins/svelte-resize-observer) - Detecta e informa mudanças de tamanho em elementos.

- [SvelteJs Forms](https://github.com/mdauner/sveltejs-forms) - Gerenciador de formulários.

- [Svelte Copy to Clipboard](https://github.com/henriquecaraujo/svelte-copy-to-clipboard) - Componente para realizar cópia de textos.

- [Svelte Facebook Login](https://github.com/andrelmlins/svelte-facebook-login) - Realiza login com o facebook.

- [Svelte Input Mask](https://github.com/xnimorz/svelte-input-mask) - Insere máscara de data nos campos de texto.

- [Svelte Grid Responsive](https://github.com/andrelmlins/svelte-grid-responsive) - Sistema de grid responsivo baseado no Bootstrap.

- [Svelte Scroll Shadow](https://github.com/andrelmlins/svelte-scroll-shadow) - Componente que personaliza a rolagem e insere sombra quando a rolagem existe.

- [Svelte Loading Spinners](https://github.com/Schum123/svelte-loading-spinners) - Uma coleção de componentes de carregamento.

- [Svelte DND Action](https://github.com/isaacHagoel/svelte-dnd-action) - Clica e Arrasta.

- [Svelte Document Title](https://github.com/andrelmlins/svelte-document-title) - Gerenciador de `document.title`.

- [Svelte Internet Connection](https://github.com/andrelmlins/svelte-internet-connection) - Detector de conexão com a internet.

- [Svelte Avatar](https://github.com/wdtamagi/svelte-avatar) - Componente simples de avatar com fallback para iniciais.

- [PROI-UI](https://proi-ui.com/?ref=madewithsvelte.com) - Componentes sveltes em Beta

- [Svelte Github Login](https://github.com/andrelmlins/svelte-github-login) - Realiza login com o github.

- [Konsta UI](https://konstaui.com/) - Componentes para projetos mobile multiplaforma



## Roteamento



- [Svelte Routing](https://github.com/EmilTholin/svelte-routing) - Uma biblioteca para criar rotas com suporte a SSR.

- [Svelte SPA Router](https://github.com/ItalyPaleAle/svelte-spa-router) - Roteador para SPAs.

- [Abstract State Router](https://github.com/TehShrike/abstract-state-router) - Roteador abstrato para utilizar com vários frameworks.

- [Svelte Router](https://github.com/spaceavocado/svelte-router) - Roteador inspirado no [Vue Router](https://router.vuejs.org/).

- [Routify](https://github.com/sveltech/routify-starter) Roteador inspirado no roteamento do Sapper

- [YRV](https://github.com/pateketrueke/yrv) Construído sobre o abstract-nested-router

- [Svelte Client Router](https://github.com/arthurgermano/svelte-client-router) - O roteador para Svelte SPA!.

- [Elegua](https://github.com/howesteve/elegua) - Roteador SPAs rápido, reativo, pequeno e descomplicado.



## Teste



- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/intro) - Utilitários de teste para Svelte



## Utilitários



- [Svelte Preprocess](https://www.npmjs.com/package/svelte-preprocess) - Pré-processador com suporte para `SCSS`, `Stylus`, `Less`, `PostCSS`, `Pug`, `Typescript`, `Coffeescript` e muito mais.

- [Svelte i18n](https://www.npmjs.com/package/svelte-i18n) - Biblioteca de internacionalização.

- [Svelte Loadable](https://www.npmjs.com/package/svelte-loadable) - Biblioteca para auxiliar o carregamento dinâmico de componentes.

- [Svelte CSS vars](https://www.npmjs.com/package/svelte-css-vars) - Utiliário para ter variáveis de CSS reativas.

- [svelte-promisable-stores](https://www.npmjs.com/package/svelte-promisable-stores) - Coleção de stores para guardar Promises. Útil para lidar com promises de requisições de API.

- [Svelte Adapter](https://github.com/pngwn/svelte-adapter) - Utilitário para utilizar Svelte em projetos Vue e React.



## Frameworks



- [JungleJS](https://www.junglejs.org/) - Monte sites estáticos com Svelte + GraphQL

- [Elder.js](https://elderguide.com/tech/elderjs/) - Gerador de site estático com foco em SEO

- [NodeGUI](https://svelte.nodegui.org/) - Framework para desenvolvimento de aplicações desktop com Svelte.



# Templates



## Svelte Básico



- [Svelte template](https://github.com/sveltejs/template) - Template para criar aplicativos básicos.

- [Svelte template Webpack](https://github.com/sveltejs/template-webpack) - Template para criar aplicativos básicos com Webpack.

- [svelte-routify-dotenv-sass-prettier-test](https://github.com/svelte-brasil/svelte-routify-dotenv-sass-prettier-test) - Template svelte configurado com Routify, Sass, Dotenv, prettier, jest e rollup.

- [svelte-boilerplate](https://github.com/henriquehbr/svelte-boilerplate) - Template svelte configurado com Less.js, TypeScript e Rollup



## Sapper



- [Sapper template](https://github.com/sveltejs/sapper-template) - Template padrão do Sapper, disponível para Rollup e webpack.

- [sapper-sass-env-storybook-prettier](https://github.com/svelte-brasil/sapper-sass-env-storybook-prettier) - Template Sapper configurado com Sass, Dotenv, Storybook, prettier e webpack.

- [sapper-boilerplate-stylus-env-axios](https://github.com/svelte-brasil/sapper-boilerplate-stylus-env-axios) - Template Sapper configurado com Stylus, Dotenv, Storybook, prettier, axios e webpack.



## Electron



- [Svelte Electron template](https://github.com/valmisson/svelte-electron-template) - Este é um template para criar aplicativos Electron com o SvelteJS



## NativeScript



- [svelte-native-template](https://github.com/halfnelson/svelte-native-template) - Template para criar APPs mobile com NativeScript e Svelte



## Bibliotecas



- [svelte-library-template](https://github.com/henriquecaraujo/svelte-library-template) - Template para criação de bibliotecas para Svelte.



# Extensão para VSCode



- [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) - Suporte a linguagem Svelte

- [Svelte Intellisense](https://marketplace.visualstudio.com/items?itemName=ardenivanov.svelte-intellisense) - Fornece suporte para dados, eventos, slots etc. para os componentes.

- [Svelte 3 Snippets](https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-svelte-snippets) - Atalhos para os recursos do Svelte 3

- [Svelte Require](https://marketplace.visualstudio.com/items?itemName=nickyhajal.vs-code-svelte-require) - Ajuda no requerimento arquivos svelte, dependências e módulos principais em um componente svelte

- [Svelte Component Extractor](https://marketplace.visualstudio.com/items?itemName=proverbialninja.svelte-extractor) - Cria um novo componente como código selecionado em outro.

- [Svelte Auto Import](https://marketplace.visualstudio.com/items?itemName=pivaszbs.svelte-autoimport) - Localiza, analisa e fornece automaticamente ações de código e conclusão de código para todas as importações disponíveis. Funciona com arquivos TypeScript, Javascript e Svelte

- [Svelte Type Checker](https://marketplace.visualstudio.com/items?itemName=halfnelson.svelte-type-checker-vscode) - Checa os tipos das variáveis e props com base no Svelte 3

- [Svelte Server](https://marketplace.visualstudio.com/items?itemName=timeshift.svelte-server) - Servido integrado ao VS Code para projetos Svelte

- [Svelty Snippets](https://marketplace.visualstudio.com/items?itemName=icebr9.svelty-snippets) - Conjunto de snippets para Svelte

- [svelte-format](https://marketplace.visualstudio.com/items?itemName=melihaltintas.svelte-format) - Formatador de arquivos .svelte inspirado no vue-format

- [Svelte Require](https://marketplace.visualstudio.com/items?itemName=nickyhajal.vs-code-svelte-require) - Auxilia na importação que recursos em arquivos .svelte

- [Svelte Preview](https://marketplace.visualstudio.com/items?itemName=RafaelMartinez.svelte-preview) - Permite pré-visualizar seus componentes em desenvolvimento em uma segunda tela dentro do vscode

- [Svelte Component Creator](https://marketplace.visualstudio.com/items?itemName=proverbialninja.svelte-component-creator) - Cria um componente a partr de um trecho de html selecionado em outro componente, importa e utiliza o novo componente criado







# Artigos



- [Front-end com o Compilador Svelte](https://inside.contabilizei.com.br/front-end-com-compilador-svelte-a54ccbfbe5a6)

- [Experiências com Svelte por um desenvolvedor React [pt-BR]](https://dev.to/ninetails/experiencias-com-svelte-por-um-desenvolvedor-react-pt-br-4mj9)

- [Svelte 3: Começando com Svelte 3](https://medium.com/@oieduardorabelo/svelte-3-come%C3%A7ando-com-svelte-3-1c38983850b6)

- [Conheça Svelte, o framework “compilador”](https://ezdevs.com.br/conheca-svelte-o-framework-compilador/)

- [Svelte: o framework JavaScript que não é um framework](https://blog.geekhunter.com.br/svelte-o-framework-javascript-que-nao-e-um-framework/)



# Outras fontes



- [Made with Svelte](https://madewithsvelte.com/)

- [Awesome Svelte Resource](https://awesomeopensource.com/project/ryanatkn/awesome-svelte-resources)



[Ir para o Topo](#awesome-svelte-brasil)