Compilado por Pablo Murad — 2026
Data da pesquisa: 2026-06-14
Critério bruto, sem romantizar
Esta lista prioriza recursos gratuitos, open-source, copy-paste, documentações oficiais, bibliotecas com plano gratuito, geradores visuais e coleções úteis para deixar sites mais bonitos ou interativos. Mesmo assim, alguns projetos têm planos pagos, licenças específicas para uso comercial, ou mudam regra com o tempo. Antes de usar em projeto comercial, confira a licença do item específico. Não seja inocente: “free” em página de marketing nem sempre significa “livre para qualquer uso”.
Como usar
- Para resolver rápido: comece por Uiverse, Stylosheet, Animista, CSS Gradient, Haikei, Animate.css, Alpine.js, Swiper, Chart.js e AOS.
- Para site simples: use Pico CSS, Simple.css, Water.css, MVP.css ou new.css.
- Para site moderno com controle visual: use Tailwind CSS + daisyUI/Flowbite/HyperUI.
- Para interatividade sem complicar: Alpine.js, HTMX, Tippy.js, SweetAlert2, Toastify, Swiper e AOS.
- Para gráficos: Chart.js primeiro; D3 só se você realmente precisar de controle avançado.
Parte 2 — 250 recursos gratuitos de JavaScript, UI, animação, gráficos e utilidades
| # | Recurso | Categoria | Para que serve | Facilidade |
|---|---|---|---|---|
| 1 | React | UI library | Biblioteca para criar interfaces reativas. | Médio |
| 2 | Vue.js | UI framework | Framework progressivo e amigável. | Médio |
| 3 | Svelte | UI compiler | Componentes com pouca verbosidade e bom desempenho. | Médio |
| 4 | SolidJS | UI library | Reatividade fina e desempenho alto. | Médio |
| 5 | Preact | UI library | Alternativa leve ao React. | Médio |
| 6 | Alpine.js | Lightweight UI JS | Interatividade simples direto no HTML. | Muito fácil |
| 7 | HTMX | HTML-first interactivity | Interatividade via atributos HTML. | Fácil |
| 8 | Stimulus | Modest JS framework | JS organizado para HTML server-rendered. | Fácil |
| 9 | Lit | Web components | Cria web components leves. | Médio |
| 10 | Stencil | Web components compiler | Cria design systems em web components. | Médio |
| 11 | Mithril.js | SPA framework | Framework pequeno para SPAs. | Médio |
| 12 | Riot.js | UI library | Componentes simples e leves. | Médio |
| 13 | Hyperapp | Micro framework | Framework tiny para apps frontend. | Médio |
| 14 | Petite-vue | Tiny Vue | Interatividade progressiva estilo Vue. | Fácil |
| 15 | Backbone.js | MVC library | Clássico para estruturação de apps JS. | Médio |
| 16 | Ember.js | App framework | Framework completo para apps ambiciosos. | Avançado |
| 17 | Angular | App framework | Framework completo para apps grandes. | Avançado |
| 18 | Next.js | React framework | React com rotas, SSR e build moderno. | Médio |
| 19 | Nuxt | Vue framework | Vue com SSR, rotas e convenções. | Médio |
| 20 | SvelteKit | Svelte framework | Framework oficial para apps Svelte. | Médio |
| 21 | Astro | Content/site framework | Sites rápidos com ilhas interativas. | Médio |
| 22 | Qwik | Resumable framework | Framework focado em performance inicial. | Avançado |
| 23 | Remix | React framework | Framework full-stack focado em web standards. | Médio |
| 24 | Gatsby | Static site framework | Sites estáticos com React. | Médio |
| 25 | Eleventy | Static site generator | Gerador estático simples e flexível. | Fácil |
| 26 | Vite | Frontend tooling | Dev server/build rápido para JS moderno. | Fácil |
| 27 | Parcel | Bundler | Bundler simples quase sem configuração. | Fácil |
| 28 | Rollup | Bundler | Bundler forte para bibliotecas JS. | Médio |
| 29 | Webpack | Bundler | Bundler clássico e altamente configurável. | Avançado |
| 30 | esbuild | Bundler/minifier | Build JS extremamente rápido. | Médio |
| 31 | SWC | Compiler | Compilador JS/TS rápido em Rust. | Médio |
| 32 | Babel | Compiler | Transpila JS moderno para compatibilidade. | Médio |
| 33 | TypeScript | Typed JavaScript | JS com tipos para reduzir bugs. | Médio |
| 34 | jQuery | DOM utility | Clássico para manipular DOM rapidamente. | Muito fácil |
| 35 | Cash DOM | jQuery alternative | Manipulação DOM leve com API parecida jQuery. | Fácil |
| 36 | Umbrella JS | DOM utility | Biblioteca leve para DOM e eventos. | Fácil |
| 37 | Zepto.js | jQuery-like library | Alternativa leve ao jQuery. | Fácil |
| 38 | Lodash | Utility library | Funções úteis para arrays, objetos e strings. | Fácil |
| 39 | Underscore.js | Utility library | Utilitários funcionais clássicos. | Fácil |
| 40 | Ramda | Functional utilities | Programação funcional para JS. | Médio |
| 41 | date-fns | Date utilities | Manipulação de datas modular e leve. | Fácil |
| 42 | Day.js | Date library | Alternativa leve ao Moment.js. | Fácil |
| 43 | Luxon | Date/time library | Datas, horários e fusos com API moderna. | Médio |
| 44 | Moment.js | Date library | Biblioteca clássica de datas; hoje em manutenção. | Fácil |
| 45 | Temporal Polyfill | Date/time API | Nova API de datas via polyfill. | Avançado |
| 46 | Numeral.js | Number formatting | Formata números e moedas. | Fácil |
| 47 | Dinero.js | Money library | Manipulação segura de valores monetários. | Médio |
| 48 | accounting.js | Money formatting | Formatação de moeda e números. | Fácil |
| 49 | validator.js | Validation | Valida strings, emails, URLs e mais. | Fácil |
| 50 | Yup | Schema validation | Validação de schemas JS. | Médio |
| 51 | Zod | Schema validation | Validação com TypeScript excelente. | Médio |
| 52 | Joi | Schema validation | Validação poderosa para JS/Node. | Médio |
| 53 | Ajv | JSON Schema validator | Validador JSON Schema rápido. | Médio |
| 54 | Superstruct | Validation | Validação composável de dados. | Médio |
| 55 | Vest | Validation framework | Validação declarativa inspirada em testes. | Médio |
| 56 | React Hook Form | Forms | Formulários performáticos para React. | Médio |
| 57 | Formik | Forms | Formulários React com validação. | Médio |
| 58 | Final Form | Forms | Gerenciamento de forms sem framework obrigatório. | Médio |
| 59 | PristineJS | Form validation | Validação simples de forms vanilla JS. | Fácil |
| 60 | Parsley.js | Form validation | Validação de forms via atributos. | Fácil |
| 61 | Cleave.js | Input formatting | Máscaras de input para cartão, telefone etc. | Fácil |
| 62 | IMask | Input masks | Máscaras flexíveis de input. | Fácil |
| 63 | Inputmask | Input masks | Máscaras de formulário robustas. | Fácil |
| 64 | Choices.js | Select/input UI | Selects e tags customizados sem jQuery. | Fácil |
| 65 | Select2 | Enhanced select | Selects pesquisáveis e customizados. | Fácil |
| 66 | Tom Select | Select UI | Selects leves com busca e tags. | Fácil |
| 67 | Slim Select | Select UI | Select customizado leve. | Fácil |
| 68 | Flatpickr | Date picker | Date/time picker leve e bonito. | Fácil |
| 69 | Pikaday | Date picker | Datepicker simples sem dependências. | Fácil |
| 70 | Air Datepicker | Date picker | Datepicker moderno e customizável. | Fácil |
| 71 | FullCalendar | Calendar UI | Calendário interativo completo. | Médio |
| 72 | Tippy.js | Tooltips/popovers | Tooltips bonitos baseados em Popper. | Fácil |
| 73 | Popper | Positioning engine | Posicionamento robusto para dropdowns/tooltips. | Médio |
| 74 | Floating UI | Positioning engine | Posicionamento moderno para popovers. | Médio |
| 75 | Micromodal | Modal library | Modais acessíveis e leves. | Fácil |
| 76 | SweetAlert2 | Alerts/modals | Alertas bonitos e fáceis. | Muito fácil |
| 77 | Notyf | Toast notifications | Toasts simples e bonitos. | Muito fácil |
| 78 | Toastify JS | Toast notifications | Notificações toast leves. | Muito fácil |
| 79 | Notiflix | Notifications/loading | Notificações, loading e confirm dialogs. | Fácil |
| 80 | iziToast | Toast notifications | Toasts customizáveis. | Fácil |
| 81 | Toastr | Toast notifications | Toasts clássicos com jQuery. | Fácil |
| 82 | PNotify | Notifications | Notificações JS ricas. | Médio |
| 83 | Shepherd.js | Product tours | Tours guiados em sites/apps. | Fácil |
| 84 | Driver.js | Product tours | Guias, highlights e tours. | Fácil |
| 85 | Intro.js | Product tours | Tours e onboarding; conferir licença comercial. | Fácil |
| 86 | Hopscotch | Product tours | Tour guiado clássico. | Médio |
| 87 | Swiper | Slider/carousel | Carrosséis modernos touch-friendly. | Fácil |
| 88 | Splide | Slider/carousel | Slider leve e acessível. | Fácil |
| 89 | Glide.js | Slider/carousel | Slider leve e simples. | Fácil |
| 90 | Embla Carousel | Carousel | Carrossel flexível e pequeno. | Médio |
| 91 | Tiny Slider | Slider | Slider vanilla JS sem jQuery. | Fácil |
| 92 | Slick Carousel | Carousel | Carrossel clássico com jQuery. | Fácil |
| 93 | Flickity | Carousel | Carrossel touch e responsivo; verificar licença. | Fácil |
| 94 | Owl Carousel 2 | Carousel | Carrossel jQuery popular. | Fácil |
| 95 | PhotoSwipe | Gallery/lightbox | Galeria e lightbox mobile-friendly. | Fácil |
| 96 | LightGallery | Gallery/lightbox | Galeria/lightbox rica. | Fácil |
| 97 | GLightbox | Lightbox | Lightbox leve sem dependências. | Fácil |
| 98 | Fancybox | Lightbox | Lightbox moderno; conferir licença/plano. | Fácil |
| 99 | baguetteBox.js | Lightbox | Lightbox simples e leve. | Muito fácil |
| 100 | Masonry | Grid layout | Layout tipo Pinterest. | Fácil |
| 101 | Isotope | Filtering layout | Filtros e layouts animados; conferir licença. | Médio |
| 102 | Muuri | Grid layout | Grid responsivo com drag/sort. | Médio |
| 103 | Packery | Grid layout | Layout bin-packing; conferir licença. | Médio |
| 104 | Shuffle.js | Filtering grid | Grid com filtros e ordenação. | Médio |
| 105 | Gridstack.js | Drag dashboard grid | Grid drag-and-drop para dashboards. | Médio |
| 106 | SortableJS | Drag and drop | Ordenação drag-and-drop fácil. | Fácil |
| 107 | Interact.js | Drag/resize/gestures | Arrastar, redimensionar e gestos. | Médio |
| 108 | Draggabilly | Drag and drop | Elementos arrastáveis simples. | Fácil |
| 109 | Dragula | Drag and drop | Drag-and-drop simples entre containers. | Fácil |
| 110 | Dropzone | File upload | Uploads com drag-and-drop. | Fácil |
| 111 | FilePond | File upload | Upload bonito, acessível e extensível. | Fácil |
| 112 | Uppy | File upload | Upload modular com dashboard. | Médio |
| 113 | Pintura Image Editor | Image editor | Editor de imagens; não totalmente grátis para tudo. | Médio |
| 114 | Cropper.js | Image cropper | Cortar imagens no navegador. | Fácil |
| 115 | Compressor.js | Image compression | Comprime imagens client-side. | Fácil |
| 116 | browser-image-compression | Image compression | Comprime imagens no browser. | Fácil |
| 117 | Lazysizes | Lazy loading | Lazy-load robusto para imagens/iframes. | Fácil |
| 118 | lozad.js | Lazy loading | Lazy loader pequeno via IntersectionObserver. | Fácil |
| 119 | vanilla-lazyload | Lazy loading | Lazy-load de imagens, vídeos e iframes. | Fácil |
| 120 | AOS | Scroll animations | Animações ao rolar a página. | Muito fácil |
| 121 | WOW.js | Scroll reveal | Revela elementos com animação no scroll. | Fácil |
| 122 | ScrollReveal | Scroll reveal | Animações de entrada no scroll. | Muito fácil |
| 123 | Rellax | Parallax | Parallax leve e fácil. | Muito fácil |
| 124 | simpleParallax.js | Parallax | Parallax simples em imagens. | Fácil |
| 125 | Locomotive Scroll | Smooth scroll | Scroll suave/parallax avançado. | Médio |
| 126 | Lenis | Smooth scroll | Scroll suave moderno. | Médio |
| 127 | GSAP | Animation | Animações profissionais; core gratuito com ressalvas. | Médio |
| 128 | Anime.js | Animation | Animação JS leve e poderosa. | Fácil |
| 129 | Motion | Animation | Animações para JS, React e Vue. | Fácil |
| 130 | Mo.js | Motion graphics | Animações gráficas e microinterações. | Médio |
| 131 | Velocity.js | Animation | Animações rápidas com API jQuery-like. | Fácil |
| 132 | Popmotion | Animation | Biblioteca funcional de animação. | Médio |
| 133 | Rough Notation | Annotations | Marcações estilo desenhado à mão. | Muito fácil |
| 134 | Typed.js | Typing effect | Efeito máquina de escrever. | Muito fácil |
| 135 | TypeIt | Typing effect | Efeito de digitação customizável. | Fácil |
| 136 | KUTE.js | Animation engine | Engine de animação JS/SVG. | Médio |
| 137 | Vivus | SVG animation | Anima desenho de SVG. | Fácil |
| 138 | Lottie Web | Animation renderer | Renderiza animações After Effects/Lottie. | Fácil |
| 139 | Bodymovin | Lottie exporter | Exporta animações para Lottie. | Médio |
| 140 | Rive | Interactive animation | Animações vetoriais interativas; plano free. | Médio |
| 141 | Three.js | 3D graphics | 3D/WebGL no navegador. | Avançado |
| 142 | Babylon.js | 3D engine | Engine 3D completa para web. | Avançado |
| 143 | PixiJS | 2D WebGL renderer | Renderização 2D acelerada por WebGL. | Médio |
| 144 | Phaser | Game framework | Framework JS para jogos 2D. | Médio |
| 145 | Matter.js | Physics engine | Física 2D para web. | Médio |
| 146 | Cannon-es | Physics engine | Física 3D para JS. | Avançado |
| 147 | Oimo.js | Physics engine | Física 3D leve em JS. | Avançado |
| 148 | D3.js | Data visualization | Visualizações de dados altamente customizadas. | Avançado |
| 149 | Chart.js | Charts | Gráficos simples, bonitos e responsivos. | Fácil |
| 150 | Apache ECharts | Charts | Gráficos ricos e interativos. | Médio |
| 151 | Plotly.js | Charts | Gráficos científicos/interativos. | Médio |
| 152 | ApexCharts | Charts | Gráficos modernos e fáceis. | Fácil |
| 153 | Highcharts Free/Non-commercial | Charts | Gráficos poderosos; licença gratuita só em casos específicos. | Médio |
| 154 | Nivo | React charts | Gráficos React bonitos baseados em D3. | Médio |
| 155 | Recharts | React charts | Gráficos React fáceis. | Médio |
| 156 | Visx | React visualization | Primitivas D3 para React. | Avançado |
| 157 | Vega | Visualization grammar | Gramática declarativa de visualização. | Avançado |
| 158 | Vega-Lite | Visualization grammar | Visualização declarativa mais simples que Vega. | Médio |
| 159 | Observable Plot | Charts | Biblioteca declarativa para gráficos. | Médio |
| 160 | Billboard.js | Charts | Gráficos reutilizáveis baseados em D3. | Médio |
| 161 | C3.js | Charts | Gráficos reutilizáveis baseados em D3. | Médio |
| 162 | Chartist | Charts | Gráficos responsivos simples. | Fácil |
| 163 | uPlot | Charts | Gráficos rápidos e leves. | Médio |
| 164 | Dygraphs | Time-series charts | Gráficos interativos de séries temporais. | Médio |
| 165 | Sigma.js | Graph visualization | Visualização de grafos/redes. | Avançado |
| 166 | Cytoscape.js | Graph visualization | Grafos e redes interativas. | Avançado |
| 167 | Mermaid | Diagrams | Diagramas via texto/Markdown. | Fácil |
| 168 | PlantUML Web | Diagrams | Diagramas textuais; útil com JS/docs. | Médio |
| 169 | Rough.js | Sketchy graphics | Desenhos SVG/canvas estilo mão livre. | Fácil |
| 170 | Fabric.js | Canvas library | Manipulação de objetos em canvas. | Médio |
| 171 | Konva | Canvas library | Canvas 2D interativo e estruturado. | Médio |
| 172 | Paper.js | Vector graphics | Gráficos vetoriais em canvas. | Médio |
| 173 | Two.js | 2D drawing | Desenho 2D em SVG/canvas/WebGL. | Médio |
| 174 | p5.js | Creative coding | Arte generativa e programação criativa. | Fácil |
| 175 | Processing.js | Creative coding | Port clássico do Processing para JS. | Médio |
| 176 | Leaflet | Maps | Mapas interativos leves. | Fácil |
| 177 | OpenLayers | Maps | Mapas web avançados. | Avançado |
| 178 | MapLibre GL JS | Maps | Mapas vetoriais open-source. | Médio |
| 179 | Turf.js | Geospatial | Análise geoespacial em JS. | Médio |
| 180 | Deck.gl | Geospatial visualization | Visualizações geoespaciais WebGL. | Avançado |
| 181 | CesiumJS | 3D maps/globe | Globo 3D e mapas geoespaciais. | Avançado |
| 182 | Papa Parse | CSV parser | Leitura/parsing de CSV no browser. | Fácil |
| 183 | SheetJS Community | Spreadsheet parser | Ler/escrever planilhas; verificar recursos free. | Médio |
| 184 | jsPDF | PDF generation | Gera PDFs no navegador. | Médio |
| 185 | PDF.js | PDF viewer | Renderiza PDFs no navegador. | Médio |
| 186 | pdf-lib | PDF manipulation | Cria e edita PDFs em JS. | Médio |
| 187 | PptxGenJS | PowerPoint generation | Gera apresentações PPTX via JS. | Médio |
| 188 | Docx | DOCX generation | Gera documentos Word via JS. | Médio |
| 189 | Prism.js | Syntax highlighting | Highlight de código leve. | Muito fácil |
| 190 | highlight.js | Syntax highlighting | Highlight automático para blocos de código. | Muito fácil |
| 191 | CodeMirror | Code editor | Editor de código embutido no browser. | Médio |
| 192 | Monaco Editor | Code editor | Editor do VS Code para web. | Avançado |
| 193 | Ace Editor | Code editor | Editor de código embutível. | Médio |
| 194 | Quill | Rich text editor | Editor rich text open-source. | Médio |
| 195 | TinyMCE Community | Rich text editor | Editor WYSIWYG com opções gratuitas. | Médio |
| 196 | CKEditor 5 | Rich text editor | Editor poderoso; conferir licença/uso. | Médio |
| 197 | TipTap | Rich text editor | Editor headless baseado em ProseMirror. | Médio |
| 198 | ProseMirror | Text editor framework | Framework para editores rich text. | Avançado |
| 199 | Editor.js | Block editor | Editor por blocos estilo Notion. | Médio |
| 200 | EasyMDE | Markdown editor | Editor Markdown simples. | Fácil |
| 201 | SimpleMDE | Markdown editor | Editor Markdown clássico. | Fácil |
| 202 | Marked | Markdown parser | Converte Markdown para HTML. | Fácil |
| 203 | Markdown-it | Markdown parser | Parser Markdown extensível. | Fácil |
| 204 | Remark | Markdown processor | Processamento Markdown via plugins. | Médio |
| 205 | Unified | Content processor | Processa Markdown/HTML/ASTs. | Avançado |
| 206 | DOMPurify | HTML sanitizer | Sanitiza HTML contra XSS. | Fácil |
| 207 | sanitize-html | HTML sanitizer | Sanitização de HTML em Node/browser. | Médio |
| 208 | he | HTML entities | Codifica/decodifica entidades HTML. | Fácil |
| 209 | axios | HTTP client | Cliente HTTP simples baseado em promises. | Fácil |
| 210 | ky | HTTP client | Wrapper elegante para fetch. | Fácil |
| 211 | SWR | Data fetching | Fetching com cache para React. | Médio |
| 212 | TanStack Query | Data fetching/cache | Cache e sincronização de dados. | Médio |
| 213 | Apollo Client | GraphQL client | Cliente GraphQL para apps JS. | Médio |
| 214 | urql | GraphQL client | Cliente GraphQL leve e flexível. | Médio |
| 215 | graphql-request | GraphQL client | Cliente GraphQL mínimo. | Fácil |
| 216 | Socket.IO | Realtime | WebSockets/eventos em tempo real. | Médio |
| 217 | ws | WebSocket library | WebSocket rápido para Node.js. | Médio |
| 218 | PeerJS | WebRTC | WebRTC simplificado para peer-to-peer. | Médio |
| 219 | SimplePeer | WebRTC | WebRTC mais simples. | Médio |
| 220 | Comlink | Web workers | Comunicação simples com web workers. | Médio |
| 221 | Workbox | Service workers/PWA | Ferramentas para PWA e cache. | Médio |
| 222 | Dexie.js | IndexedDB | Wrapper amigável para IndexedDB. | Médio |
| 223 | localForage | Browser storage | Storage async simples no navegador. | Fácil |
| 224 | idb | IndexedDB wrapper | Wrapper leve para IndexedDB. | Médio |
| 225 | PouchDB | Offline database | Banco offline sync-compatible. | Médio |
| 226 | RxDB | Client database | Banco reativo para apps JS. | Avançado |
| 227 | Redux Toolkit | State management | Gerenciamento de estado React padronizado. | Médio |
| 228 | Zustand | State management | Estado React simples e pequeno. | Fácil |
| 229 | Jotai | State management | Estado atômico para React. | Médio |
| 230 | Recoil | State management | Estado React por átomos/selectors. | Médio |
| 231 | MobX | State management | Estado observável e reativo. | Médio |
| 232 | XState | State machines | Máquinas de estado para UI complexa. | Avançado |
| 233 | Valtio | Proxy state | Estado React via proxies. | Fácil |
| 234 | Immer | Immutable state | Atualizações imutáveis com sintaxe mutável. | Fácil |
| 235 | RxJS | Reactive programming | Streams e programação reativa. | Avançado |
| 236 | Effector | State manager | Gerenciamento reativo de estado. | Avançado |
| 237 | TanStack Table | Tables | Tabelas headless poderosas. | Médio |
| 238 | DataTables | Tables | Tabelas HTML com busca/paginação. | Fácil |
| 239 | AG Grid Community | Data grid | Grid robusto; Community grátis. | Médio |
| 240 | Grid.js | Tables | Tabelas leves e modernas. | Fácil |
| 241 | Tabulator | Tables | Tabelas interativas completas. | Médio |
| 242 | Handsontable Community | Spreadsheet grid | Grid tipo planilha; conferir licença. | Médio |
| 243 | List.js | Search/sort/filter | Busca, ordenação e filtros em listas HTML. | Fácil |
| 244 | Fuse.js | Fuzzy search | Busca fuzzy no cliente. | Fácil |
| 245 | FlexSearch | Search | Busca full-text rápida no browser. | Médio |
| 246 | MiniSearch | Search | Full-text search pequeno para browser. | Médio |
| 247 | Lunr.js | Search | Busca textual client-side. | Médio |
| 248 | Algolia Autocomplete | Autocomplete | Autocomplete open-source; serviço pode ser pago. | Médio |
| 249 | Fuse.js demo | Fuzzy search demo | Demonstração prática para busca fuzzy. | Muito fácil |
| 250 | clipboard.js | Clipboard | Copiar texto para área de transferência. | Muito fácil |
Did this resonate?
Related documents
- 001
- 002
- 003
- 004
- 005