# 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 %}


---

# 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.starcounter.io/2.3.2/guides/blendable-web-apps/html-compositions.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.