diff --git a/Elements/src/extension.dib b/Elements/src/extension.dib
index a9794fbc3..9a0e53d41 100644
--- a/Elements/src/extension.dib
+++ b/Elements/src/extension.dib
@@ -18,6 +18,7 @@ using Microsoft.DotNet.Interactive;
 using Microsoft.DotNet.Interactive.Formatting;
 using Elements;
 using Elements.Geometry;
+using Elements.Geometry.Solids;
 using Elements.Serialization.glTF;
 using Newtonsoft.Json;
 using System;
@@ -134,6 +135,7 @@ if (KernelInvocationContext.Current is { } currentContext)
 double DEFAULT_MODEL_WIDTH = 600;
 double DEFAULT_MODEL_HEIGHT = 400;
 Material DEFAULT_CURVE_MATERIAL = BuiltInMaterials.XAxis;
+Material DEFAULT_SOLID_MATERIAL = BuiltInMaterials.Default;
 
 string GetModelViewerSrc(Model model, double? width=null, double? height=null) {
     var gltf = model.ToGlTF();
@@ -193,6 +195,45 @@ Formatter.Register<Model>((model, writer) => {
     writer.Write(src);
 }, "text/html");
 
+Formatter.Register<SolidOperation>((solidOp, writer) => {
+    var model = new Model();
+    model.AddElement(new GeometricElement { Representation = solidOp, Material= DEFAULT_SOLID_MATERIAL});
+    var src = GetModelViewerSrc(model);
+    writer.Write(src);
+
+}, "text/html");
+Formatter.Register<Representation>((representation, writer) => {
+    var model = new Model();
+    model.AddElement(new GeometricElement { Representation = representation, Material= DEFAULT_SOLID_MATERIAL});
+    var src = GetModelViewerSrc(model);
+    writer.Write(src);
+
+}, "text/html");
+Formatter.Register<IEnumerable<SolidOperation>>((solidOps, writer) => {
+    var model = new Model();
+    foreach(var solidOp in solidOps) {
+        model.AddElement(new GeometricElement { Representation = solidOp, Material= DEFAULT_SOLID_MATERIAL});
+    }
+    var src = GetModelViewerSrc(model);
+    writer.Write(src);
+
+}, "text/html");
+Formatter.Register<Transform>((xform, writer) => {
+    var model = new Model();
+        model.AddElements(xform.ToModelCurves());
+    var src = GetModelViewerSrc(model);
+    writer.Write(src);
+}, "text/html");
+
+Formatter.Register<IEnumerable<Transform>>((xforms, writer) => {
+    var model = new Model();
+    foreach(var xform in xforms) {
+        model.AddElements(xform.ToModelCurves());
+    }
+    var src = GetModelViewerSrc(model);
+    writer.Write(src);
+}, "text/html");
+
 void DisplayModel(Model model, double? width=null, double? height=null) {
     var src = GetModelViewerSrc(model, width ?? DEFAULT_MODEL_WIDTH, height ?? DEFAULT_MODEL_HEIGHT);
     KernelInvocationContext.Current.DisplayAs(src, "text/html");
@@ -206,3 +247,7 @@ void SetDefaultDisplaySize(double width, double height) {
 void SetDefaultCurveMaterial(Material mat) {
     DEFAULT_CURVE_MATERIAL = mat;
 }
+
+void SetDefaultSolidMaterial(Material mat) {
+    DEFAULT_SOLID_MATERIAL = mat;
+}
diff --git a/scratch.dib b/scratch.dib
index dc59a09fa..278cbf2a6 100644
--- a/scratch.dib
+++ b/scratch.dib
@@ -4,7 +4,7 @@
 
 #!csharp
 
-#r "/Users/iankeough/dev/Hypar/Elements/Elements/src/bin/Debug/netstandard2.0/Hypar.Elements.dll"
+#r "./Elements/src/bin/Debug/netstandard2.0/Hypar.Elements.dll"
 #r "nuget:glTF2Loader, 1.1.3-alpha"
 #r "nuget:Unofficial.LibTessDotNet, 2.0.0"
 #r "nuget:SixLabors.Fonts, 1.0.0-beta19"
@@ -13,200 +13,7 @@
 
 #!csharp
 
-using System.CommandLine;
-using System.CommandLine.Invocation;
-using Microsoft.DotNet.Interactive;
-using Microsoft.DotNet.Interactive.Formatting;
-using Elements;
-using Elements.Geometry;
-using Elements.Serialization.glTF;
-using Newtonsoft.Json;
-using System;
-using System.IO;
-
-var viewerSrc = @"
-<div id=""main_DIV_ID"" style=""height:WIDTH_VAR;width:HEIGHT_VARpx;""></div>
-</div>
-<script type=""module"">
-import * as THREE from 'https://unpkg.com/three@0.126.0/build/three.module.js';
-import { GLTFLoader } from 'https://unpkg.com/three@0.126.0/examples/jsm/loaders/GLTFLoader.js';
-import { OrbitControls } from 'https://unpkg.com/three@0.126.0/examples/jsm/controls/OrbitControls.js';
-const loader = new GLTFLoader();
-const scene = new THREE.Scene();
-
-let loaderScene = new THREE.Scene();
-scene.add(loaderScene);
-
-const width = WIDTH_VAR;
-const height = HEIGHT_VAR;
-const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
-// TODO: Configure this lighting to match what we do on Hypar's web UI.
-const light = new THREE.AmbientLight(0xaaaaaa);
-scene.add(light);
-
-const directionalLight = new THREE.DirectionalLight(0xaaaaaa, 0.5);
-scene.add(directionalLight);
-
-
-const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
-renderer.setSize(width, height);
-document.getElementById('main_DIV_ID').appendChild(renderer.domElement);
-
-camera.position.z = 5;
-
-const controls = new OrbitControls(camera, renderer.domElement);
-
-function base64ToArrayBuffer (base64) {
-    var binary_string = window.atob(base64);
-    var len = binary_string.length;
-    var bytes = new Uint8Array(len);
-    for (var i = 0; i < len; i++) {
-        bytes[i] = binary_string.charCodeAt(i);
-    }
-    return bytes.buffer;
-}
-// adapted from looeee's solution https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/3
-const fitCameraToObject = function (scene, offset = 1.25) {
-    offset = offset || 1.25;
-    let boundingBox = null;
-    scene.traverseVisible((child) => {
-        const objectBox = new THREE.Box3().setFromObject(child)
-        if (boundingBox === null) {
-            boundingBox = objectBox
-        } else {
-            boundingBox = boundingBox.union(objectBox)
-        }
-    })
-    const center = boundingBox.getCenter(new THREE.Vector3());
-    const size = boundingBox.getSize(new THREE.Vector3());
-
-    // get the max size of the bounding box (fits to width OR height as needed )
-    const maxDim = Math.max(size.x, size.y, size.z);
-    const fov = camera.fov * (Math.PI / 180);
-    let cameraZ = Math.abs(maxDim / 4 * Math.tan(fov * 2));
-    // if our model is nearly flat, view it from the top, otherwise view it from a corner.
-    if (size.y < 0.001) {
-        // position the camera looking straight down at the object.
-        camera.position.copy(center.clone().add(new THREE.Vector3(0, maxDim * offset, 0)))
-    } else {
-        camera.position.copy(center.clone().add(size.clone().multiplyScalar(offset)))
-    }
-
-    const minZ = boundingBox.min.z;
-    const cameraToFarEdge = (minZ < 0) ? -minZ + cameraZ : cameraZ - minZ;
-
-    camera.far = cameraToFarEdge * 10;
-    camera.updateProjectionMatrix();
-
-    if (controls) {
-        // set camera to rotate around center of loaded object
-        controls.target = center;
-        controls.saveState();
-
-    } else {
-        camera.lookAt(center)
-    }
-}
-
-function animate () {
-    requestAnimationFrame(animate);
-    controls.update();
-    renderer.render(scene, camera);
-};
-
-const modelBytes = ""MODEL_BYTES_HERE"";
-
-const gltf = loader.parse(base64ToArrayBuffer(modelBytes), null, (glb) => {
-    loaderScene.add(glb.scene);
-    fitCameraToObject(scene);
-});
-
-
-animate();
-
-</script>
-";
-
-if (KernelInvocationContext.Current is { } currentContext)
-{
-    currentContext.DisplayAs("Add `return model;` at the end of a cell or call `DisplayModel(model, width, height);` to display an Elements model. You can also return individual elements, curves, profiles, or lists of elements, curves, or profiles to automatically populate a model.", "text/markdown");
-}
-
-double DEFAULT_MODEL_WIDTH = 600;
-double DEFAULT_MODEL_HEIGHT = 400;
-Material DEFAULT_CURVE_MATERIAL = BuiltInMaterials.XAxis;
-
-string GetModelViewerSrc(Model model, double? width=null, double? height=null) {
-    var gltf = model.ToGlTF();
-    var gltfString = Convert.ToBase64String(gltf, 0, gltf.Length);
-    return viewerSrc
-    .Replace("MODEL_BYTES_HERE", gltfString)
-    .Replace("WIDTH_VAR", (width ?? DEFAULT_MODEL_WIDTH).ToString())
-    .Replace("HEIGHT_VAR", (height ?? DEFAULT_MODEL_HEIGHT).ToString())
-    .Replace("DIV_ID", Guid.NewGuid().ToString());
-}
-
-Formatter.Register<BoundedCurve>((crv, writer) => {
-    var model = new Model();
-    model.AddElement(new ModelCurve(crv, DEFAULT_CURVE_MATERIAL));
-    var src = GetModelViewerSrc(model);
-    writer.Write(src);
-
-}, "text/html");
-
-Formatter.Register<Profile>((p, writer) => {
-    var model = new Model();
-    model.AddElements(p.ToModelCurves(null, DEFAULT_CURVE_MATERIAL));
-    var src = GetModelViewerSrc(model);
-    writer.Write(src);
-}, "text/html");
-
-Formatter.Register<Element>((e, writer) => {
-    var model = new Model();
-    model.AddElement(e);
-    var src = GetModelViewerSrc(model);
-    writer.Write(src);
-}, "text/html");
-
-Formatter.Register<IEnumerable<Element>>((elements, writer) => {
-    var model = new Model();
-    model.AddElements(elements);
-    var src = GetModelViewerSrc(model);
-    writer.Write(src);
-}, "text/html");
-
-Formatter.Register<IEnumerable<BoundedCurve>>((crvs, writer) => {
-    var model = new Model();
-    model.AddElements(crvs.Select(crv => new ModelCurve(crv, DEFAULT_CURVE_MATERIAL)));
-    var src = GetModelViewerSrc(model);
-   writer.Write(src);
-}, "text/html");
-
-Formatter.Register<IEnumerable<Profile>>((profiles, writer) => {
-    var model = new Model();
-    model.AddElements(profiles.SelectMany(p => p.ToModelCurves(null, DEFAULT_CURVE_MATERIAL)));
-    var src = GetModelViewerSrc(model);
-   writer.Write(src);
-}, "text/html");
-
-Formatter.Register<Model>((model, writer) => {
-    var src = GetModelViewerSrc(model);
-    writer.Write(src);
-}, "text/html");
-
-void DisplayModel(Model model, double? width=null, double? height=null) {
-    var src = GetModelViewerSrc(model, width ?? DEFAULT_MODEL_WIDTH, height ?? DEFAULT_MODEL_HEIGHT);
-    KernelInvocationContext.Current.DisplayAs(src, "text/html");
-}
-
-void SetDefaultDisplaySize(double width, double height) {
-    DEFAULT_MODEL_WIDTH = width;
-    DEFAULT_MODEL_HEIGHT = height;
-}
-
-void SetDefaultCurveMaterial(Material mat) {
-    DEFAULT_CURVE_MATERIAL = mat;
-}
+#!import "./Elements/src/extension.dib"
 
 #!csharp