Data URLs for the
Modern Web.

The tiny, cheerful utility to preview, import, and create pixel-perfect assets directly in your browser.

Everything you need.

🎨

Pixel Editor

Built-in 64x64 editor with flood fill, resizeable brushes, and transparency support.

📸

Smart Import

Import any image and we'll automatically scale it down to a game-ready size.

📟

Retro Filters

Apply GameBoy, Pixelate, and Retro filters to your assets instantly.

⚡

Ultra Lightweight

No dependencies. Just vanilla JavaScript and Web Components.

Add it to your project.

Integrating PixUrl is as simple as adding a script tag.

<!-- Include the scripts -->
<script src="pixurl-core.js"></script>
<script src="plugins/pixel-editor.js"></script>

<!-- Use the component -->
<pixurl-utility></pixurl-utility>

<!-- Listen for the magic -->
<script>
  document.addEventListener('image-processed', (e) => {
    console.log('New Data URL:', e.detail.dataUrl);
  });
</script>