Add Responsive View Toggle (Mobile/Tablet/Desktop)

[shreya-ramesh]

Implement a feature that allows users to preview the generated website in different device screen sizes — such as mobile, tablet, and desktop.
This will help users better understand how their website responds to different screen widths, improving usability and design quality across devices.

Proposed Implementation:
Add a toolbar or dropdown with view options: "Mobile", "Tablet", "Desktop".
Resize the live preview window (or apply corresponding CSS width constraints) based on the selected option.

Why This Matters:
Responsive design is a key part of modern web development. Adding this feature will help users build mobile-friendly websites more effectively.

Let me know if I can take up this issue.

-GSSoC'25 Contributor

[PrakharDoneria]

Assigned @shreya-ramesh

[pranavi290504]

Hi @PrakharDoneria

I’d also love to contribute to this issue. My approach would be to add a responsive view toggle for Mobile, Tablet, and Desktop directly in the Karbon interface. Instead of just resizing, I’ll ensure the preview dynamically adapts to standard breakpoints (e.g., 375px, 768px, 1024px) so users get a more realistic device simulation.

This enhancement will give designers and developers a clearer sense of how their sites behave across devices, making Karbon even more user‑friendly. Kindly consider assigning me as well.

[PrakharDoneria]

Added @pranavi290504 as contributor

[jyothi-samberpu]

Hi @PrakharDoneria,

I’m a GSSoC'25 contributor and would love to work on this issue!

The responsive view toggle will be a great addition to help users preview their website across devices. I plan to implement a toolbar with options like “Mobile”, “Tablet”, and “Desktop” that resizes the preview window using appropriate CSS constraints.

Kindly assign this to me. Excited to contribute further to Karbon!

Thanks,
Jyothi

[PrakharDoneria]

@jyothi-samberpu added