# Theme development

To get start theme development must have coding skills:

1. HTML + CSS + JS
2. [Vue](https://v3.vuejs.org/)
3. Liquid

#### Structure

* beae.elements.json
* **MyCustom**.beae.html

#### beae.elements.json

You can define all your element will build in this file.

```json

{
  "elements": {
    "myCustom": {
      "types": [
        "home",
        "product",
        "page",
        "section"
      ],
      "name": "myCustom",
      "title": "My custom element",
      "file": "MyCustom.beae.html",
      "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" \/> <\/svg>",
      "category": [
        "Theme"
      ],
      "data": {
        "title": "My custom element title",
        "settings": {
          "content": "Hello"
        }
      }
    }
  }
  ... Other elements add to below
}


```

MyCustom.beae.html

```html

<template>
    <div class="beae-element element__my-custom">
        <component :is="data?.settings?.tag ?? 'h2'" v-if="data.settings.link && data.settings.link.href" class="element__my-custom--heading">
            <a
                v-bind="data.settings.link"
                spellcheck="false"
                v-html="lang(data.settings.content)"
            />
        </component>
        <component
            :is="data?.settings?.tag ?? 'h2'"
            v-else
            class="element__my-custom--heading"
           v-html="lang(data.settings.content)"
        />
    </div>
</template>

<script>
    export default {
        name: 'Test',
        props: {
            data: {
                type: Object,
                default () {
                    return {};
                }
            }
        },
        data () {
            return {
                
            };
        },
        computed: {
            settings () {
                return [
                    {
                        params: [
                            {
                                type: 'textarea',
                                label: 'Headline text',
                                name: 'content',
                                options: {
                                    toolbar: 'short',
                                    height: 80
                                }
                            },
                            {
                                type: 'link',
                                label: 'Insert Link',
                                name: 'link'
                            },
                            {
                                type: 'choose',
                                label: 'HTML Tag',
                                name: 'tag',
                                options: {
                                    type: 'heading'
                                }
                            }
                        ]
                    }
                ];
            },

            style () {
                return [
                    {
                        group_name:'general',
                        group_title:'General',
                        selector: ' .element__heading .beae__heading',
                        type: 'text_full'
                    }
                ];
            },
            }
        },
        watch: {
             
        },
        methods: {
             
        }
    };
</script>

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.beae.dev/beae-docs/developer/theme-development.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.