feat: adds initial file drag and drop functionality by noel-schenk · Pull Request #376 · pmndrs/triplex

noel-schenk · 2026-01-07T22:44:00Z

Hey @itsdouges amazing software you have created! We want to use it for this year's Global Game Jam.

We figured it would be nice to be able to drag and drop components into scenes. This PR adds an initial version of that.
I would suggest not merging it, as it still has some issues and flaws. But I wanted to first thank you very much for this wonderful extension and second, maybe help contribute a bit for a future feature.

Closes #43

vercel · 2026-01-07T22:44:05Z

@noel-schenk is attempting to deploy a commit to the Triplex Team on Vercel.

A member of the Team first needs to authorize it.

itsdouges · 2026-01-08T00:36:02Z

sweet! appreciate the contribution, where do you see the major points are to look at in the PR that need work? could you annotate the PR with comments on interesting piece of code / behavior / anything? video walk through would go a treat as well

tldr what do we need to do to get this merged?

noel-schenk · 2026-01-08T13:34:10Z

Sure, :) currently working and then some holiday, but after, before the GGJ, I might have some time to fix more.

Currently the scene rendering needs a padding for the drag and drop because the iframe captures the drag and drop event.
Export default does not work it needs to be a named export
Imports are full path and not relative
The component gets added at the end of the first export that is found in the scene file
Multiple components can't get added in one drag n drop they need to be added individually

Probably more issues I haven't found yet.

Recording.2026-01-08.143251.mp4

itsdouges · 2026-01-09T10:28:38Z

oh cool I like that it uses native vscode drag and drop, good work so far! I'll x-link this to discord

itsdouges · 2026-01-09T10:34:43Z

Currently the scene rendering needs a padding for the drag and drop because the iframe captures the drag and drop event.

we should be able to do something about this

Export default does not work it needs to be a named export

easy enough fix, default could select the first component on drop, then a have hotkey to show a UI to select a specific one?

Imports are full path and not relative

easy enough to massage this

The component gets added at the end of the first export that is found in the scene file

do you think we could immediately add the component during the drag when it hits the scene and then you can position it while still dragging?

Multiple components can't get added in one drag n drop they need to be added individually

like if you drag multiple files? is this a limitation or something we can code around to add them all at the same time?

- Added add to active component / scene - Added drag and drop support for default exports

Bellian · 2026-01-13T13:45:40Z

I took over the PR now.
Fixed the following issues:

Imports are relative now
The renderer now also accept the DND.
This resolves the iframe issue.
In the long run we might do things like preview the model while draging, place where the mouse cursor points to etc.
But for this i need some feedback how the communication from the server back works @itsdouges
Default exports are supported and prefered.
If a file has multiple components but a default export, the default export will be added to the current scene.
Added support for vscode remote drag and drop (for example WSL).

- implemented requestVSCE. Sends data to server and awaits the response. - implemented component select. If the imported file contains multiple component and no default component, you can select wich item to add. - fixed name collisions. The there is already a 'Scene' in the current file and you want to import a component names 'Scene' it gets aliased to 'Scene_1', 'Scene_2' etc

Bellian · 2026-01-14T13:09:57Z

Improved drag and drop:

implemented requestVSCE. Sends data to server and awaits the response.
implemented component select. If the imported file contains multiple component and no default component, you can select wich item to add.
fixed name collisions. The there is already a 'Scene' in the current file and you want to import a component names 'Scene' it gets aliased to 'Scene_1', 'Scene_2' etc

Bellian · 2026-01-16T21:01:26Z

@itsdouges Do you mind having a look and get some feedback?
Would be a blast having this for the game Jam at the end of the month XD

itsdouges · 2026-01-17T01:57:10Z

im trying to push commits to your remote branch but can't, do you have contributors not being allowed to push set? going to fix some formatting and then go over the code

itsdouges · 2026-01-17T01:58:49Z

@Bellian great fix where you can drop it immediately after "dropping" it into the triplex editor (after pressing shift)!

itsdouges · 2026-01-17T08:04:56Z

+            {...bindingsDND}
+        >
+            {errorData && errorData.type === 'unknown' && (
+                <Dialog onDismiss={onDismissError}>


Rather than having our own error dialog can we use the error toasts in vscode? There should be a bridge message to trigger for it

It's this https://github.com/pmndrs/triplex/blob/main/packages/@triplex/editor-next/src/util/bridge.ts#L112 but if we are only waiting for the response for the error I reckon delete all this and show a vscode native toast instead

itsdouges · 2026-01-17T08:06:56Z

  async updateCode(
    data:
      | {
-          code: string;


Can we fix all the formatting changes? Check your IDE is using the prettier from triplex

itsdouges · 2026-01-17T08:08:18Z

+          return await document.insertComponent(data);
+        }),
+        on(panel.webview, "send-request", async ({ data, event, id }) => {
+          const results = await execCallback(event, data);


Are we only waiting for the result to see if we have to show an error? If so we can just show a vscode toast message instead rather that having to round trip back through the editor.

Would let us delete a lot of code as well

This also sends the information what components are abke to load for the select dialog.
If a file has more than 1 export and no defaukt export there is a promt to select the imported component.

itsdouges · 2026-01-17T08:10:44Z

+            {errorData && errorData.type === 'multiple-exports' && (
+                <Dialog onDismiss={onDismissError}>
+                    <form className="flex flex-col gap-2.5 p-2.5" onSubmit={onSubmit}>
+                        <span className="text-heading select-none font-medium">


Ah I see an error could be this. I want to look what we have available during a drag because it would be cool if we can start checking before the user drops 🤔

itsdouges · 2026-01-17T08:14:34Z

+  }
+
+  if (!componentFile) {
+    throw new DNDError(`Component file not found: ${componentPath}`);


I'd just throw a standard error. Whats the need to subclass?

Currently for typing because of the multiple compnent data.

itsdouges · 2026-01-17T09:21:20Z

+export function resolveRemoteURL(path: string) {
+  if (path.startsWith('vscode-remote://')) {
+    // we hav a remote file drop!
+    path = path.replace(/vscode-remote:\/\/[^/]*/, 'file://');


Can you tell me more about how vscode remote files work with triplex

itsdouges · 2026-01-17T09:21:58Z

+}
+
+
+export function useDND(sendCallback: any, activeScene: string, scenePath: string) {


Anys will be a lint violation

itsdouges · 2026-01-17T09:22:54Z

+        e.stopPropagation();
+    };
+
+    const handleDragEnter = (e: DragEvent<HTMLDivElement>) => {


This hooks is pretty specific to the vscode dnd. Does the renderer need the dnd logic or can the editor take care of it for now?

itsdouges · 2026-01-17T09:25:11Z

-          <Tunnel.Out />
-          <DebugAttributes />
+            {isDragging && (
+              <div


This isn't doing anything anymore right

itsdouges · 2026-01-17T09:25:34Z

 }): Scene | null {
+
+  if (modules == undefined || modules == null) {
+    return null;


What's this for

I regulary got en error loading stuff here. Do not know precisely what went wrong.
Got a "try to access prop of undefined"

itsdouges · 2026-01-18T04:10:03Z

@Bellian I have some changes to push

fix formatting
use pragmatic drag and drop instead of custom (this will let us also drag and drop into the element tree later)
remove vsce request logic and replace it with calls using useSubscription (removes possibility for stale content)
remove renderer dnd (we can't get drag data before drop so no point having any dnd logic here)
consolidate on the existing "/scene/:path/:exportName/object" api to add components to a scene (if there's any bugs we can fix it there)

all good if I push here?

noel-schenk · 2026-01-18T08:19:12Z

@itsdouges sure I've added you as a collaborator to the branch :)

Sorry for the delay we are in a totally different time zone :D

itsdouges · 2026-01-18T12:12:51Z

hey folks I pushed a few changes, my main goal was to try and reduce the total amount of code we needed to add for this feature. here's what I did:

use client side checks instead of server side (e.g. gets the export name from the client side then sends it to the server to add)
use subscriptions instead of the custom request API, let's us keep things fresh if the data changes when the select component dialog is shown :-) and is more familiar with the rest of the codebase
use pragmatic dnd for the dropzone, which lets us have a story for adding support for dragging a component as a child to an element in the element tree as a follow up - where we already use pdnd!
use the pre-existing add API instead of a new one, sorry to delete a lot of code as this was the bulk of your PR but most of the logic is already there, if there's edge cases or bugs we need to handle now can you add them to the "/scene/:path/:exportName/object" API please?
tweaked the select compenent UI
removed dnd drop zone from the renderer, since we can't get the data during a drag there's no need to keep it there
fixed some edge cases, dragging the same component into the scene, disabling iframe pointer events during a drag

can you test and let me know how it goes? and if there's any issues feel free to push some fixes.

I haven't applied the vscode-remote file stuff, feels like there is a bigger story for triplex to properly support it.. maybe? e.g. can you open a remote file in triplex today? would love a contribution to make that overarching story better, i've never actually used those kinds of files before.

vercel · 2026-01-18T22:22:10Z

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
triplex-cloud	Ignored	Preview	Jan 21, 2026 11:22am
triplex-docs	Ignored	Preview	Jan 21, 2026 11:22am

…ponents folders

itsdouges mentioned this pull request Jan 12, 2026

Add drag-and-drop support for 3D assets #363

Open

noel-schenk and others added 9 commits January 12, 2026 09:39

feat: adds initial file drag and drop functionality

f3a2462

fix remote vscode URL (wsl)

bc1618d

fix type errors in example

a71a3c3

implement import relative paths

dcb417e

Improvement drag and drop support

9845cca

- Added add to active component / scene - Added drag and drop support for default exports

linter

005b694

autoformat

e4b9a17

fixed dragging over canvas.

1004eb6

fixed minor bug when loading scenes

214fc45

Bellian force-pushed the main branch from 83f838e to 886173b Compare January 13, 2026 13:38

Bellian added 3 commits January 14, 2026 14:50

fix already imported default import name

2b324b2

add error when not importing TS / TSX files

c8828fe

fixed missing import

8fb318d

itsdouges reviewed Jan 17, 2026

View reviewed changes

itsdouges added 2 commits January 18, 2026 22:48

feat: move to pdnd, use subscriptions, format, use object post api

a6af849

chore: remove unused api

1ddbbfa

chore: remove unused

c4b6c02

fix: block pointer events when dragging

d725e28

feat: show message when adding a component outside of the allowed com…

98e2615

…ponents folders

itsdouges merged commit d233b75 into pmndrs:main Jan 21, 2026
12 checks passed

		}


		export function useDND(sendCallback: any, activeScene: string, scenePath: string) {

Uh oh!

Uh oh!

Conversation

noel-schenk commented Jan 7, 2026 • edited by itsdouges Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Jan 7, 2026

Uh oh!

itsdouges commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noel-schenk commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

itsdouges commented Jan 9, 2026

Uh oh!

itsdouges commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Bellian commented Jan 13, 2026

Uh oh!

Bellian commented Jan 14, 2026

Uh oh!

Bellian commented Jan 16, 2026

Uh oh!

itsdouges commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

itsdouges commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

itsdouges commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noel-schenk commented Jan 18, 2026

Uh oh!

itsdouges commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

noel-schenk commented Jan 7, 2026 •

edited by itsdouges

Loading

itsdouges commented Jan 8, 2026 •

edited

Loading

noel-schenk commented Jan 8, 2026 •

edited

Loading

itsdouges commented Jan 9, 2026 •

edited

Loading

itsdouges commented Jan 17, 2026 •

edited

Loading

itsdouges commented Jan 17, 2026 •

edited

Loading

itsdouges commented Jan 18, 2026 •

edited

Loading

itsdouges commented Jan 18, 2026 •

edited

Loading

vercel Bot commented Jan 18, 2026 •

edited

Loading