HTML (basic)


genARate Studio offers the possibility to create more advanced and interactive AR content elements by using basic Javascript, CSS and HTML coding

On low end this allows you to copy and paste embedded code snippets e.g. provided by youtube, google maps,  and others, or to include simple iframe connections to external websites.

On high end, you can create advanced content elements like interactive image galleries, video carousels or similar.

How to:
  • Click on the HTML icon in the toolbar
  • A thumbnail appears inside the scenario editor
  • Click on the thumbnail inside the scenario editor to move/position the element via drag & drop and to access the HTML editor and settings
Note: As soon as you include your HTML/JS/CSS code and click the button “Run” in the settings, the thumbnail will show your created scenario inside the editor.

Name:  Select a unique name for your HTML Fragment

Size: Set individual size of HTML Fragment (by width and height, aspect ratio is fixed)

Position: Set individual position of HTML Fragment (by x and y)

Rotation: Set rotation of HTML Fragment (by °)

Arrange: Define hierarchy in between different content elements

Fix to Screen: Disconnects HTML Fragment from trigger image and fixes it to screen so it will always be shown on same position, no matter how trigger image is moved

Hidden: Makes HTML Fragment invisible at start of AR experience (to e.g. make it appear by Button interaction later)

Transparent Background: Makes Background of HTML Fragment transparent

Unique ID: Internal ID of content element, mostly used for referencing inside HTML fragments

HTML editor:
  • Click on tab “Content” in to access the editor fields for Javascript, CSS and HTML
  • Include your code into the according field(s)
  • Click on “Run” button below the three fields to execute the included script, a preview becomes visible inside the scenario editor

JS: Enter Javascript Code here

CSS: Enter CSS Code here

HTML: Enter HTML Code here

RUN: Runs the code you have included and shows result within scenario editor


Explanation can be found here.

Debugging HTML Fragments
  • Currently there is no debugging available inside the genARate GUI, yet
  • Advanced users can debug HTML fragments using Android the Developer Console
  • Learn More Here
Close Menu
Close Panel