> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/alpine/clone.md).

# x-clone

Copies an element from another part of the DOM to the location of a template.

Copies an element from another part of the DOM to the location of a template. It works in the opposite direction from `x-teleport`.

| Directive              | What it does                                                                                                      |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `x-clone="expression"` | On a `<template>`. The expression evaluates to the source element; a copy is inserted directly after the template |

The template stays in the DOM as the marker, and the copy is removed with it. Alpine re-initializes on the copy and adds the template's scope, so directives on the copy read state from the template's position rather than the source's. When the source is itself a `<template>`, its first content element is cloned.

## Examples

### A basic clone

Use any expression that resolves to an element:

```html
<div id="promo-banner">…</div>

<div>
  <template x-clone="document.getElementById('promo-banner')"></template>
</div>
```

The copy appears right after the template, inside the second `<div>`.

### Hoisting tab buttons out of theme blocks

Use `x-clone` to move markup a theme block rendered in the wrong place. Each tab block renders its own button as a `<template data-tab-template>` inside its panel; the tablist clones them out in order:

```html
<div
  x-tabs
  x-data="{
    get tabTemplates() {
      return Array.from($el.querySelectorAll('[data-tab-template]'));
    }
  }"
>
  <div x-tabs:tablist role="tablist">
    <template x-clone="tabTemplates[0]"></template>
    <template x-clone="tabTemplates[1]"></template>
  </div>
  <!-- Tab panels, each containing its own <template data-tab-template> -->
</div>
```

Theme blocks can only render inside their own panel, so `core-tabs`, the Related products section, and the Card slider tabs section all assemble their tablists this way. Because the copy takes the template's scope, the cloned buttons resolve `$tab` against the tablist, not against the panel they came from.

## Options

There is no options object and no modifiers. The expression is evaluated once during initialization. The source element must exist by then.