Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

HTML Embed Component

HTML Embed is a component created for A-Frame. The HTML Embed component allows for arbitrary html to be inserted into your aframe scene. It allows you to update the display within A-Frame simply by manipulating the DOM as you normally would.

In addition to rendering the html to the A-Frame scene it allows for interaction. Most css pseudo selectors such as hover, active, focus and target should work with interactivity enabled without any modifications to your css. Mouse events can be attached to the html elements as usual.


  • All styles and images must be in the same origin or allow access via CORS; this allows the component to embed all of the assets required to render the html properly to the canvas via the foreignObject element.
  • transform-style css is limited to flat. This is mainly due to it not being rendered properly to canvas so element bounding for preserve-3d has not yet been implemented. If the rendering is fixed as some point I may go back and get it working as well.
  • "a-" tags do not render correctly as XHTML embeded into SVG, so any parent "a-" elements of the embed html will be converted to div tags for rendering. This may mean your css will require modification.
  • Elements that require rendering outside of the DOM such as the iframe and canvas element will not work.
  • :before and :after pseudo elements can't be accessed via the DOM so they can't be used in the element to determine the object bounds. As such, use them with caution.
  • Form elements are not consistently rendered to the canvas element so some basic default styles are included for consistency.
  • Currently there is no support for css transitions.


Property Default Description
ppu 256 number of pixels to display per unit of the aframescene.


Method Description
forceRender Forces the htmlembed component to be re-render


Name Event Type Description
focusableenter FocusableEvent Dispatched when the cursor is moved over a focusable element. Useful for providing visual/haptic feedback to the user letting them know that the element is clickable.
focusableleave FocusableEvent Dispatched when the cursor is moved out of a focusable element.
inputrequired InputrequiredEvent Dispatched when an element that requires keyboard input or a user selection is clicked. Can be used to bring up a custom keyboard.
resized N/A Dispatched when the embed html content size is changed.
rendered N/A Dispatched when the embedded HTML content is rendered to the A-Frame Scene.


Property Description
target The target element that the cursor is over.


Property Description
target The input element that the user selected.

How to Use

To use the component you just add the component to the A-Frame entity containing the html. For example:

  <a-entity htmlembed position="0 0 -5">
    <h1>An Example</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <img src="myImages.png" alt="image">


Using CSS

HTML Embed allows you to add interactivity by adding standard css interactions such as hover:

	display: inline-block;
	border-radius: 5px;
	background-color: #dddddd;
	color: #000000;
	background-color: #000000;
	color: #ffffff;
	<a-entity htmlembed>
		<a href="#home" class="button">Home</a>

Using Javascript

You can add javascript interactivity in the standard way either by events on the elements themselves or alternatively by adding event listeners to the DOM.

	<a-entity htmlembed>
		<div id="clickme" onclick="console.log('do something')">Click Me</div>
	console.log('do something else');


Interactions are achived though the normal cursor and laser-controls components and allow you to interacte with the html as if you where using a mouse. If an element is clicked that requires keyboard input the inputrequired event is dispatched so a keyboard overlay can be invoked.



Install and use by directly including the browser files:

  <title>My A-Frame Scene</title>
  <script src=""></script>
  <script src=""></script>

    <a-entity position="0 1.6 -1" htmlembed>
		<p>My HTML</p>


Install via npm:

npm install aframe-htmlembed-component

Then register and use.



  • Install Node.js.

  • Clone the project to your file system:

git clone
  • enter the aframe-htmlembed-component directory.

cd ./aframe-htmlembed-component

  • Install build dependencies

npm install

  • Run the build script.

npm run build

The compiled file is at aframe-htmlembed-component/dist/build.js


HTML Component for A-Frame VR that allows for interaction with HTML in VR. Demo







No releases published


No packages published

Contributors 4