@kittycad/web-view

Various helpers to get a Zoo KittyCAD WebRTC stream onto a web page!

An example of this component in action can be found at https://viewer.zoo.dev

Features

• Each instance runs on a Web Worker, preventing main worker blocking.
• Take KCL as a string input, or a map of path -> strings.
• Supports raw scene and modeling commands.
• Managed multiplexing so that many can be used at once on a page.
• Supports Zoo camera controls (middle to pan, right to rotate, wheel to zoom).
• Written in vanilla TypeScript for easy porting to other frameworks.

Installation

npm install @kittycad/web-view @kittycad/lib

You will need to copy node_modules/@kittycad/kcl-wasm-lib/kcl_wasm_lib_bg.wasm to the root of a directory that will be served by your web server.

IMPORTANT NOTE ON AUTHENTICATION

For local development, use an API token. OAuth authentication is locked to Zoo's domains currently. If you're an external user to Zoo, use an API token for production as well.

Quick demo

make serve

Building

make build

Example

import * as zoo from '@kittycad/lib'
import { ZooWebView } from '@kittycad/web-view'

document.addEventListener('DOMContentLoaded', () => {
  const token = 'api-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'

  // If no token is passed, then OAuth will trigger, so watch out!
  const zooClient = new zoo.Client({
    token,
    baseUrl: 'wss://api.zoo.dev',
  })

  const zooWebView = new ZooWebView({
    zooClient,
    size: {
      width: 256,
      height: 256,
    },
  })
  
  document.body.appendChild(zooWebView.el)
  
  zooWebView.addEventListener('ready', (ev: Event) => {
    const executor = ev.target.rtc.executor()
    const project = new Map<string, string>()
    project.set('main.kcl', `
      import "ok.kcl"
      sketch001 = startSketchOn(XY)
      profile001 = startProfile(sketch001, at = [-3.5, -2.23])
        |> line(end = [4.53, 5.73])
        |> line(end = [5.18, -3.74])
        |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
        |> close()
      extrude001 = extrude(profile001, length = 5 * 1)
      |> appearance(color="#0000FF")
    `)
    project.set('ok.kcl', `
      sketch001 = startSketchOn(XY)
      profile001 = startProfile(sketch001, at = [-1.5, -2.23])
        |> line(end = [4.53, 5.73])
        |> line(end = [5.18, -3.74])
        |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
        |> close()
      extrude001 = extrude(profile001, length = 5 * 1)
      |> appearance(color="#FF0000")
    `)
    void executor.submit(project).then(() => {
      console.log('All done running!')
    })
  })
})

By default, starting one web-view stops any other running web-views. Set allowMultiple: true when a project needs any number running at once.

Pretty screenshot of making tons of these