SnipHub: gerenciador de snippets de código com SvelteKit 2 e Svelte 5

O que é o SnipHub?

O SnipHub é um gerenciador de snippets de código — aquele lugar onde você guarda aquele trecho de regex que sempre esquece, o comando Docker que nunca lembra, ou a configuração do Nginx que pesquisou por meia hora.

Acesse em: snippets.catiteo.com

Funcionalidades

• Criar, editar e excluir snippets
• Highlight de sintaxe para dezenas de linguagens
• Busca instantânea por título, conteúdo e tags
• Filtro por linguagem
• Copiar snippet com um clique
• Interface rápida e responsiva

Por que SvelteKit + Svelte 5?

Escolhi o SvelteKit 2 com Svelte 5 para explorar a nova API de reatividade chamada Runes, que mudou bastante a forma de escrever componentes Svelte.

Svelte 5 Runes

O Svelte 5 introduziu as Runes — uma nova forma de declarar estado reativo usando funções especiais como $state, $derived e $effect:

<script>
  // Antes (Svelte 4)
  let count = 0;
  $: double = count * 2;

  // Agora (Svelte 5)
  let count = $state(0);
  let double = $derived(count * 2);
</script>

A diferença pode parecer pequena, mas as Runes funcionam em arquivos .ts normais, fora de componentes .svelte. Isso permite extrair lógica reativa para arquivos separados — algo que era muito mais difícil antes.

Menos magia, mais explícito

Uma das críticas ao Svelte era que a reatividade "mágica" (baseada em atribuição) dificultava o entendimento em projetos maiores. Com Runes, fica explícito o que é estado reativo e o que é variável comum.

Stack técnica

Framework:   SvelteKit 2
UI:          Svelte 5 (Runes)
Linguagem:   TypeScript 5
Highlight:   highlight.js
Estilo:      Tailwind CSS 4
Deploy:      Cloudflare Pages

O que aprendi

Svelte compila para JavaScript vanilla — sem runtime pesado. O bundle final do SnipHub é significativamente menor do que um equivalente em React/Vue.

O sistema de stores do SvelteKit com Runes também facilitou muito o compartilhamento de estado entre componentes sem precisar de Context API ou Zustand.

Próximos passos

• Exportar snippets como Gist do GitHub
• Pastas/coleções para organizar snippets
• Snippets públicos e compartilháveis por link
• Integração com VS Code via extensão

O SnipHub resolve aquele problema clássico de desenvolvedor: "onde eu guardei aquele snippet mesmo?"