CEF UI

Create a browser from the client script with a packaged URL. Higher order IDs render above lower ones.

const hud = vimp.browsers.create('package://ui/index.html')

vimp.on('ui:ready', ({ mountedAt }) => {
  console.log(`HUD mounted at ${mountedAt}`)
})

vimp.on('hud:toast', (payload) => {
  hud.executeJavaScript(
    `window.__vimpRecv?.('hud:toast', ${JSON.stringify(payload)})`,
  )
})

Inside the page, VIMP exposes a deliberately small bridge.

const unsubscribe = vimp.on('hud:toast', (payload) => {
  console.log('Toast from the client script:', payload)
})

vimp.emitClient('ui:ready', { mountedAt: Date.now() })
vimp.emitServer('garage:spawn', { model: 'adder' })

window.addEventListener('beforeunload', unsubscribe)

Message routes

• emitClient delivers a named event to client vimp.on.
• emitServer sends a named network event to the server.
• vimp.on in the page subscribes to messages delivered through the browser receive bridge and returns an unsubscribe function.

Use declaration merging in the UI and client projects to keep payloads aligned. Runtime validation is still required for CEF-originated server messages.

When inserting data into executeJavaScript, serialize it with JSON.stringify; never concatenate untrusted raw text into executable code. Destroy unused browsers, hide the cursor when the UI closes, and keep secrets out of all client-distributed HTML and JavaScript.