-14

I am creating similar to snack.exop.io editor. like how are they showing phone preview on the right side? like we write something and it will show a preview of how it looks like in device, I don't even know what is this concept called, what to search really. I want to create something similar to this image.enter image description here

How can I add this emulator functionality in web-app.

Sagar Chavada
  • 5,169
  • 7
  • 40
  • 67

2 Answers2

2

https://snack.exop.io uses https://appetize.io There are pricing: https://appetize.io/pricing, but you can also try for free.

App itself runs mobile simulator on backend, and sends screenshots to front-end, that is being rendered in Canvas. More you can read here https://news.ycombinator.com/item?id=8487813

Firanolfind
  • 1,559
  • 2
  • 17
  • 36
1

snack.expo.io uses an iFrame, probably modified using JavaScript. Create an iFrame with no src (cross-origin policy applies), and use this code to modify it. This W3Schools tutorial shows how to modify an iFrame's styles using the contentWindow property. However, I couldn't find a way to modify the content itself with that, but I found this Stack Overflow question which should help.

function loadFrame() {
  x = document.getElementById('iframe').contentWindow;
  x.document.write("<html><body>Put content here</body></html>");
}

However, be careful with what you allow the user to modify, since document.write can be a form of eval. Make sure to always escape the user's text.

Anyways, here's a fiddle.

Isla
  • 85
  • 9