---
title: Komponenten
description: Komponenten ohne vorgegebenes Erscheinungsbild aus @open-pencil/vue.
---

# Komponenten

`@open-pencil/vue` stellt Komponenten für Arbeitsfläche, Navigation, Eigenschaften und spezialisierte Eingaben bereit, ohne deren Gestaltung vorzuschreiben.

## Editor

<SdkCardGroup>
  <SdkCard title="CanvasRoot" to="/programmable/sdk/api/components/canvas-root" description="Kontext und Struktur der Arbeitsfläche." />
  <SdkCard title="CanvasSurface" to="/programmable/sdk/api/components/canvas-surface" description="Canvas-Element innerhalb von CanvasRoot." />
  <SdkCard title="LayerTreeRoot" to="/programmable/sdk/api/components/layer-tree-root" description="Vom SDK verwalteter Ebenenbaum." />
  <SdkCard title="LayerTreeItem" to="/programmable/sdk/api/components/layer-tree-item" description="Ein Eintrag im Ebenenbaum." />
  <SdkCard title="ToolbarRoot" to="/programmable/sdk/api/components/toolbar-root" description="Zustand und Aktionen der Werkzeugleiste." />
  <SdkCard title="ToolbarItem" to="/programmable/sdk/api/components/toolbar-item" description="Ein Werkzeug der Leiste." />
  <SdkCard title="PageListRoot" to="/programmable/sdk/api/components/page-list-root" description="Vom SDK verwaltete Seitenliste." />
</SdkCardGroup>

## Eigenschaften

<SdkCardGroup>
  <SdkCard title="PropertyListRoot" to="/programmable/sdk/api/components/property-list-root" description="Gesteuerte Liste von Array-Eigenschaften." />
  <SdkCard title="PropertyListItem" to="/programmable/sdk/api/components/property-list-item" description="Füllung, Kontur oder Effekt." />
  <SdkCard title="PositionControlsRoot" to="/programmable/sdk/api/components/position-controls-root" description="Position, Größe und Transformation." />
  <SdkCard title="LayoutControlsRoot" to="/programmable/sdk/api/components/layout-controls-root" description="Automatische Anordnung und Größenmodi." />
  <SdkCard title="AppearanceControlsRoot" to="/programmable/sdk/api/components/appearance-controls-root" description="Deckkraft, Sichtbarkeit und Eckenradius." />
  <SdkCard title="TypographyControlsRoot" to="/programmable/sdk/api/components/typography-controls-root" description="Schrift, Ausrichtung und Textformatierung." />
</SdkCardGroup>

## Auswahl und Eingabe

<SdkCardGroup>
  <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Farbauswahl ohne vorgegebene Gestaltung." />
  <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Zustand und Aktionen eines Farbfelds." />
  <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Schriftauswahl mit Suche." />
  <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Kontext des Verlaufseditors." />
  <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Interaktive Verlaufsleiste." />
  <SdkCard title="GradientEditorStop" to="/programmable/sdk/api/components/gradient-editor-stop" description="Ein Verlaufspunkt." />
  <SdkCard title="NumberField" to="/programmable/sdk/api/components/number-field" description="Zahlenfeld mit Ziehen, Ausdrücken und Tastatursteuerung." />
</SdkCardGroup>