Add response previewer for text/html

[ashitaprasad]

Tell us about the task you want to perform and are unable to do so because the feature is not available

Users should be able to see rendered HTML in response preview.

[PCoder23]

hi, can i work on this issue ?

[ashitaprasad]

Sure @PCoder23, you can send across a PR so that we can discuss on it further.

[PCoder23]

sure.

[animator]

Some more details on the issue and what has to be accomplished👇

[YoussefMoRabie]

Hi @animator @ashitaprasad
I want to work on this
Can I use webview_universal?

[animator]

@Yousef-Rabia you can use it, if it works.

[chetanr25]

I have implemented the HTML rendering using the webview_flutter package. This allows the response to be viewed in the pane as if it were a web browser, with full interactivity—users can interact with the content just like they would in a normal browser.

While this approach renders most of the content accurately (similar to Postman), one limitation is that images are not being rendered correctly. Aside from that, it’s very close to what you would expect in Postman’s "Preview" tab.

I have attach screenshots showing the comparison between our application and Postman while previewing an API response.

Screenshots

Video Explanation

Below is a video demonstrating how the webview_flutter package allows us to render the response fully, just like a regular web browser. You can see the interactivity in action:

ScreenRecording_10-13-2024.16-39-50_1.MP4

Looking forward to your feedback, and let me know if this approach works, or if there are other suggestions to improve it.

[chetanr25]

@ashitaprasad Just following up on my previous implementation. Does this solution align with the direction you're looking for?

One key advantage of the current implementation, using webview_flutter, is that it provides full browser-like interactivity, which surpasses what Postman offers. While Postman allows you to render HTML in a Preview tab, it remains a static view, limiting user interaction.

In contrast, with this approach, we can now fully render HTML responses with the ability to interact with the content dynamically, just like in a regular web browser. Users can follow links, submit forms, and navigate between pages seamlessly within the response pane. This adds a whole new dimension to debugging and exploring API responses, especially for complex HTML content.

Given these additional capabilities, I would appreciate feedback and confirmation on whether I can move forward with this and make a PR. Let me know if this is in line with the project’s goals!

[ashitaprasad]

@chetanr25 The current approach is incorrect as you have added a new Preview tab beside Response Body and Headers which is redundant. We already have Preview option inside Response Body which was built to render previewer based on response content type. Currently, it shows formatted HTML. In case webview works that will be shown here.
webview_flutter is currently supported only for ios/android/macos you will have to switch between webview and formatted HTML code view based on the platform.
Also, when using webview passing the HTML body will not render the correct view (images are not loaded), you will have to pass the full URL to render it in webview.
Also, currently there is some issue with scrolling in desktop version.

[chetanr25]

Thank you for the feedback. Will work in it.