Exemplos por framework

Projetos executáveis que compartilham o mesmo layout de documentação deste site — cabeçalho, galeria de amostras, cards de seção, roxo da marca — além de demos ao vivo abaixo.

Demos ao vivo (nesta página)

Compressão PIXU

Try it live

Pick a sample or upload your own image

Try a sample image

Componente Vue

Vue component — live

PixuCompressor with real sample images

Click or drag image here to compress

Supports JPEG, PNG, WEBP, AVIF, PIXU

Or try a real sample

APIs React / Angular / Svelte

React API — live demo

Same Pixu compress() used by the React component. Pick a sample or upload.

Try a sample image

Antes de rodar os apps locais

npm run build

Depois abra qualquer pasta de exemplo, instale as dependências e inicie o servidor de desenvolvimento.

Projetos disponíveis

Framework	Pasta	Servidor de dev	Docs
Vue 3	examples/vue/	:3000	Vue
React	examples/react/	:3001	React
Angular	examples/angular/	:4200	Angular
Svelte	examples/svelte/	:3002	Svelte
Jacaré	examples/jacare/	:3003	Jacaré

Vue 3

cd examples/vue && npm install && npm run dev

React

cd examples/react && npm install && npm run dev

Angular

cd examples/angular && npm install && npm start

Svelte

cd examples/svelte && npm install && npm run dev

Jacaré

cd examples/jacare && npm install && npm run dev

Layout compartilhado

Todos os apps usam examples/shared/theme.css — o mesmo chrome de documentação do VitePress:

• Largura do conteúdo ~960px
• Cabeçalho + logo
• Galeria de amostras
• Cards de seção
• Roxo da marca #7b3fef

As fotos de amostra ficam em examples/shared/assets/ (também copiadas para docs/public/ para estas demos ao vivo).

Importando o Pixu

import { compress, buildDownloadName } from '@pantanal/pixu'

Receita de melhor compressão

const result = await compress(file, {
  format: 'image/pixu',
  enableSmartQuality: true,
})

Veja Formato PIXU e TECR.