Display your apps or websites inside an Android or iOS frame.

It is largely inspired and based on the awesome work of the Ionic team.

Table of contents



This component could be added to your web application using the following methods.

If you are using our Starter Kit, no need to worry about this, this component is included, therefore you could skip the "Installation" chapter.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo lazy image component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src=""></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/demo

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:


import '@deckdeckgo/demo';


import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/demo/dist/loader'; deckDeckGoElement();


The "Demo" Web Component could be integrated using the tag <deckgo-demo/>.

<deckgo-demo src=""></deckgo-demo>


No slots are available for this component.


This component offers the following options which could be set using attributes:

srcstringThe source Url of your application or website. This will be used as src attribute of the encapsulated iframe.
frame-titlestringA title for the frame, could be use for accessibility reason.
mode'md' or 'ios''md'The type of device frame. md for Android, ios for iPhone.
instantbooleanfalseIn case you would like to load the frame as soon as the component is loaded.

Per default the iframe is not be loaded (expect if you specify instant to true). Therefore it's up to you to call the method lazyLoadContent to create it. The reason behind this decision is allowing you to lazy load your content.


The <deckgo-demo/> component exposes the following methods:

Lazy load the iframe

lazyLoadContent(): Promise<void>

Refresh iframe size and reload content

updateIFrame(): Promise<void>


The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--deckgo-demo-placeholder-background#323639A background color for the content of the device until the frame is loaded.


On load and on window resize, the component will take care of resizing itself. It will compute the width and height of the host element to apply these to its content, to the shadowed iframe.