> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/reference/styling/custom-components/components-editor.md).

# 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