---
title: Рендерер JSX
description: Декларативное создание дизайна с помощью JSX и обратный экспорт в JSX или HTML с Tailwind.
---

# Рендерер JSX

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

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

## Создание дизайна

Инструмент `render`, доступный в чате с ИИ, MCP и `eval` CLI, принимает JSX:

```jsx
<Frame name="Card" w={320} h="hug" flex="col" gap={16} p={24} bg="#FFF" rounded={16}>
  <Text size={18} weight="bold">Card Title</Text>
  <Text size={14} color="#666">Description text</Text>
</Frame>
```

В MCP и чате с ИИ передайте инструменту `render` строку JSX. В коде приложения или библиотеки без интерфейса импортируйте `Frame`, `Text` и другие элементы для описания дизайна из `@open-pencil/design-jsx`, а узлы создавайте через `renderTree` или `renderJSX` из `@open-pencil/core/design-jsx`: они добавляют значки, преобразование SVG и компоновку. Чтобы писать такие деревья в TSX, укажите в `tsconfig.json` `"jsxImportSource": "@open-pencil/design-jsx"` вместе с `"jsx": "react-jsx"` или добавьте в файл комментарий `/** @jsxImportSource @open-pencil/design-jsx */`. Для обратного преобразования используйте команду `export` — подробнее в разделе [Экспорт дизайна в JSX](./cli/exporting).

## Элементы

| Элемент | Создаёт | Псевдоним |
|---------|---------|-----------|
| `<Frame>` | Фрейм с автоматической компоновкой | `<View>` |
| `<Rectangle>` | Прямоугольник | `<Rect>` |
| `<Ellipse>` | Эллипс или круг | |
| `<Text>` | Текстовый объект; дочерние элементы становятся содержимым | |
| `<Line>` | Линия | |
| `<Star>` | Звезда | |
| `<Polygon>` | Многоугольник | |
| `<Vector>` | Векторный контур | |
| `<Group>` | Группа | |
| `<Section>` | Секция | |

## Свойства оформления

Для краткости свойства используют имена, близкие к Tailwind.

### Компоновка

| Свойство | Назначение |
|----------|------------|
| `flex` | `"row"` или `"col"`; включает автоматическую компоновку |
| `gap` | Расстояние между дочерними элементами |
| `wrap` | Перенос дочерних элементов на следующую строку |
| `rowGap` | Расстояние между строками при переносе |
| `justify` | `"start"`, `"end"`, `"center"` или `"between"` |
| `items` | `"start"`, `"end"`, `"center"` или `"stretch"` |
| `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl` | Внутренние отступы |

### Размер и положение

| Свойство | Назначение |
|----------|------------|
| `w`, `h` | Ширина и высота: число, `"fill"` или `"hug"` |
| `minW`, `maxW`, `minH`, `maxH` | Ограничения размера |
| `x`, `y` | Положение |

### Внешний вид

| Свойство | Назначение |
|----------|------------|
| `bg` | Цвет фоновой заливки в шестнадцатеричном формате |
| `fill` | Псевдоним для `bg` |
| `stroke` | Цвет обводки |
| `strokeWidth` | Толщина обводки; по умолчанию 1 |
| `rounded` | Радиус углов; отдельные углы: `roundedTL`, `roundedTR`, `roundedBL`, `roundedBR` |
| `cornerSmoothing` | Сглаживание углов от 0 до 1 |
| `opacity` | Прозрачность от 0 до 1 |
| `shadow` | Внешняя тень, например `"0 4 8 #00000040"` |
| `blur` | Радиус размытия слоя |
| `rotate` | Угол поворота в градусах |
| `blendMode` | Режим наложения |
| `overflow` | `"hidden"` или `"visible"` |

### Типографика

| Свойство | Назначение |
|----------|------------|
| `size` / `fontSize` | Размер шрифта |
| `font` / `fontFamily` | Семейство шрифта |
| `weight` / `fontWeight` | `"bold"`, `"medium"`, `"normal"` или число |
| `color` | Цвет текста |
| `textAlign` | `"left"`, `"center"`, `"right"` или `"justified"` |

## Экспорт в JSX

```sh
openpencil export design.fig -f jsx                   # Формат OpenPencil
openpencil export design.fig -f jsx --style tailwind  # Классы Tailwind
```

Экспортированный дизайн можно изменить как код и снова отрисовать. Экспорт записывает скрытые и заблокированные слои, ограничения, ограничения размеров, многослойные, градиентные и изображённые заливки, обводки, эффекты, маски и привязки переменных, поэтому при повторной отрисовке они воспроизводятся, а `diff_jsx` показывает изменения любого из них. Форматированный текст со смешанными стилями, векторные контуры, сетки компоновки, общие стили и определения свойств компонентов пока не записываются. Экземпляры записываются как фреймы со своим содержимым, поэтому экспортированный JSX самодостаточен.

## Сравнение изменений

```diff
 <Frame name="Card" w={320} flex="col" gap={16} p={24} bg="#FFF">
-  <Text size={18} weight="bold">Old Title</Text>
+  <Text size={24} weight="bold" color="#1D1B20">New Title</Text>
   <Text size={14} color="#666">Description</Text>
 </Frame>
```

Такое сравнение можно проверить в запросе на включение изменений, сохранить в системе управления версиями и анализировать в CI.