# Components Editor

{% hint style="info" %}
If Alpha Features are enabled on your account, you will see the <mark style="color:orange;">`Component`</mark> tab in the right-hand navigation bar of the Klai editor.
{% endhint %}

In this **Component Editor**, you can create and edit the components you want to insert into your pages.

* You can view your component at the top of the editor. By turning on the <mark style="color:red;">**`'Show Elements'`**</mark> option, you can view the structural elements of your component.
* You can write notes in the documentation and delete components from the **General** tab.
* You can edit your component's content in either the **Component Schema** tab using JSON, or in the **HTML** tab using the HTML editor.
* You can add mock data in the **Dev Data Model** tab.
* Lifecycle namedActions receive the component schema on `action.schema` (and `action.options._componentSchema`); pass schema explicitly in options for template-triggered actions if needed.

**Note:** If you are using `model.somekey` data, the `model` refers to the page model that contains this component.

***

## See Also

* [Creating Components with Third-Party Libraries](/reference/apis-and-services/integrations/creating-components-with-third-party-libraries.md) - Complete guide with FullCalendar, Chart.js, and Leaflet examples
* [Component Best Practices](/reference/styling/custom-components/component-best-practices.md) - General guidelines for component development


---

# 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.klai.studio/reference/styling/custom-components/components-editor.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.