Triplex for VS Code turns Visual Studio Code, Cursor, Windsurf, and other forks into your visual workspace, bringing the best features of Triplex for you to stay in context while coding.

Get Started

Get started by opening any React component by clicking the "Open in Triplex" CodeLens action shown on top of to components. Needing inspiration? Here's some things to start with:

• Create a project from a template
• Complete the Your First 3D Component guide
• Learn more about the scene
• Learn more about Triplex for VS Code

Community

There are a few online forums we recommend you join when building with Triplex.

• The Official Triplex Discord
• Triplex GitHub Repository (focus: roadmap, issues, bugs)
• Poimandres Collective Discord (focus: React Three Fiber ecosystem)
• Web Game Dev Discord (focus: building games)

Common Questions

Why is there a SharedArrayBuffer is not defined error?

Visual Studio Code by default doesn't run in a secure context which means certain APIs are unavailable, like SharedArrayBuffer. To enable these APIs you need to close all instances of Visual Studio Code and then re-open with the --enable-coi flag.

code --enable-coi

This flag was introduced on September 2022 (version 1.72).

Why can't I open one of my components?

Only components that are exported can be opened in Triplex. If you're trying to open a component that isn't exported you'll need to export it first.

-function Component() {
+export function Component() {

Why do I get an error opening one of my components?

Components are rendered by themselves alongside visual controls. This means if your components rely on global state or context there may be some work involved to get it rendering without an error.

To resolve you could:

• Refactor your component to be self contained
• Use a provider component to provide the missing React context
• Declare the required context or state in another component and open that instead
• Set default props

How do I reload the editor?

If there's a problem and the editor has been put into an invalid state you can reload the editor by accessing the command palette via Shift + Cmd + P then selecting "Developer: Reload Webviews".

If you think you've found a bug please raise an issue on GitHub.

Why is Triplex slow?

You might have GPU acceleration disabled. To fix:

1. Press Cmd + Shift + P
2. Search for "Preferences: Configure Runtime Arguments"
3. Add the following line of code:

   "disable-hardware-acceleration": false