Framework Examples

Runnable projects that share the same documentation layout as this site — header, sample gallery, section cards, brand purple — plus live demos below.

Live demos (in this page)

PIXU compress

Try it live

Pick a sample or upload your own image

Try a sample image

Vue component

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

React / Angular / Svelte APIs

React API — live demo

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

Try a sample image

Before you run local apps

npm run build

Then open any example folder, install, and start the dev server.

Available projects

Framework	Folder	Dev server	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

Shared layout

All apps use examples/shared/theme.css — the same documentation chrome as VitePress:

• Content width ~960px
• Header + logo
• Sample gallery
• Section cards
• Brand purple #7b3fef

Sample photos live in examples/shared/assets/ (also copied to docs/public/ for these live demos).

Importing Pixu

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

Best compression recipe

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

See PIXU Format and TECR.