Triplex for VS Code

Triplex for VS Code turns Visual Studio Code and Cursor into a visual IDE, bringing the best features of Triplex for you to stay in context while coding.

1. Visit the Visual Studio Code marketplace
2. Press the "Install" button
3. Make sure "Auto Update" is checked

The Open in Triplex CodeLens action appears next to component functions. Clicking it opens the component in Triplex.

While focused in a tsx or jsx file selecting the Triplex: Open File action through the Command Palette will open the first found component of that file in Triplex.

By default all React components can be opened by Triplex. When wanting to scope down files that can be opened you can create a configuration file and populate the "files" field.

For example the following configuration marks all tsx files inside the components folder can be opened, everything else is excluded.

{
  "files": ["../src/components/**/*.tsx"]
}

For more information see config.json Options > files.

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).

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(): JSX.Element;
+export function Component(): JSX.Element;

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.

Learn how to start a project and work with Triplex.