# 2D UI workflow

**URL:** <https://forum.8thwall.com/t/2d-ui-workflow/4673>\
**Category:** Technical Support\
**Created:** [February 2, 2025, 7:01am UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673 "2025-02-02T07:01:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mitch\_Duncan](https://avatars.discourse-cdn.com/v4/letter/m/8491ac/32.png) [@Mitch\_Duncan](https://forum.8thwall.com/u/Mitch_Duncan)\
**Post date:** [February 2, 2025, 7:01am UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673/1 "2025-02-02T07:01:14Z")

</div>

What’s the best workflow to create extensive 2D elements where you can control alignments, pinning and such? And are you able to do this in a visual editor as of yet? Or is it a lot of building and checking, building and checking etc.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [February 3, 2025, 4:35pm UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673/2 "2025-02-03T16:35:19Z")

</div>

Hey Mitch, we’re actively working to improve the UI system. Since there’s no preview of 2D elements yet it’s still a lot of building and checking how the changes look.

---

<div class="post-metadata">

**Author:** ![Mitch\_Duncan](https://avatars.discourse-cdn.com/v4/letter/m/8491ac/32.png) [@Mitch\_Duncan](https://forum.8thwall.com/u/Mitch_Duncan)\
**Post date:** [February 6, 2025, 9:15pm UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673/3 "2025-02-06T21:15:37Z")

</div>

No worries - is there documentation or examples for 2D UI that I can look into? Things like scrolling dynamic content etc.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [February 6, 2025, 9:32pm UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673/4 "2025-02-06T21:32:58Z")

</div>

Great question! While we’re building out the UI system the easiest way to do something like that would be to inject CSS into your project. This isn’t the recommended workflow as the UI system is our ultimate goal, however it’s a workaround for projects at the moment.

---

<div class="post-metadata">

**Author:** ![LennyM](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LennyM](https://forum.8thwall.com/u/LennyM)\
**Post date:** [February 18, 2025, 10:04pm UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673/5 "2025-02-18T22:04:21Z")

</div>

QQ – I was wondering if there is a way to create the UI outside the platform and send/ receive events to the experience. For example, having a button in an external UI that toggles the visibility of 3D elements in the experience.

Is there a recommended approach for achieving this?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [February 19, 2025, 7:51pm UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673/6 "2025-02-19T19:51:11Z")

</div>

Hi, welcome to the forums!

When you say “outside of the platform” do you mean using HTML elements that have been inserted onto the page at runtime? Or something else?

---

<div class="post-metadata">

**Author:** ![LennyM](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LennyM](https://forum.8thwall.com/u/LennyM)\
**Post date:** [February 20, 2025, 12:09pm UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673/7 "2025-02-20T12:09:19Z")

</div>

Hi, George! Thanks for your reply ^-^

By outside of the platform, I mean interacting with the experience using JavaScript directly within the internal scripts of Studio. For example:

- Using querySelector to modify the font-weight, or any property, of a text element.
- Triggering animations via the browser’s Animate API when clicking a button.
- Creating more complex GUIs using css grid, positioning elements with position relative and position absolute within their parent containers, etc.

Is there a recommended way to achieve this through the registered components? Or would I need to handle it differently?

Thanks!

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [February 20, 2025, 6:15pm UTC](https://forum.8thwall.com/t/2d-ui-workflow/4673/8 "2025-02-20T18:15:19Z")

</div>

Take a look at my reply to this thread here: [Is HTML, CSS and Studio Recommended? - #2 by GeorgeButler](https://forum.8thwall.com/t/is-html-css-and-studio-recommended/4870/2)

If you combine this with dispatching events you certainly can drive actions in your experience using HTML elements.
