Is HTML, CSS and Studio Recommended?

🧑‍💻 Technical Support
1

Hi, so this is question that I’ve looked into and I haven’t gotten a solid answer about it. I am trying to create a UI “hamburger menu” for my project that allows for me to reset values. I’ve looked around for a example and they seem to use html and CSS to make it work.

I want to see if it’s possible to create this but there’s something I need to understand first. Is it recommended to use CSS and HTML in studio TS and JS files? How does it work exactly if it’s okay? Where does the HTML go, like in the add function? Is it possible to configure built in UI elements using CSS?

Any help in understanding what is possible would be helpful.

Thanks,

Leonard Wedderburn

2

Hi Leonard!

It’s not recommended, but since 8th Wall experiences are JavaScript applications running in a browser, it’s certainly possible. You can integrate HTML and CSS within your Studio TS/JS files by dynamically creating and manipulating elements, like in this custom component example:

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'html-ui',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  add: (world, component) => {
    const overlay = document.createElement('div')
    overlay.style.position = 'absolute'
    overlay.style.top = '0'
    overlay.style.left = '0'
    overlay.style.width = '100%'
    overlay.style.height = '100%'
    overlay.style.background = 'rgba(0, 0, 0, 0.5)'
    overlay.style.display = 'flex'
    overlay.style.justifyContent = 'center'
    overlay.style.alignItems = 'center'

    const button = document.createElement('button')
    button.textContent = 'Click Me'
    button.style.padding = '10px 20px'
    button.style.fontSize = '16px'

    button.addEventListener('click', () => {
      alert('Button clicked!')
    })

    overlay.appendChild(button)
    document.body.appendChild(overlay)
  },
  tick: (world, component) => {
  },
  remove: (world, component) => {
  },
})

Don’t forget to attach the custom component to any entity in your scene.

That said, the reason HTML/CSS isn’t recommended is because 8th Wall aims to unify development across different devices. If your experience runs on a headset in the future, HTML-based UI may not be compatible, whereas using the built-in UI system ensures adaptability across different rendering pipelines.

Right now, the built-in UI system is still in early stages, but we’re actively improving it. If you want the best long-term support, I’d suggest experimenting with the native UI system where possible.