# Custom Component Bundle Structure?

**URL:** <https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002>\
**Category:** Elements API\
**Created:** [October 18, 2024, 12:50pm UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002 "2024-10-18T12:50:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [October 18, 2024, 12:50pm UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002/1 "2024-10-18T12:50:57Z")

</div>

Reading the documentation here: [Bundle Structure](https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure)

I am trying to create an extremely simple Custom Component bundle structure which has this template:

```auto
<div id="{{id}}" class="p-sm text-lg text-center {{customColor}}">
    My HTML Element
</div>

```

and this property:

```auto
{
    "groups": [{
        "title": "Theme Color Example",
        "properties": [{
            "title": "Color",
            "id": "customColor",
            "format": "text-{{value}}",
            "themeColor": {
                "default": {
                    "name": "blue",
                    "brightness": 600
                }
            }
        }]
    }]
}

```

I was setting up the bundle structure and have come unstuck when trying to figure out how to include the template as the documentation states this:

```auto
...
templates (folder)
- index.html
- each (folder)
  + index.html
  + styles.css
- include (folder)
 + extra.html
- page (folder)
  + page.html

```

I can’t figure put how my simple template fits in that structure? 😕

Would it be possible to have an example of a very simple Custom Component elementsdevpack (bundle) to look at.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 18, 2024, 3:05pm UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002/2 "2024-10-18T15:05:34Z")

</div>

Here’s the structure of a pack we use internal for some simple components.

The bundle is called “Awesome.elementsdevpack” and inside is the following:

 ![CleanShot 2024-10-18 at 4 .02.58@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/b/abee335855e6335b557653f4c79ef1f782457a0a.jpeg)

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [October 18, 2024, 3:32pm UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002/3 "2024-10-18T15:32:55Z")

</div>

I am still unclear as to what the folder templates content should look like for the simple template example I gave, i.e. what the contents are and how the template example I gave should be setup inside it?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 18, 2024, 4:24pm UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002/4 "2024-10-18T16:24:25Z")

</div>

Okay, here’s the basics…

- logrunner.elementsdevpack (folder)
  - Components (Folder)
    - com.logrunner.component.simple (folder)
      - properties.json (your properties code from above)
      - info.json (you’ll need this to describe your component, [see docs](https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure/info.json))

    - templates
      - index.html (your Template HTML from above)

Let me know if you’re still stuck or have move questions!

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [October 18, 2024, 7:24pm UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002/5 "2024-10-18T19:24:35Z")

</div>

Ok, so the ‘info.json’ in the docs, immediately inside of the components folder shouldn’t be there?

Shouldn’t the ‘templates’ folder be inside of the ‘logrunner’ folder?

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [October 19, 2024, 11:48am UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002/6 "2024-10-19T11:48:04Z")

</div>

Here is what my folder structure now looks like:

 ![CleanShot 2024-10-19 at 12.36.15](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/b/ab1db9d4665ff44c39fff2b22d35b6c6c98a7b49.png)

Not sure if this is 100% correct as the available information is slightly inconsistent?

My info.json is:

```auto
{
  "identifier": "com.logrunner.component.simple",
  "author": "Logrunner",
  "title": "simple",
  "group": "Fun",
  "build": "001",
  "version": "0.0.1",
}

```

The question now, is how to install and access it.

When I double click on logrunner.elementsdevpack, it appears to interact with Elements (i.e. launches Elements if it isn’t running) but doesn’t give any indication that it has received the new Custom Component. It doesn’t appear in the Components Gallery and there is no message saying it has been added. 🤔

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 19, 2024, 2:37pm UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002/7 "2024-10-19T14:37:34Z")

</div>

a quick video of how to a put a simple example would be great

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 19, 2024, 10:02pm UTC](https://forums.realmacsoftware.com/t/custom-component-bundle-structure/45002/8 "2024-10-19T22:02:44Z")

</div>

The current betas won’t load dev components right now – we have it working internally (it’s how we build the built-in components), but it’s disabled in the builds we send out.

As you know we’re really trying to focus on customers/users right now, and to get a public beta shipped. We hope to open up developer support in Elements late this year — I’ll have more news on that soon-ish.