Danila Poyarkov b9753aa016

docs: sync translations with documentation changes since v0.15.1 (#886 )

Eleven translated pages changed in English since the last release without
matching updates: system requirements, the Lint tab, AI chat diff tools,
collaboration with agents, design JSX imports and export fidelity,
Storybook and live-app export, lint fixes, page navigation, and Checking
Designs. Bring de, es, fr, it, pl, and ru up to date, add the sections
the abridged translations lacked where a change landed, use each
language's UI labels, and point the export page at documents list.

2026-10-04 16:38:35 +00:00

3.4 KiB

Raw Blame History

title	description
Renderizador JSX	Crear diseños desde JSX y exportar selecciones como JSX con Tailwind.

Renderizador JSX

OpenPencil puede convertir JSX declarativo en un árbol de diseño. El mismo sistema está disponible en el chat con AI, MCP y eval.

<Frame flex="col" gap={16} p={24} w={320} bg="#ffffff" radius={16}>
  <Text size={18} weight="bold">Card Title</Text>
  <Text color="#667085">Description</Text>
  <Button>Continue</Button>
</Frame>

Elementos

JSX	Resultado
`<Frame>`	Marco, opcionalmente con disposición automática
`<Text>`	Objeto de texto
`<Rectangle>`	Rectángulo
`<Ellipse>`	Elipse
`<Image>`	Forma con relleno de imagen
Componente registrado	Árbol reutilizable definido por la aplicación

Disposición

flex="row" o flex="col" activa la disposición automática.
gap establece la separación.
p, px, py, pt, pr, pb y pl establecen el relleno.
align y justify controlan la alineación.
wrap permite saltos de línea.

Tamaño y posición

w y h aceptan números, "fill" o "hug".
minW, maxW, minH y maxH establecen límites.
x e y fijan la posición cuando el objeto no participa en el flujo.

Apariencia

bg o fill define el relleno.
color define el color del texto.
stroke, strokeWidth, opacity y radius controlan contorno, opacidad y esquinas.
shadow añade una sombra.

Tipografía

size, font, weight, lineHeight, letterSpacing y align configuran el texto. Los nombres de propiedades se mantienen en inglés porque forman parte de la API JSX.

Eventos y metadatos

Las propiedades desconocidas se conservan cuando el tipo de objeto las admite. Los eventos DOM no se ejecutan: el resultado es un documento de diseño, no una aplicación web.

Importar en código

En código de aplicación o de biblioteca sin interfaz, importa Frame, Text y el resto de exportaciones de autoría desde @open-pencil/design-jsx y crea los nodos con renderTree o renderJSX de @open-pencil/core/design-jsx, que añaden iconos, conversión de SVG y disposición. Para escribir los árboles como TSX, define "jsxImportSource": "@open-pencil/design-jsx" con "jsx": "react-jsx" en tsconfig.json, o añade al archivo el comentario /** @jsxImportSource @open-pencil/design-jsx */. El entorno de scripting determina qué API se exponen a eval; las exportaciones de los paquetes no son globales automáticamente.

Exportar a JSX

El menú Copiar como → JSX convierte la selección en JSX y clases Tailwind. La salida intenta conservar jerarquía, disposición, tamaños, colores, tipografía y bordes, y sirve como punto de partida para implementar una interfaz. El JSX exportado se puede editar y volver a renderizar en el documento. La exportación incluye capas ocultas y bloqueadas, restricciones, límites de tamaño, rellenos apilados, de degradado y de imagen, contornos, efectos, máscaras y enlaces a variables, así que al renderizarla se reproducen y diff_jsx muestra los cambios en cualquiera de ellos. Aún no se escriben el texto enriquecido con estilos mixtos, los trazados vectoriales, las cuadrículas de disposición, los estilos compartidos ni las definiciones de propiedades de componentes. Las instancias se escriben como marcos con su contenido, de modo que el JSX exportado se sostiene por sí solo.

3.4 KiB Raw Blame History