@number10/jsx-konva

Konva renderer adapter for the PhaserJSX framework — provides Konva-specific runtime, mounting, backgrounds, and Canvas 2D rendering.

Status

✅ Full implementation — HostAdapter, SurfaceAdapter, VDOM runtime, gestures, effects, scene backgrounds, vector draw, text shadows, and offscreen roots for external texture consumers.

Usage

/** @jsxImportSource @number10/jsx-konva */
import { View, Text, Button } from '@number10/jsx-components'
import { useState } from '@number10/jsx-core'
import { mountKonvaJSX } from '@number10/jsx-konva'

await mountKonvaJSX({
  component: App,
  target: document.getElementById('app')!,
  width: 800,
  height: 600,
  backgroundColor: '#2a2a2a',
})

What's included

• Konva mount helper — mountKonvaJSX(), VDOM reconciliation, component rendering via Konva shapes and layers
• Host background alignment — optional backgroundColor on mountKonvaJSX() to color the target element behind the stage
• Konva adapters — KonvaHostAdapter, KonvaSurfaceAdapter
• Gestures — Touch, drag, long-press, hover, scroll with proper depth sorting
• Effects — Core effect engine integration
• Scene backgrounds — Grid, logo, gradient, particles, animated backgrounds
• Vector drawing — Konva vector draw context for portable VectorDrawContent
• NineSlice — Cached composite texture rendering
• Offscreen roots — createOffscreenKonvaRoot() for hidden stages used as texture sources in Three.js or other external renderers
• Layer compositing — Portal/dialog layers are composited into one exported canvas, so overlays remain visible when the canvas is reused as a texture
• Re-exports from @number10/jsx-components and @number10/jsx-core

Three.js bridge

Pair @number10/jsx-konva with @number10/jsx-three when you want to map portable UI onto plane, curved, or cube meshes inside a Three.js scene. Konva remains the UI renderer; Three.js becomes the presentation layer.

Import from the right package

| Need | Import from | | ---------------------- | -------------------------- | | Portable UI components | @number10/jsx-components | | Konva mount + adapters | @number10/jsx-konva | | Pixi mount + adapters | @number10/jsx-pixi | | Phaser runtime | @number10/jsx-phaser | | Legacy all-in-one | @number10/phaserjsx |

License

GPL-3.0-only