Pre-Existing Project

Your pre-existing projects can be used with Triplex without doing anything, if you're missing some required dependencies Triplex will let you know!

Some components expect there to be global styles available, such as when using Tailwind or when using a global stylesheet for themes.

Follow How to Set Up Tailwind CSS to get them showing up.

Yes. Aliases defined in your tsconfig.json are honored by Triplex. For example the following config lets you import modules from the src/components folder through the @components/ module prefix.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

If you've used Next.js module path aliases it's exactly the same.

Triplex renders components in a isolated sandbox taking control of rendering your component. If your component was not built to be self-contained it may error, common with components that rely on Context or global state.

To fix this you could:

• Refactor your component to be self contained
• Use a Global Provider to provide the missing React context
• Declare the required Context / state inside another component and open that one instead
• Set default props

If your project doesn't use TypeScript there is less type information available to populate the editor. You can get some inference for your components by declaring default props.

export function Component({ color = "red", x = 0, visible = true }) {
  return (
    <mesh visible={visible}>
      <meshBasicMaterial color={color} position={[x, 0, 0]} />
    </mesh>
  );
}

We recommend building with TypeScript for the best experience.

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() {