Danila Poyarkov 3e4e3d0b8b

refactor: rename @open-pencil/codegen to @open-pencil/emit (#822 )

* refactor: rename @open-pencil/codegen to @open-pencil/emit

In design tools codegen means design-to-code, which is dom-css's job and
Core's codegen tools'. The package builds and prints the syntax trees
exporters emit, so name it for that. It has not been released yet.

* fix: alias @open-pencil/emit to its source in Vite

The rename missed the escaped regex, so Vite resolved the package through
its built dist output.

2026-10-04 11:22:20 +00:00

1.2 KiB

Raw Blame History

@open-pencil/design-jsx

OpenPencil design JSX: build editable scene trees with <Frame>, <Text>, and the other elements, style them with paint and effect helpers and design variables, and export scene nodes back to JSX.

Set the JSX import source in tsconfig.json ("jsx": "react-jsx", "jsxImportSource": "@open-pencil/design-jsx") or per file:

/** @jsxImportSource @open-pencil/design-jsx */
import { renderTree } from '@open-pencil/core/design-jsx'
import { Frame, Text, solid } from '@open-pencil/design-jsx'
import { SceneGraph } from '@open-pencil/scene-graph'

const graph = new SceneGraph()
await renderTree(
  graph,
  <Frame w={320} p={16} fill={solid('#FFFFFF')}>
    <Text>Hello</Text>
  </Frame>
)

JSX written as a string, as agents and the MCP render tool send it, needs no build step:

import { renderJSX } from '@open-pencil/core/design-jsx'

await renderJSX(graph, '<Frame w={320} p={16} bg="#FFFFFF"><Text>Hello</Text></Frame>')

This package depends only on @open-pencil/scene-graph and @open-pencil/emit. Rendering needs icons, SVG conversion, and layout, which @open-pencil/core/design-jsx provides; other engines can supply their own through createDesignJSXRenderer(services).

1.2 KiB Raw Blame History

@open-pencil/design-jsx

1.2 KiB

Raw Blame History