# Declarative UI for Three.js panels

**URL:** <https://discourse.threejs.org/t/declarative-ui-for-three-js-panels/92894>\
**Category:** Showcase\
**Created:** [July 15, 2026, 4:22pm UTC](https://discourse.threejs.org/t/declarative-ui-for-three-js-panels/92894 "2026-07-15T16:22:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michael3/32/70454_2.png) [@Michael3](https://discourse.threejs.org/u/Michael3)\
**Post date:** [July 15, 2026, 4:22pm UTC](https://discourse.threejs.org/t/declarative-ui-for-three-js-panels/92894/1 "2026-07-15T16:22:51Z")

</div>

I’ve recently added support for building declarative user interfaces inside Three.js panels.

 ![Three Surface Bridge](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/1/61bcaaacaee2925cb6fcff46cb371a89aad353a4.jpeg)

The implementation is based on **PhaserJSX** , which renders interactive components into textures that can be attached to meshes. This makes it possible to build in-scene UI without relying on HTML overlays while keeping a familiar component-based programming model.

The example includes interactive buttons, sliders, checkboxes and text updates, all rendered directly inside the Three.js scene.

## Live example (StackBlitz)

> **[PhaserJSX Konva Three UI Gateway - StackBlitz](https://stackblitz.com/edit/vitejs-vite-yt4vuxxu?file=package.json)**
>
> Add JSX UI directly into your 3D world - fully interactive

## Documentation

> **[Three.js Panels - PhaserJSX](https://phaserjsx.number10.de/guides/three-panels/)**
>
> Project portable PhaserJSX UI onto Three.js meshes with @number10/jsx-three, offscreen Konva roots, and panel-aware input handoff.