Shopify Remix App - Rendering Theme Extension within main jsx app files

Topic summary

A developer is seeking guidance on implementing a preview feature for a Shopify theme extension within their Remix app. They observed another app that displays a live preview of its theme extension, which dynamically updates based on settings adjusted in a left-side panel.

The developer wants to replicate this functionality but is uncertain about the implementation approach. They’re specifically asking:

  • How to import the theme extension into their main JSX files (e.g., app_index.jsx)
  • How to render the theme extension preview within the app interface

An image was shared showing the reference implementation, but the technical details of how to achieve this integration remain unanswered. The question is currently open with no responses or solutions provided.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.

Hello,

I was browsing through some apps and found one that renders it’s Theme Extension as a “Preview” which also changes based on different settings on the left:

I would like this feature in my app that I am building but not sure how am I supposed to:

  1. Import it inside one of jsx files e.g. app._index.jsx

  2. Render it

Does anyone have any suggestions/ideas?