Update README, minor type adjustments

README.md

@@ -1,39 +1,42 @@
-# insights
 
-This template should help get you started developing with Vue 3 in Vite.
+#  Speckle - Interactive Insights workshop
 
-## Recommended IDE Setup
+This is the repo we will be using for the interactive insights workshop. It is not required to have this project running to follow the workshop. But if you want to follow along, or just play around with the viewer/code, you can clone this repo and run it locally.
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+For the workshop, we will be building a simple app on top of the Speckle Viewer. You can find the documentation [here](https://speckle.guide/viewer/).
 
-## Type Support for `.vue` Imports in TS
+##  Requirements
+This demo project is built with Vue 3/TypeScript/Tailwind, but no tool-specific knowledge is required to follow the workshop. The viewer itself is framework agnostic.
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+#### Node
+In order to run the project you need to have Node (22/LTS) installed.
 
-## Customize configuration
+#### IDE
+You can use whichever IDE you prefer. Recommended is [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (disable Vetur).
 
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
+##  Project Setup
 
+###  Install the dependencies
 ```sh
+
 npm install
+
 ```
 
-### Compile and Hot-Reload for Development
+###  Run the development server
 
 ```sh
-npm run dev
+
+npm run  dev
+
 ```
 
-### Type-Check, Compile and Minify for Production
+###  Build for production
+
+  
 
 ```sh
-npm run build
-```
 
-### Lint with [ESLint](https://eslint.org/)
+npm run  build
 
-```sh
-npm run lint
-```
+```

src/components/SpeckleViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-screen w-screen">
-    <div class="h-screen w-screen" ref="canvas" width="100%" height="100%" />
+    <div class="h-screen w-screen" ref="canvas" />
   </div>
 </template>
 
@@ -12,6 +12,7 @@ const canvas = useTemplateRef('canvas')
 const { init: initViewer, viewer, loadModelFromUrl } = useViewer()
 
 onMounted(async () => {
+  if (!canvas.value) return
   await initViewer(canvas.value)
   await loadModelFromUrl('https://app.speckle.systems/projects/24c98619ac/models/38639656b8')
 })

src/composables/viewer.ts

@@ -13,9 +13,9 @@ export default function useViewer() {
 
   /**
    * Initialize the viewer
-   * @param element - HTMLElement to initialize the viewer on
+   * @param element - HTMLDivElement to initialize the viewer on
    */
-  async function init(element: HTMLElement) {
+  async function init(element: HTMLDivElement) {
     // Set the default viewer parameters
     const params = DefaultViewerParams
     params.showStats = false