Description
I would like to work on implementing a multi-device responsive preview mode in Webify to improve the frontend development and testing experience.
Currently, users can preview their code in a single layout only. This feature would introduce simultaneous responsive previews for multiple screen sizes directly inside the editor interface.
Additionally, I would also like to introduce an "Open Preview in New Tab" functionality to improve preview usability and testing workflow.
As a GSSoC 2026 contributor who has already contributed multiple times to this repository, I believe this feature would significantly enhance the usability and professionalism of Webify.
Proposed Features
- Live mobile preview
- Tablet preview
- Desktop preview
- Simultaneous responsive rendering
- Toggle device layouts
- Responsive frame simulation
- Dynamic scaling support
- Open preview in separate browser tab
- Dedicated fullscreen preview experience
Benefits
- Improves frontend testing workflow
- Helps users build responsive websites more efficiently
- Creates a more professional editor experience
- Enhances developer productivity
- Makes Webify comparable to modern frontend playground tools
UI/UX Improvements
- Device switching controls
- Clean responsive preview frames
- Better preview organization
- Improved preview scalability
- Better fullscreen preview workflow
Expected Outcome
Users will be able to test and visualize their websites across multiple screen sizes in real time without leaving the editor.
Additionally, users will also be able to open the live preview in a dedicated tab for better testing and presentation purposes.
Additional Context
I have already contributed multiple times to this repository under GSSoC 2026 and would like to continue improving the platform with advanced frontend tooling features.
Please assign this issue to me under GSSoC 2026.
Description
I would like to work on implementing a multi-device responsive preview mode in Webify to improve the frontend development and testing experience.
Currently, users can preview their code in a single layout only. This feature would introduce simultaneous responsive previews for multiple screen sizes directly inside the editor interface.
Additionally, I would also like to introduce an "Open Preview in New Tab" functionality to improve preview usability and testing workflow.
As a GSSoC 2026 contributor who has already contributed multiple times to this repository, I believe this feature would significantly enhance the usability and professionalism of Webify.
Proposed Features
Benefits
UI/UX Improvements
Expected Outcome
Users will be able to test and visualize their websites across multiple screen sizes in real time without leaving the editor.
Additionally, users will also be able to open the live preview in a dedicated tab for better testing and presentation purposes.
Additional Context
I have already contributed multiple times to this repository under GSSoC 2026 and would like to continue improving the platform with advanced frontend tooling features.
Please assign this issue to me under GSSoC 2026.