# How to import AFRAME properly?

**URL:** <https://forum.8thwall.com/t/how-to-import-aframe-properly/2485>\
**Category:** Studio Feedback\
**Created:** [August 20, 2024, 12:32am UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485 "2024-08-20T00:32:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gabriel\_Magalhaes](https://avatars.discourse-cdn.com/v4/letter/g/b19c9b/32.png) [@Gabriel\_Magalhaes](https://forum.8thwall.com/u/Gabriel_Magalhaes)\
**Post date:** [August 20, 2024, 12:32am UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/1 "2024-08-20T00:32:32Z")

</div>

This question might help me understand some issues I’m having while trying to develop using 8th Wall and also related to the Niantic Studio.

I was trying to use the application Fireworks as base to create mine and understand the fundamentals of how to trigger particle systems and animations. Considering he application has some UI/button triggered animations and particle systems as well.

> **[Fireworks | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/fireworks-aframe/)**
>
> Celebrate any occasion with AR fireworks!

I tried replicating it (Fireworks) on Niantic Studio.  
So I went to Niantic and tried this: I created that same directory structure and files, and tried to run it.  
But it keep giving me the AFRAME is not defined error. What could it be?

 ![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/a135bbb8a3b68cdfec8f17a05c85409cec57350f.png)

I understand that I’ve imported everything that I would need as you can see in the head.html. But I’m missing something. I checked the src of the and they are all up.

What could it be ?

---

<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:** [August 21, 2024, 5:51pm UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/2 "2024-08-21T17:51:50Z")

</div>

Hi Gabriel,

I think there’s some confusion. The project you’re referencing is a _Cloud Editor_ project that uses A-Frame. Cloud Editor is our code oriented solution that requires a Pro plan. The screenshots you’re showing are using Studio, sometimes referred to as _Cloud Studio_, which is our visual editing solution with code capabilities. The projects are not interchangeable as the backends are totally different however you can manually convert projects back and forth with custom components and threejs.

---

<div class="post-metadata">

**Author:** ![Gabriel\_Magalhaes](https://avatars.discourse-cdn.com/v4/letter/g/b19c9b/32.png) [@Gabriel\_Magalhaes](https://forum.8thwall.com/u/Gabriel_Magalhaes)\
**Post date:** [August 22, 2024, 7:51am UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/3 "2024-08-22T07:51:49Z")

</div>

Alright. I don’t have the pro plan. I’m still trying to understand the 8th wall. And how it works, to be able to supply the service.

Then, knowing what Project I’m talking about, and that I’m in Cloud Studio, what should I add/edit in the code to make it work properly?

I feel like using something from the /ecs would help, but I couldn’t work it out only with the documentation.

---

<div class="post-metadata">

**Author:** ![Gabriel\_Magalhaes](https://avatars.discourse-cdn.com/v4/letter/g/b19c9b/32.png) [@Gabriel\_Magalhaes](https://forum.8thwall.com/u/Gabriel_Magalhaes)\
**Post date:** [September 13, 2024, 7:29am UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/4 "2024-09-13T07:29:41Z")

</div>

Hey @GeorgeButler , How could I import and use the AFRAME properly on Niantic Studio ?  
I kept getting the error “Uncaught ReferenceError: AFRAME is not defined”, can you help me ?

---

<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:** [September 13, 2024, 3:17pm UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/5 "2024-09-13T15:17:20Z")

</div>

Hi Gabriel,

A-Frame isn’t currently supported in Studio, but you might be able to bring it in through a CDN like Skypack using a Custom Component.

---

<div class="post-metadata">

**Author:** ![Isaac\_Del\_Castillo](https://avatars.discourse-cdn.com/v4/letter/i/5e9695/32.png) [@Isaac\_Del\_Castillo](https://forum.8thwall.com/u/Isaac_Del_Castillo)\
**Post date:** [May 13, 2025, 6:37pm UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/6 "2025-05-13T18:37:50Z")

</div>

Hey George, is A-Frame supported in Studio as of 5/13/2025? If not, do you guys plan on bringing support for it?

---

<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:** [May 13, 2025, 7:01pm UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/7 "2025-05-13T19:01:00Z")

</div>

Hey, A-Frame is not supported in Studio as Studio uses its own ECS architecture with three.js. There are no plans to support A-Frame at this time.

---

<div class="post-metadata">

**Author:** ![Isaac\_Del\_Castillo](https://avatars.discourse-cdn.com/v4/letter/i/5e9695/32.png) [@Isaac\_Del\_Castillo](https://forum.8thwall.com/u/Isaac_Del_Castillo)\
**Post date:** [May 14, 2025, 1:43pm UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/8 "2025-05-14T13:43:47Z")

</div>

Last question, George: Does Studio render .html files (body.html, head.html) like the Cloud Editor?

---

<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:** [May 14, 2025, 4:20pm UTC](https://forum.8thwall.com/t/how-to-import-aframe-properly/2485/9 "2025-05-14T16:20:01Z")

</div>

Nope, only components.
