Wireweave

English

한국어
日本語

English

한국어
日本語

Appearance

Wireweave Core v3.0 ​

Released: 2026-05-08 · Stable · Breaking change

Wireweave Core v3.0 turns the canvas into a true multi-page surface. A single .wf document can now describe several pages side by side, and renderCanvas returns clean SVG without any built-in chrome — host applications (Dashboard, VSCode preview, docs site) own the frame, grid, and labels.

Highlights ​

§ 1.1 Multiple pages per document ​

A .wf file can contain more than one top-level page block. Pages auto-flow horizontally with a 64px gap, or you can pin each one with at(x, y) for explicit canvas coordinates.

wireframe
page "Sign in" {
  // ...
}

page "Sign up" at(720, 0) {
  // ...
}

See Pages — Multiple pages on a canvas and the grammar reference.

§ 1.2 renderCanvas returns content-only SVG ​

renderCanvas(doc) now emits only the laid-out pages and their content. There is no built-in editor chrome, grid overlay, or page label band — hosts compose those on top.

§ 1.3 New layout & rendering APIs ​

APIPurpose
renderPage(page)Render a single page as SVG.
renderCanvas(doc, opts?)Render every page laid out on the canvas.
layoutCanvas(pages, gap?)Compute placement only (no rendering).
getCanvasBounds(doc)Read overall canvas size for a document.

Placed pages expose data-page-x, data-page-y, data-page-w, data-page-h, and data-page-title so hosts can decorate them.

§ 1.4 New types ​

  • PlacedPage — { page, x, y, width, height }.
  • CanvasOptions — slimmed down; chrome-related options removed.

Breaking changes ​

Removed ​

RemovedReplacement
CanvasChrome typeHost renders its own chrome.
CanvasOptions.chrome—
CanvasOptions.canvasBackgroundSet background in host CSS.

Behavior change ​

renderCanvas(doc, { chrome: 'editor' }) previously produced an SVG that included an editor frame, grid, and page-title band. v3.0 returns only the pages; hosts must layer their own UI.

Migration guide ​

  1. Drop chrome options. Replace renderCanvas(doc, { chrome: 'editor' }) with renderCanvas(doc). If you relied on the built-in grid or title band, render it in your host.
  2. Move backgrounds to CSS. canvasBackground is gone — set the background on the wrapping element.
  3. Adopt multi-page layout (optional). If you author multiple flows in one file, add at(x, y) to pin pages, or rely on auto-flow.
  4. Read placement attributes. When decorating pages, query [data-page-title] / [data-page-x] on the rendered SVG instead of inferring positions from chrome.

What stays the same ​

  • .wf / .wireframe grammar for individual pages.
  • renderPage output for single-page rendering.
  • All component definitions and attributes.

Korean / 한국어 ​

핵심 변화 ​

  1. 다중 페이지 캔버스 — 한 .wf 파일에 여러 page 블록을 둘 수 있습니다. at(x, y) 없이 두면 64px 간격으로 가로 자동 배치되고, at(x, y) 를 붙이면 지정 좌표에 고정됩니다.
  2. renderCanvas 가 콘텐츠 전용 SVG 반환 — 에디터 프레임/그리드/페이지 제목 밴드 같은 내장 chrome 을 더 이상 그리지 않습니다. 호스트(Dashboard, VSCode 프리뷰, 문서 사이트)가 직접 그립니다.
  3. 새 API — renderPage, renderCanvas, layoutCanvas, getCanvasBounds 가 정리되었고, 렌더된 SVG 의 각 페이지에는 data-page-x/y/w/h/title 속성이 붙습니다.
  4. 새 타입 — PlacedPage ({ page, x, y, width, height }), 슬림해진 CanvasOptions.

호환성 깨짐 ​

제거됨대체
CanvasChrome 타입호스트가 직접 chrome 렌더링
CanvasOptions.chrome—
CanvasOptions.canvasBackground호스트 CSS 에서 배경 지정

renderCanvas(doc, { chrome: 'editor' }) 형태로 chrome 옵션을 넘기던 코드는 동작이 달라집니다.

마이그레이션 가이드 ​

  1. chrome 옵션 제거 — renderCanvas(doc, { chrome: 'editor' }) → renderCanvas(doc). 그리드/제목 밴드가 필요하면 호스트에서 그립니다.
  2. 배경은 CSS 로 — canvasBackground 가 사라졌습니다. 래퍼 엘리먼트 CSS 에서 설정하세요.
  3. 다중 페이지 사용 (선택) — 여러 화면을 한 파일에 모으려면 at(x, y) 로 좌표를 박거나 자동 배치를 활용합니다.
  4. 속성 읽기 — 페이지를 데코레이트할 때 렌더링된 SVG 의 [data-page-title] / [data-page-x] 등을 사용합니다.

변경 없음 ​

  • 개별 페이지의 .wf / .wireframe 문법
  • renderPage 단일 페이지 렌더링 결과
  • 모든 컴포넌트 정의 및 속성

Japanese / 日本語 ​

主な変更 ​

  1. 複数ページキャンバス — 1 つの .wf ファイルに複数の page ブロックを置けます。at(x, y) を省略すると 64px 間隔で水平方向に自動配置され、at(x, y) を指定するとキャンバス上の指定座標に固定されます。
  2. renderCanvas がコンテンツのみの SVG を返す — エディタフレーム / グリッド / ページタイトルバンドなどの組み込み chrome は描画しません。ホスト（Dashboard、VSCode プレビュー、ドキュメントサイト）が直接描画します。
  3. 新しい API — renderPage, renderCanvas, layoutCanvas, getCanvasBounds が整理され、レンダリングされた SVG の各ページに data-page-x/y/w/h/title 属性が付きます。
  4. 新しい型 — PlacedPage ({ page, x, y, width, height })、スリム化された CanvasOptions。

互換性の破壊 ​

削除代替
CanvasChrome 型ホストが直接 chrome を描画
CanvasOptions.chrome—
CanvasOptions.canvasBackgroundホスト CSS で背景を指定

renderCanvas(doc, { chrome: 'editor' }) のように chrome オプションを渡していたコードは挙動が変わります。

マイグレーションガイド ​

  1. chrome オプションを削除 — renderCanvas(doc, { chrome: 'editor' }) → renderCanvas(doc)。グリッドやタイトルバンドが必要ならホスト側で描画します。
  2. 背景は CSS で — canvasBackground は削除されました。ラッパー要素の CSS で設定してください。
  3. 複数ページの活用（任意） — 複数の画面を 1 ファイルにまとめる場合は at(x, y) で座標を固定するか、自動配置を利用します。
  4. 属性を読み取る — ページを装飾する際は、レンダリングされた SVG の [data-page-title] / [data-page-x] などを利用します。

変更なし ​

  • 各ページの .wf / .wireframe 文法
  • renderPage の単一ページレンダリング結果
  • すべてのコンポーネント定義と属性

Released under the MIT License.

Copyright 2026 Wireweave