DEV Community

Cover image for "THIS Is Not My Child" - Integrating PIXI.js in Tauri Vite React
Emre Tekinalp
Emre Tekinalp

Posted on

"THIS Is Not My Child" - Integrating PIXI.js in Tauri Vite React

#react #tauri #pixijs #javascript

Ever start a “simple feature” and end up with a full-blown engineering case study? That was me last week.

I set out to build a high-performance 2D canvas inside a Tauri app using React, PIXI.js, and pixi-viewport — just a grid, zoom, pan, and GPU-accelerated drawing. Estimated time: 2–3 hours.
Actual time: a little longer… 🙃

Here’s what I learned, step by step.

Want the longer, meme-filled version?
The original LinkedIn article dives deeper with stories, humor, and some chaotic developer moments:
“THIS Is Not My Child” – LinkedIn version

Choosing the Right Tools

Over the years, I’ve explored a ton of 2D frameworks: Canvas2D, ZimJS, Fabric.js, Konva.js, even Three.js. For this project, PIXI.js won:

  • GPU-accelerated
  • Focused on 2D
  • Mature ecosystem

I paired it with React 19, pixi-viewport for zoom/pan, and wrapped it in Tauri + Vite for a desktop app.

Easy setup, right? …Spoiler: not quite.

The “Not My Child” Problem 

<Viewport>
  <Graphics />
</Viewport>
Enter fullscreen mode Exit fullscreen mode

React immediately rejected it: “This is not my child.” 😐

Why? PIXI is imperative (how to draw), React is declarative (what to show). They clash by default.

Bridging React and PIXI

Solution: ViewportAdapter — a custom React wrapper around pixi-viewport.

What it does:

  • Initializes PIXI correctly inside React
  • Waits for the renderer and event system to be ready
  • Binds viewport interactions (drag, zoom, resize)

With this adapter, React and PIXI can finally coexist peacefully.

Race Conditions and App Readiness

Even with the adapter, the canvas sometimes rendered blank. React sometimes “won the race” before PIXI initialized.

Solution: AppReadySensor — a small component that waits until PIXI is fully ready before rendering the canvas.

Result: No more blank screens, guaranteed initialization order.

Resizing Across DPI Scales

Tauri’s DPI-scaled dimensions caused subtle drifting and flickering.

Solution: a custom window metrics hook that calculates real pixel sizes:

const win = getCurrentWindow(); 
const physical = await win.outerSize(); 
const scale = await win.scaleFactor(); 
const logical = {   
  width: physical.width / scale,   
  height: physical.height / scale, 
};
Enter fullscreen mode Exit fullscreen mode

✅ Pixel-perfect scaling across Retina and 4K
✅ No floating or stretched elements

Optimizing the Infinite Grid

Rendering thousands of grid lines continuously = GPU nightmare.

Fixes:

  • Draw only visible lines in viewport
  • Scale stroke thickness dynamically by zoom factor 
g.setStrokeStyle({   
  width: 1 / camera.scale,    
  color: 0xcccccc,    
  alpha: 0.4,
});
Enter fullscreen mode Exit fullscreen mode

Outcome: smooth zoom, consistent sharpness, and stable GPU usage.

Ensuring Stability

Some async initialization issues persisted occasionally.

Solution: Multi RAF Retry Logic — use multiple requestAnimationFrame cycles and timed retries to guarantee the PIXI renderer and event system are ready.

Result: Every launch renders perfectly, first try.

Over-Engineering for Fun

Once stable, I couldn’t resist:

  • Vitest unit tests (mocking Tauri and PIXI)
  • Typedoc documentation
  • ESLint + TypeScript strict mode
  • CI/CD with GitHub Actions

Was it overkill for a red rectangle and a grid? Probably. Was it fun and educational? Absolutely.

Lessons Learned

  1. Imperative + declarative systems can coexist — but need clear boundaries.
  2. Initialization order matters — async frameworks can bite.
  3. Don’t trust window dimensions blindly in multi-DPI environments.
  4. Small abstractions like AppReadySensor prevent subtle bugs.
  5. Testing and documentation habits are worth building early, even in small projects.

Check Out the Repo

Full TypeScript source, adapter pattern, resizing handling, infinite grid, tests, and CI/CD:
👉 https://github.com/etekinalp/tauri-pixi-viewport

Clone it, explore, or adapt it for your own projects — all under MIT license.

Final Thoughts

What started as a tiny canvas experiment turned into a deep dive in synchronization, rendering pipelines, and desktop performance optimization.

React + PIXI + Tauri + Vite makes a solid foundation for modern creative tools or real-time visual interfaces.

Even small projects can teach big lessons — about design, architecture, and bridging frameworks.

Your Turn

Have you ever integrated React with an imperative library like PIXI or Three.js?
How did you handle synchronization, lifecycle, and rendering challenges?

Extra fun version: For memes, anecdotes, and more chaotic storytelling, check the original LinkedIn article here.

Top comments (0)