Improve Your WebXR Developer Experience!Try Triplex, the R3F Visual Editor That Joined pmndrs

Introduction

If you've been developing Web3D or WebXR applications, you've probably experienced the frustration of adjusting the positioning of 3D models or debugging WebXR apps on real devices.

For those developing XR with Unity, you can visually adjust object positions in the Unity Editor, making development relatively smooth. However, while R3F (React Three Fiber) allows web developers to declaratively build 3D scenes in a React codebase—a feature that makes web developers rejoice—adjusting placed 3D models can be challenging.

Additionally, debugging WebXR on real devices requires preparing an SSL-enabled page and accessing it from the device, which can be quite tedious.

WebXR requires a secure context, which means the page must be served over HTTPS. — Triplex WebXR

The tool that reduces these pain points in R3F development and provides an excellent developer experience is Triplex.

What is Triplex?

Triplex is a tool that allows you to preview and edit 3D scenes on a per-React-component basis.

Triplex is your visual workspace for building React / Three Fiber components. Build 2D and 3D components without coding using its visual and input controls. — Triplex Official Website

It's available as a VSCode extension and desktop application, and can be set up simply by adding a config file to your existing project.
*Note: Around late October 2025, a desktop application version was also available, but currently only the VSCode extension is being offered.

{
  "$schema": "https://triplex.dev/config.schema.json",
  "files": ["../src/levels/*.tsx", "../src/app.tsx"],
  "provider": "./providers.tsx",
  "experimental": {
    "xr_editing": true,
    "debug_api": true
  }
}

After configuration, when you open a React component, an Open in Triplex button will appear. Clicking it displays the Triplex UI on the right side of the editor.

That's all you need to get started with Triplex.

Joining the R3F Ecosystem

Triplex was originally released around 2023, but it started being offered as a VSCode extension in 2025.

On October 8, 2025, the official Triplex blog announced that Triplex had joined the Poimandres Collective (commonly known as pmndrs), which manages the R3F ecosystem, and that Triplex had become completely open source.

Triplex has moved into the Poimandres Collective and is now completely open source!

With this announcement, Triplex is now recognized as part of the R3F ecosystem and can be expected to be a more reliable OSS tool.

Quick Start

Before introducing what Triplex can do, let's try it out ourselves.

npx create-triplex-project@latest --template point-and-click

As mentioned earlier, Triplex itself can be installed simply by installing the VSCode extension and preparing a config file. If you already have an R3F project, try adding it there.

*Note: We won't cover the template project code here. If you need a detailed explanation, please refer to the official documentation.

What Triplex Can Do

1. Bidirectional Editing Between GUI and R3F Codebase

Not only are changes made in the GUI (Triplex) reflected in the R3F codebase, but changes made in the R3F codebase are also reflected in the GUI. This allows you to manage complex 3D scenes entirely in the R3F codebase while partially editing in the GUI.

As a comparison, consider the Unity Editor. In Unity, changes made in the GUI are not reflected in the C# codebase. While differences appear as binary files, they are not output in a format that humans can easily edit in the codebase.

On the other hand, while Triplex is not as feature-rich as the Unity Editor—it's mainly for editing object positions, rotations, scales, etc.—its ability to edit bidirectionally with the R3F codebase is excellent.

Custom 3D models in formats like glb can also be edited similarly. As of December 2025, drag-and-drop functionality is not yet supported, so you need to write the loading process in R3F code.

2. Easily Debug WebXR Apps on Real Devices

Triplex has built-in functionality for easily debugging WebXR apps on real devices. As mentioned at the beginning, debugging WebXR apps on real devices requires preparing an SSL-enabled page and accessing it from the device, which can be tedious. Triplex automatically provides an SSL-enabled page, making real device debugging much easier.

To use Triplex's WebXR features, first add the following setting to your config file.

{
  "experimental": {
    "xr_editing": true
  }
}

Then click the Open in WebXR button in the top right of the Triplex editor. If the @react-three/xr package is not installed, a dialog will prompt you to install it—follow the instructions to install.

After installing the @react-three/xr package and clicking the Open in WebXR button again, three WebXR debug options will appear.

• Send To Meta Quest: Send directly to Meta Quest for debugging.
• Open in Browser Emulator: Launch a WebXR emulator in your browser for debugging.
• Copy WebXR Link: Generate an SSL-enabled WebXR app URL and copy it. Access this URL from a real device to debug.

Send To Meta Quest: Debug by Sending Directly to Meta Quest

This is a long-standing feature for sending links to Meta Quest and similar devices, but it often doesn't work properly, so I personally don't recommend it.

Open in Browser Emulator: Debug with WebXR Emulator in Browser

The @react-three/xr package internally uses Immersive Web Emulation Runtime, allowing you to emulate WebXR apps in a PC browser.
While you can do basic verification, the actual user experience may differ, so final verification should be done on real devices.

Copy WebXR Link: Generate SSL-Enabled URL and Debug on Real Device

Simply clicking the button generates an SSL-enabled WebXR app URL. First, access the URL on your PC to display a QR code.

Scan it using XRQR, a QR code reader web app for HMDs developed by sawa-zen.

Once scanned, it can be opened in Meta Quest Browser. You'll be asked to grant permission for spatial data access—grant it and click the Enter VR button to start the WebXR session.

As shown below, you can also edit objects within the WebXR session. *Note: As of December 25, 2025, edits made within the WebXR session are not reflected in the R3F codebase.

- Left Controller
  - Move viewpoint: Joystick
- Right Controller
  - Rotate viewpoint: Joystick
  - Select/deselect objects: Trigger button
  - Switch editing mode (Move/Rotate/Scale): A button
*Only the right controller displays a ray pointer, and hovering over objects provides haptic feedback (vibration)

Summary

• Bidirectional editing between GUI and R3F codebase (managing on a component basis is also great)
• Easily debug WebXR apps on real devices
• Easy to adopt since it's provided as a VSCode extension rather than an npm package
• Now officially part of the R3F community, so we can expect stability and feature expansion

Triplex is an excellent tool that improves the developer experience for Web3D/WebXR development on R3F.
While it doesn't match the Unity Editor in terms of features, the developer experience of being able to intuitively edit 3D scenes with a GUI while keeping the R3F codebase always up-to-date is truly unique.
Furthermore, the ease of debugging WebXR apps on real devices is a significant benefit for developers. (I believe this is currently the most convenient way to verify WebXR sessions.)

In addition to what we've covered, Triplex has various other useful features like editing component props via GUI.
If you're developing Web3D/WebXR with R3F, please give Triplex a try.

Official Resources

• Triplex Official Documentation:

• Triplex GitHub Repository:

• Triplex VSCode Extension:

Additional Notes

This article is based on content from the WebXR JP podcast recorded in late October 2025.

If you're interested, please join the WebXR JP Discord Server.

Note: WSL Environment Setup

When using Triplex in a WSL (Windows Subsystem for Linux) environment, additional configuration on the WSL side may be required.
Please refer to the following article for details.

Acknowledgments

I would like to thank Haga for helping me test Triplex on the WebXR JP Discord server.
Thank you!