# HTML Compositions

## Introduction

When you want to deploy your custom HTML composition, you have two options:

* Use the REST API for HTML compositions
* Use the [CompositionEditor](https://github.com/Starcounter/compositioneditor)

## REST API for HTML Compositions

{% hint style="warning" %}
The HTML composition REST API is deprecated from Starcounter 2.3.1. Compositions can still be accessed through the class `HTMLComposition`
{% endhint %}

The REST API allows importing compositions for sets of blended HTML partials. The CompositionEditor has to run for this API to work.

## Composition

<mark style="color:blue;">`GET`</mark> `http://localhost:8080/sc/partial/composition?key={?}&ver={?}`

Returns the HTML of a specific composition

#### Query Parameters

| Name | Type   | Description                     |
| ---- | ------ | ------------------------------- |
| key  | string | The key of the composition.     |
| ver  | string | The version of the composition. |

{% tabs %}
{% tab title="200 The HTML of the requested composition" %}

```javascript
<style>:host{display:block}</style>
<style>
    .kitchensink-layout {
        display: flex;
    }

    .kitchensink-layout__column-left {
        flex: 0 0 160px;
        margin-right: 20px;
    }

    .kitchensink-layout__column-right {
        flex: 0 1 600px;
    }
</style>
<div class="kitchensink-layout">
    <nav class="kitchensink-layout__column-left">
        <slot name="kitchensink/nav"></slot>
    </nav>
    <div class="kitchensink-layout__column-right">
        <slot name="kitchensink/current"></slot>
    </div>
</div>
```

{% endtab %}
{% endtabs %}

## Composition

<mark style="color:green;">`POST`</mark> `http://localhost:8080/sc/partial/composition?key={?}&ver={?}`

Creates a new composition at the specified key if there's no composition there. The body consists of the composition HTML

#### Query Parameters

| Name | Type   | Description                     |
| ---- | ------ | ------------------------------- |
| key  | string | The key of the composition.     |
| ver  | string | The version of the composition. |

{% tabs %}
{% tab title="204 " %}

```javascript
```

{% endtab %}
{% endtabs %}

## Composition

<mark style="color:red;">`DELETE`</mark> `http://localhost:8080/sc/partial/composition?key={?}&ver={?}`

Deletes the composition with the specific key and version

#### Query Parameters

| Name | Type   | Description                                                                   |
| ---- | ------ | ----------------------------------------------------------------------------- |
| key  | string | The key of the composition. If the key is "all", all composition are deleted. |
| ver  | string | The version of the composition.                                               |

{% tabs %}
{% tab title="204 " %}

```javascript
```

{% endtab %}
{% endtabs %}