Phoenix Code
-
|
I'm trying to enable element clicking and highlighting in Phcode’s live preview for my React app. So that when I click the element in the preview, it reveals the file and highlights the code and vise versa. When I click the code, it highlights the element in the preview. Issue: Live preview didn't work with my React app using their build in server. I tried using a custom Vite server at http://localhost:8080/. With the custom server, it showed the index of my app but doesn't allow the element highlighting. Highlighting works with a static test.html file using Phcode’s built-in server, but fails with the custom server (shows React app’s index instead of navigating to the html file when file is clicked). Questions: |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Phcode doesn't currently support live preview with element highlighting for React applications. While the built-in server works well with static HTML files for highlighting elements, this functionality hasn't been extended to React applications yet. The behavior you're experiencing is expected. When using a custom Vite server for your React app, you'll see your app rendering correctly, but the bidirectional highlighting feature (clicking elements in preview to highlight code and vice versa) isn't available for React components. We've added your feature request to our backlog as we're considering implementing React component highlighting in future releases. #2186 For now, static HTML/CSS/JS files work best with our current live preview highlighting system. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks you for your detailed response. Do you know of a tool that offers
this? Keep me updated if you guys implement it. I love using Phcode.
Thanks!
…On Tue, Mar 25, 2025 at 11:58 PM Arun Bose ***@***.***> wrote:
Phcode doesn't currently support live preview with element highlighting
for React applications. While the built-in server works well with static
HTML files for highlighting elements, this functionality hasn't been
extended to React applications yet.
The behavior you're experiencing is expected. When using a custom Vite
server for your React app, you'll see your app rendering correctly, but the
bidirectional highlighting feature (clicking elements in preview to
highlight code and vice versa) isn't available for React components.
We've added your feature request to our backlog as we're considering
implementing React component highlighting in future releases. #2186
<#2186>
For now, static HTML/CSS/JS files work best with our current live preview
highlighting system.
—
Reply to this email directly, view it on GitHub
<#2185 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AQVCC2PE45ZUIR5Q24CTPIL2WJFX7AVCNFSM6AAAAABZZHZGM2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENRSGQZDCNY>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
Phcode doesn't currently support live preview with element highlighting for React applications. While the built-in server works well with static HTML files for highlighting elements, this functionality hasn't been extended to React applications yet.
The behavior you're experiencing is expected. When using a custom Vite server for your React app, you'll see your app rendering correctly, but the bidirectional highlighting feature (clicking elements in preview to highlight code and vice versa) isn't available for React components.
We've added your feature request to our backlog as we're considering implementing React component highlighting in future releases. #2186
For now, static HTML/CSS/J…