---
title: Vue SDK
description: Создавайте редакторы на базе OpenPencil с помощью компонентов без встроенного оформления и composables для Vue.
---

# Vue SDK

`@open-pencil/vue` позволяет использовать OpenPencil не только как самостоятельный графический редактор.

OpenPencil можно встроить в другой продукт, внутренний инструмент или специализированный редактор, а не ограничиваться готовым интерфейсом приложения.

Само приложение OpenPencil — лишь один из вариантов интерфейса, построенного с помощью этого набора инструментов. SDK позволяет создать собственный вариант.

В SDK входят:

- контекст редактора, передаваемый через механизм внедрения зависимостей Vue;
- отрисовка холста с помощью CanvasKit;
- composables для выделения, команд, меню, панелей свойств и переменных;
- структурные компоненты без встроенного оформления, в том числе `PageListRoot`, `PropertyListRoot` и `ToolbarRoot`;
- средства локализации меню, панелей и диалогов, а также компоненты для выбора языка.

## С чего начать

<SdkCardGroup>
  <SdkCard title="Начало работы" to="/programmable/sdk/getting-started" description="Установите пакет, создайте экземпляр редактора и подключите основные компоненты." />
  <SdkCard title="Архитектура" to="/programmable/sdk/architecture" description="Узнайте, как связаны composables, компоненты и контекст редактора." />
  <SdkCard title="Руководства" to="/programmable/sdk/guides/custom-editor-shell" description="Создайте собственный интерфейс редактора, панель свойств и панели навигации." />
  <SdkCard title="Справочник API" to="/programmable/sdk/api/" description="Изучите компоненты, composables и низкоуровневые публичные API." />
</SdkCardGroup>

## Для чего нужен SDK

Разным продуктам и командам нужны разные интерфейсы редактирования.

Одним нужен полноценный графический редактор, другим — компактный холст внутри приложения. SDK также подходит для внутренних инструментов, редакторов шаблонов и узкоспециализированных интерфейсов с поддержкой ИИ.

## Принципы устройства SDK

- **Без навязанного оформления:** SDK предоставляет логику и структуру, но не определяет внешний вид приложения.
- **Composable вместо лишней обёртки:** если компоненту нечем управлять в структуре интерфейса, достаточно composable.
- **Продуманный публичный API:** стабильные возможности экспортируются из `packages/vue/src/index.ts`.
- **Полноценная интеграция с Vue:** SDK связывает Vue с возможностями `@open-pencil/core`.

## Два уровня API

SDK состоит из двух основных уровней:

1. **Composables** предоставляют состояние редактора и действия над ним.
2. **Компоненты** задают значимую структуру интерфейса.

Если нужны только состояние и действия редактора, начните с composables. Если вы создаёте переиспользуемые части интерфейса, начните с компонентов.

## Разделы API

- [Компоненты](/programmable/sdk/api/components/)
- [Composables](/programmable/sdk/api/composables/)
- [Низкоуровневые API](/programmable/sdk/api/advanced/)