# UX include

**URL:** <https://forums.fusetools.com/t/ux-include/4662>\
**Category:** General\
**Created:** [December 13, 2015, 4:35pm UTC](https://forums.fusetools.com/t/ux-include/4662 "2015-12-13T16:35:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![massimiliano.aronica](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@massimiliano.aronica](https://forums.fusetools.com/u/massimiliano.aronica)\
**Post date:** [December 13, 2015, 4:35pm UTC](https://forums.fusetools.com/t/ux-include/4662/1 "2015-12-13T16:35:38Z")

</div>

Hello,

I was just wondering if there is a way to simply include a UX file in another, to avoid the main ux code growing too much. I know the possibility to just add a but I’m having some reference problem with the compiler in doing this, that I still can’t get rid of.

Thanks Max

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [December 13, 2015, 4:42pm UTC](https://forums.fusetools.com/t/ux-include/4662/2 "2015-12-13T16:42:16Z")

</div>

Is this the same question as this: [https://www.fusetools.com/community/forums/general/app\_with\_multiple\_ux\_files](https://www.fusetools.com/community/forums/general/app_with_multiple_ux_files) ?

---

<div class="post-metadata">

**Author:** ![massimiliano.aronica](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@massimiliano.aronica](https://forums.fusetools.com/u/massimiliano.aronica)\
**Post date:** [December 13, 2015, 5:10pm UTC](https://forums.fusetools.com/t/ux-include/4662/3 "2015-12-13T17:10:16Z")

</div>

Not exactly, I had read that but I was asking for some possibility of low-level file inclusion. I tried with that suggestion, but I can’t get it to work in my situation. Just consider the SocialMedia example and try to get the Grid component in an external file. I can’t understand how to resolve the missing reference for EdgeNavigator.Active once the grid is in a new ux file. What 's the correct way to do it?

Thanks Max

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [December 13, 2015, 5:35pm UTC](https://forums.fusetools.com/t/ux-include/4662/4 "2015-12-13T17:35:38Z")

</div>

There is no way of reference components in another file. These are like local variables, and not accessible outside. I know that the Fuse Team is working on this. For now you need to solve this with a huge file, JS Observables, or custom Uno code.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [December 13, 2015, 6:35pm UTC](https://forums.fusetools.com/t/ux-include/4662/5 "2015-12-13T18:35:21Z")

</div>

There is a new feature on the way that will make splitting UX files much easier, stay tuned 🙂

It won’t be an include-feature, but a way to define classes with external dependencies that will be injected automatically (i.e. automatic dependency injection). In practice, this will make it straight forward to take a subsection of an UX document and put in a seprate file.

---

<div class="post-metadata">

**Author:** ![ancheta.wern](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/ancheta.wern/32/250_2.png) [@ancheta.wern](https://forums.fusetools.com/u/ancheta.wern)\
**Post date:** [March 22, 2018, 8:13am UTC](https://forums.fusetools.com/t/ux-include/4662/6 "2018-03-22T08:13:44Z")

</div>

any updates on this? I was reading about componentization [https://www.fusetools.com/docs/componentization](https://www.fusetools.com/docs/componentization)  
but there’s doesn’t seem to be any mention of allowing ux files to be included in another.

Basically, I’m trying to include a component (`components/CustomBtn.ux`):

```auto
<Panel ux:Class="CustomBtn" Margin="4" Color="#007bff">
</Panel>

```

Into another file:

```auto
<ux:Include File="components/CustomBtn.ux" />

```

But it doesn’t seem to be possible.

I’m getting the error:

```auto
You cannot ux:Include the file 'components/CustomBtn.ux' because it's root node is marked with ux:Class. You can instantiate the class with <Project_CustomBtn_res /> instead.

```

---

<div class="post-metadata">

**Author:** ![Arturs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arturs/32/582_2.png) [@Arturs](https://forums.fusetools.com/u/Arturs)\
**Post date:** [March 22, 2018, 10:50am UTC](https://forums.fusetools.com/t/ux-include/4662/7 "2018-03-22T10:50:40Z")

</div>

Hey!

You can use your class instance in other files like this:

```auto
<CustomBtn />

```