# Understand additional syntax for creating custom components [BetaThis feature is new and we're actively working on it.](/beta-experimental-features/#beta-features) In Design Studio, there are a number of top-level elements available in a custom component file as well as other syntax. Use our Design Studio GPT to create a custom component! [Learn how to best utilize our GPT](/journeys/create-custom-component/#design-studio-gpt) to create code for reusable, custom content. ## Required top-level syntax[](#required-top-level-syntax) You must include both ` ``` If you create multiple, non-identical `` tags, we place all of them in the `` and let the browser decide if it needs to fetch each one. ## Define `config` to use your component in the visual editor[](#config) Use the `config` variable to define how the component is referenced and export it for use in the visual editor. You must define `config` as a static object. ```html ``` ## Pass data to nested components with `context`[](#pass-data-to-nested-components-with-context) Set a `context` to store brand information, color schemes, or user inputs that you want to pass down to nested components. You can pass data down from a grandparent to a grandchild without having to pass properties manually at every level (aka props-drilling). You’d `set` the context in the highest-level component and `get` the context in any nested component. First, call `Component.context.set` with a key/value or string. All nested components can then use the context as shown below. ```html ``` Then call `Component.context.get` in the ` ``` You can access all contexts by simply omitting the context name too. ```html ``` ## Fragments: add logic without extra HTML[](#fragments) Fragments are fake elements. Whereas a `

` tag renders a certain way in an email client, a `` tag wouldn’t display at all. This makes them useful for setting conditionals. ```html ``` Above, we used fragments to conditionally render translated content. Note, the directives that set the values of attributes have no effect on `` tags, except when combined with `#is`. You can also use the `#set:html` directive to render HTML defined in the script tag or elsewhere. This is useful if a system might have trouble parsing opening and closing tags. ```html ``` ## Insert dynamic values[](#insert-dynamic-values) Additionally, you can insert full JavaScript expressions inside the content of any HTML using the standard template literal syntax `${}`. ```html

${1+2*3/4}

``` To support injecting arbitrary content inside a component, you can use [slots](/journeys/component-slots/). ```html ``` ## Comments[](#comments) You can add standard HTML comments anywhere within `