# How to separate code from the ux file?

**URL:** <https://forums.fusetools.com/t/how-to-separate-code-from-the-ux-file/1140>\
**Category:** How-to Discussions\
**Created:** [May 7, 2015, 6:23pm UTC](https://forums.fusetools.com/t/how-to-separate-code-from-the-ux-file/1140 "2015-05-07T18:23:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![yyyannag](https://avatars.discourse-cdn.com/v4/letter/y/4da419/32.png) [@yyyannag](https://forums.fusetools.com/u/yyyannag)\
**Post date:** [May 7, 2015, 6:23pm UTC](https://forums.fusetools.com/t/how-to-separate-code-from-the-ux-file/1140/1 "2015-05-07T18:23:46Z")

</div>

What if I plan on writing a big project, and I don’t want all the code inside the main ux file… is there a way of creating an external code file (like .cs or something) and reference to it?

---

<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:** [May 8, 2015, 9:12am UTC](https://forums.fusetools.com/t/how-to-separate-code-from-the-ux-file/1140/2 "2015-05-08T09:12:12Z")

</div>

Hi!

You can make multiple `.ux` files and just cut parts of your main UX file into there. The separate UX-file becomes a class that you can instantiate anywhere.

Example, old main UX file:

```auto
<Foo>
    <Bar>
        <Moo />
    </Bar>
</Foo>

```

Say I cut the `<Bar>..</Bar>` code and put it in `MyBar.ux`:

```auto
<Bar>
    <Moo />
</Bar>

```

Then I can change my main UX file to:

```auto
 <Foo>
     <MyBar />
 </Foo>

```

---

<div class="post-metadata">

**Author:** ![garposmack](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/garposmack/32/557_2.png) [@garposmack](https://forums.fusetools.com/u/garposmack)\
**Post date:** [October 13, 2015, 7:51pm UTC](https://forums.fusetools.com/t/how-to-separate-code-from-the-ux-file/1140/3 "2015-10-13T19:51:15Z")

</div>

And how could a comunicate animate an element that is on MainView.ux, from MyBar.ux. Lets say i want to animate and image when i click on a button on MyBar. Is that possible?

---

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://forums.fusetools.com/u/eric)\
**Post date:** [December 8, 2015, 5:58am UTC](https://forums.fusetools.com/t/how-to-separate-code-from-the-ux-file/1140/4 "2015-12-08T05:58:43Z")

</div>

+1

---

<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 8, 2015, 9:54am UTC](https://forums.fusetools.com/t/how-to-separate-code-from-the-ux-file/1140/5 "2015-12-08T09:54:24Z")

</div>

For now you have to use JavaScript to communicate between different UX files.

---

<div class="post-metadata">

**Author:** ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)\
**Post date:** [December 8, 2015, 9:58am UTC](https://forums.fusetools.com/t/how-to-separate-code-from-the-ux-file/1140/6 "2015-12-08T09:58:29Z")

</div>

We have features in an upcoming release that’ll address these questions, and we’ll update the [learn-section](https://www.fusetools.com/learn) with some best practices too.