improve rendering

src/lib/configTypes.ts

@@ -108,15 +108,20 @@ async function renderMarkdown(content: string): Promise<string> {
   return typeof html === 'string' ? html : String(html)
 }
 
-/** Wireweave DSL to HTML+CSS; theme from document dark mode. See https://www.wireweave.org/ */
-async function renderWireframe(content: string): Promise<string> {
-  const { parse, render } = await import('@wireweave/core')
+/** Wireweave DSL to SVG; theme from document dark mode. See https://www.wireweave.org/ */
+async function renderWireframe(content: string, options?: RenderOptions): Promise<string> {
+  const { parse, renderToSvg } = await import('@wireweave/core')
   const doc = parse(content)
   const isDark =
     typeof document !== 'undefined' &&
     document.documentElement?.classList?.contains('dark')
-  const { html, css } = render(doc, { theme: isDark ? 'dark' : 'light' })
-  return `<style>${css}</style>${html}`
+  const { svg } = renderToSvg(doc, {
+    theme: isDark ? 'dark' : 'light',
+    width: options?.width ?? 1200,
+    height: options?.height,
+    padding: 24,
+  })
+  return svg
 }
 
 export const CONFIG_TYPES: ConfigType[] = [

src/lib/registerBuiltinNodes.tsx

@@ -45,7 +45,7 @@ export function registerBuiltinNodes(): void {
     id: 'render',
     component: RenderingNode,
     defaultStyle: { width: 384, height: 320 },
-    defaultData: {},
+    defaultData: { viewportWidth: 1200, viewportHeight: 800 },
     idPrefix: 'rnd_',
     hasInput: true,
     hasOutput: false,