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

# Vue SDK

`@open-pencil/vue` существует для того, чтобы OpenPencil мог быть чем-то большим, чем самостоятельное дизайн-приложение.

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

Приложение OpenPencil — одна из возможных компоновок этого набора. SDK — это то, с помощью чего вы создаёте другие.

SDK предоставляет:

- инжектированный контекст редактора
- рендеринг холста на базе CanvasKit
- компосаблы для выделения, команд, меню, панелей свойств и переменных
- headless-структурные примитивы: `PageListRoot`, `PropertyListRoot`, `ToolbarRoot`
- встроенные i18n-примитивы для меню, панелей, диалогов и пользовательских переключателей языка

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

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

## Зачем нужен SDK

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

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

SDK — это слой, который делает всё это возможным.

## Принципы проектирования

- **Headless прежде всего**: логика и структура без стилей приложения
- **Компосаблы вместо обёрток**: используйте компосаблы, когда нет значимой структурной координации
- **Осознанное публичное API**: стабильные экспорты из `packages/vue/src/index.ts`
- **Интеграция с фреймворком**: Vue-интеграция поверх `@open-pencil/core`

## Как устроен пакет

SDK состоит из двух основных слоёв:

1. **Компосаблы** — для состояния и действий редактора
2. **Примитивы** — для значимой структуры UI

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

## Разделы API

- [Компоненты](/programmable/sdk/api/components/)
- [Компосаблы](/programmable/sdk/api/composables/)
- [Расширенные](/programmable/sdk/api/advanced/)