Is HTML, CSS and Studio Recommended?

🧑‍💻 Technical Support
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.