KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #codex #typescript #ai-agents #ai-agent #cli #claude-code #open-source #deepseek-harness #dsh-plugin #python #mcp

awesome-svelte

★ 110 Open GitHub ↗

Uma lista de coisas incríveis relacionadas ao Svelte

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1>Awesome Svelte Brasil</h1>

</div>

<p align="center">
  <sub><i>Outros projetos interessantes</i></sub>
  <br/>
  <a href="https://github.com/svelte-brasil/eventos">Eventos Svelte Brasil</a>&nbsp;&nbsp;&nbsp;
  <a href="https://github.com/svelte-brasil/criando-sua-biblioteca-svelte">Criado sua biblioteca Svelte</a>
</p>

> 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.
- [Markstream Svelte](https://github.com/Simon-He95/markstream-vue) - Renderizador de Markdown em streaming para Svelte 5 e SvelteKit, criado para chats de IA e saídas LLM incompletas, com Mermaid, KaTeX, blocos de código via Monaco, HTML seguro e SSR.

## 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

<br>

# 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)

awesome-svelte

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README