diff --git a/infra-sk/modules/uniform-color-sk/uniform-color-sk.ts b/infra-sk/modules/uniform-color-sk/uniform-color-sk.ts
index 348a766..15d2a15 100644
--- a/infra-sk/modules/uniform-color-sk/uniform-color-sk.ts
+++ b/infra-sk/modules/uniform-color-sk/uniform-color-sk.ts
@@ -20,7 +20,7 @@
   slot: 0,
 };
 
-// Converts the uniform value in the range [0, 1] into a two digit hex string.
+/** Converts the uniform value in the range [0, 1] into a two digit hex string. */
 export const slotToHex = (uniforms: number[], slot: number): string => {
   const s = Math.floor(0.5 + uniforms[slot] * 255).toString(16);
   if (s.length === 1) {
@@ -29,6 +29,14 @@
   return s;
 };
 
+/** Converts the two digit hex into a uniform value in the range [0, 1] */
+export const hexToSlot = (hexDigits: string, uniforms: number[], slot: number): void => {
+  let colorAsFloat = parseInt(hexDigits, 16) / 255;
+  // Truncate to 4 digits of precision.
+  colorAsFloat = Math.floor(colorAsFloat * 10000) / 10000;
+  uniforms[slot] = colorAsFloat;
+};
+
 export class UniformColorSk extends ElementSk implements UniformControl {
   private _uniform: Uniform = defaultUniform;
 
@@ -75,12 +83,9 @@
   applyUniformValues(uniforms: number[]): void {
     // Set all three floats from the color.
     const hex = this.colorInput!.value;
-    const r = parseInt(hex.slice(1, 3), 16) / 255;
-    const g = parseInt(hex.slice(3, 5), 16) / 255;
-    const b = parseInt(hex.slice(5, 7), 16) / 255;
-    uniforms[this.uniform.slot] = r;
-    uniforms[this.uniform.slot + 1] = g;
-    uniforms[this.uniform.slot + 2] = b;
+    hexToSlot(hex.slice(1, 3), uniforms, this.uniform.slot);
+    hexToSlot(hex.slice(3, 5), uniforms, this.uniform.slot + 1);
+    hexToSlot(hex.slice(5, 7), uniforms, this.uniform.slot + 2);
 
     // Set the alpha channel if present.
     if (this.hasAlphaChannel()) {
diff --git a/infra-sk/modules/uniform-color-sk/uniform-color-sk_test.ts b/infra-sk/modules/uniform-color-sk/uniform-color-sk_test.ts
index 63abbee..a9da2af 100644
--- a/infra-sk/modules/uniform-color-sk/uniform-color-sk_test.ts
+++ b/infra-sk/modules/uniform-color-sk/uniform-color-sk_test.ts
@@ -1,7 +1,7 @@
 import './index';
 import { assert } from 'chai';
 import { $$ } from 'common-sk/modules/dom';
-import { slotToHex, UniformColorSk } from './uniform-color-sk';
+import { hexToSlot, slotToHex, UniformColorSk } from './uniform-color-sk';
 import { setUpElementUnderTest } from '../test_util';
 
 describe('uniform-color-sk', () => {
@@ -19,6 +19,29 @@
     });
   });
 
+  describe('hexToSlot', () => {
+    it('converts the two digit hex into a float and stores it in the right slot.', () => {
+      const uniforms = [0, 0, 0];
+      hexToSlot('05', uniforms, 1);
+      assert.deepEqual(uniforms, [0, 0.0196, 0]);
+    });
+  });
+
+  describe('hexToSlot and slotToHex', () => {
+    it('roundtrip correctly from number to hex and back to number', () => {
+      const uniforms = [0, 0, 0];
+      for (let i = 0; i < 255; i++) {
+        // Convert a known hex and place it in slot 1.
+        hexToSlot(i.toString(16), uniforms, 1);
+
+        // Now roundtrip that value out and back into slot 2.
+        const hex = slotToHex(uniforms, 1);
+        hexToSlot(hex, uniforms, 2);
+
+        assert.equal(uniforms[1], uniforms[2]);
+      }
+    });
+  });
 
   describe('uniform-color-sk', () => {
     it('puts values in correct spot in uniforms array', () => {
@@ -36,7 +59,7 @@
       element.applyUniformValues(uniforms);
       assert.deepEqual(
         uniforms,
-        [0, 128 / 255, 144 / 255, 160 / 255, 0],
+        [0, 0.5019, 0.5647, 0.6274, 0],
       );
     });
 
@@ -55,7 +78,7 @@
       element.applyUniformValues(uniforms);
       assert.deepEqual(
         uniforms,
-        [0, 128 / 255, 144 / 255, 160 / 255, 0.5, 0],
+        [0, 0.5019, 0.5647, 0.6274, 0.5, 0],
       );
     });
 
@@ -78,11 +101,10 @@
       element.applyUniformValues(uniforms);
       assert.deepEqual(
         uniforms,
-        [0, 128 / 255, 144 / 255, 160 / 255, 0.5, 0],
+        [0, 0.5019, 0.5647, 0.6274, 0.5, 0],
       );
     });
 
-
     it('throws on invalid uniforms', () => {
       // Uniform is too small to be a color.
       assert.throws(() => {
diff --git a/particles/modules/json/index.ts b/particles/modules/json/index.ts
index e8c484d..ed2d5cb 100644
--- a/particles/modules/json/index.ts
+++ b/particles/modules/json/index.ts
@@ -3,9 +3,14 @@
 export interface SVGMetaData {
 }
 
+export interface ChildShader {
+	UniformName: string;
+	ScrapHashOrName: string;
+}
+
 export interface SKSLMetaData {
 	Uniforms: number[] | null;
-	Children: string[] | null;
+	Children: ChildShader[] | null;
 }
 
 export interface ParticlesMetaData {
diff --git a/scrap/go/scrap/scrap.go b/scrap/go/scrap/scrap.go
index 1378f20..ff32ab1 100644
--- a/scrap/go/scrap/scrap.go
+++ b/scrap/go/scrap/scrap.go
@@ -125,14 +125,21 @@
 	Value float64
 }
 
+// ChildShader is the scrap id of a single child shader along with the name that
+// the uniform should have to access it.
+type ChildShader struct {
+	UniformName     string
+	ScrapHashOrName string
+}
+
 // SKSLMetaData is metadata for SKSL scraps.
 type SKSLMetaData struct {
 	// Uniforms are all the inputs to the shader.
 	Uniforms []float32
 
-	// Child shaders. These values are the hashes of shaders, or, if the value
-	// begins with an "@", they are the name of a named shader.
-	Children []string
+	// Child shaders. A slice because order is important when mapping uniform
+	// names in code to child shaders passed to makeShaderWithChildren.
+	Children []ChildShader
 }
 
 // ParticlesMetaData is metadata for Particle scraps.
diff --git a/shaders/Makefile b/shaders/Makefile
index fc025ce..9746afd 100644
--- a/shaders/Makefile
+++ b/shaders/Makefile
@@ -55,6 +55,12 @@
 	# Run the generated tests just once under Xvfb.
 	xvfb-run --auto-servernum --server-args "-screen 0 1280x1024x24" npx karma start --single-run
 
+.PHONY: testjs-watch
+testjs-watch:
+	# Run the generated tests just once under Xvfb.
+	xvfb-run --auto-servernum --server-args "-screen 0 1280x1024x24" npx karma start --no-single-run
+
+
 get_latest_skia:
 	docker pull gcr.io/skia-public/skia-wasm-release:prod
 
diff --git a/shaders/create-named-scraps.sh b/shaders/create-named-scraps.sh
index 8d11c36..337b3d2 100755
--- a/shaders/create-named-scraps.sh
+++ b/shaders/create-named-scraps.sh
@@ -11,7 +11,7 @@
 # that is complete it should be the canconical way to create named scraps.
 
 # Create a name for each scrap.
-curl --silent -X PUT -d "{\"Hash\": \"7f3550775ad8dd3889eda2ce02429ca0e5234290a5888f3c936394e717547a0c\", \"Description\": \"Shader Inputs\"}" -H 'Content-Type: application/json' http://localhost:9000/_/names/sksl/@inputs
+curl --silent -X PUT -d "{\"Hash\": \"26a447d730ba7afe4df7709b9079fbe2d592136dca60b8ddab7e1b56ea302791\", \"Description\": \"Shader Inputs\"}" -H 'Content-Type: application/json' http://localhost:9000/_/names/sksl/@inputs
 curl --silent -X PUT -d "{\"Hash\": \"f9ae5d2b4d9b4f5f60ae47b46c034bee16290739831f490ad014c3ba93d13e46\", \"Description\": \"Shader Inputs\"}" -H 'Content-Type: application/json' http://localhost:9000/_/names/sksl/@iResolution
 curl --silent -X PUT -d "{\"Hash\": \"c56c6550edb52aff98320153ab05a2bcfa1f300e62a5401e37d16814aaabd618\", \"Description\": \"Shader Inputs\"}" -H 'Content-Type: application/json' http://localhost:9000/_/names/sksl/@iTime
 curl --silent -X PUT -d "{\"Hash\": \"4bca396ca53e90795bda2920a1002a7733149bfe6543eddfa1b803d187581a61\", \"Description\": \"Shader Inputs\"}" -H 'Content-Type: application/json' http://localhost:9000/_/names/sksl/@iMouse
diff --git a/shaders/modules/json/index.ts b/shaders/modules/json/index.ts
index e8c484d..ed2d5cb 100644
--- a/shaders/modules/json/index.ts
+++ b/shaders/modules/json/index.ts
@@ -3,9 +3,14 @@
 export interface SVGMetaData {
 }
 
+export interface ChildShader {
+	UniformName: string;
+	ScrapHashOrName: string;
+}
+
 export interface SKSLMetaData {
 	Uniforms: number[] | null;
-	Children: string[] | null;
+	Children: ChildShader[] | null;
 }
 
 export interface ParticlesMetaData {
diff --git a/shaders/modules/shadernode/index.ts b/shaders/modules/shadernode/index.ts
new file mode 100644
index 0000000..f34ca05
--- /dev/null
+++ b/shaders/modules/shadernode/index.ts
@@ -0,0 +1,334 @@
+/** Defines functions and interfaces for working with a shader.
+ *
+ * Example:
+ *
+ *    const node = new ShaderNode(ck, [imageShader1, imageShader2]);
+ *    node.compile();
+ *    const shader = node.getShader(predefinedUniformValues);
+ */
+import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';
+import { Uniform } from '../../../infra-sk/modules/uniform/uniform';
+import {
+  CanvasKit,
+  MallocObj, RuntimeEffect, Shader,
+} from '../../build/canvaskit/canvaskit';
+import { ScrapBody, ScrapID } from '../json';
+
+export const predefinedUniforms = `uniform float3 iResolution;      // Viewport resolution (pixels)
+uniform float  iTime;            // Shader playback time (s)
+uniform float4 iMouse;           // Mouse drag pos=.xy Click pos=.zw (pixels)
+uniform float3 iImageResolution; // iImage1 and iImage2 resolution (pixels)
+uniform shader iImage1;          // An input image (Mandrill).
+uniform shader iImage2;          // An input image (Soccer ball).`;
+
+/** How many of the uniforms listed in predefinedUniforms are of type 'shader'? */
+export const numPredefinedShaderUniforms = predefinedUniforms.match(/^uniform shader/gm)!.length;
+
+/**
+ * Counts the number of uniforms defined in 'predefinedUniforms'. All the
+ * remaining uniforms that start with 'i' will be referred to as "user
+ * uniforms".
+ */
+export const numPredefinedUniforms = predefinedUniforms.match(/^uniform/gm)!.length - numPredefinedShaderUniforms;
+
+/**
+ * The number of lines prefixed to every shader for predefined uniforms. Needed
+ * to properly adjust error line numbers.
+ */
+export const numPredefinedUniformLines = predefinedUniforms.split('\n').length;
+
+/**
+ * Regex that finds lines in shader compiler error messages that mention a line number
+ * and makes that line number available as a capture.
+ */
+export const shaderCompilerErrorRegex = /^error: (\d+)/i;
+
+/** The default shader to fall back to if nothing can be loaded. */
+export const defaultShader = `half4 main(float2 fragCoord) {
+  return vec4(1, 0, 0, 1);
+}`;
+
+const defaultBody: ScrapBody = {
+  Type: 'sksl',
+  Body: defaultShader,
+  SKSLMetaData: {
+    Uniforms: [],
+    Children: [],
+  },
+};
+
+/**
+ * Called ShaderNode because once we support child shaders this will be just one
+ * node in a tree of shaders.
+ */
+export class ShaderNode {
+    /** The scrap ID this shader was last saved as. */
+    private scrapID: string = '';
+
+    /** The saved configuration of the shader. */
+    private body: ScrapBody | null = null;
+
+    /** The shader code compiled. */
+    private effect: RuntimeEffect | null = null;
+
+    private inputImageShaders: Shader[] = [];
+
+    private canvasKit: CanvasKit;
+
+    private uniforms: Uniform[] = [];
+
+    private uniformFloatCount: number = 0;
+
+    /**
+     * Keep a MallocObj around to pass uniforms to the shader to avoid the need
+     * to make copies.
+     */
+    private uniformsMallocObj: MallocObj | null = null;
+
+    /**
+     * Records the code that is currently running, which might differ from the
+     * code in the editor, and the code that was last saved.
+     */
+    private runningCode = defaultShader;
+
+    /**
+     * The current code in the editor, which might differ from the currently
+     * running code, and the code that was last saved.
+     */
+    private _shaderCode = defaultShader;
+
+    private _compileErrorMessage: string = '';
+
+    private _compileErrorLineNumbers: number[] = [];
+
+    /**
+     * These are the uniform values for all the user defined uniforms. They
+     * exclude the predefined uniform values.
+     */
+    private _currentUserUniformValues: number[] = [];
+
+    private _numPredefinedUniformValues: number = 0;
+
+    constructor(canvasKit: CanvasKit, inputImageShaders: Shader[]) {
+      this.canvasKit = canvasKit;
+      if (inputImageShaders.length !== numPredefinedShaderUniforms) {
+        throw new Error(`ShaderNode requires exactly two predefined image shaders, got ${inputImageShaders.length}`);
+      }
+      this.inputImageShaders = inputImageShaders;
+      this.body = defaultBody;
+    }
+
+    /** Loads a scrap from the backend for the given scrap id. */
+    async loadScrap(scrapID: string): Promise<void> {
+      this.scrapID = scrapID;
+      const resp = await fetch(`/_/load/${scrapID}`, {
+        credentials: 'include',
+      });
+      const scrapBody = (await jsonOrThrow(resp)) as ScrapBody;
+      this.setScrap(scrapBody);
+    }
+
+    /** Sets the code and uniforms of a shader to run. */
+    setScrap(scrapBody: ScrapBody): void {
+      this.body = scrapBody;
+      this._shaderCode = this.body.Body;
+      this.currentUserUniformValues = this.body.SKSLMetaData?.Uniforms || [];
+      this.compile();
+    }
+
+    /**
+     * Saves the scrap to the backend returning a Promise that resolves to the
+     * scrap id that it was stored at, or reject on an error.
+     */
+    async saveScrap(): Promise<string> {
+      const body: ScrapBody = {
+        Body: this._shaderCode,
+        Type: 'sksl',
+        SKSLMetaData: {
+          Uniforms: this._currentUserUniformValues,
+          Children: [],
+        },
+      };
+
+      // POST the JSON to /_/upload
+      const resp = await fetch('/_/save/', {
+        credentials: 'include',
+        body: JSON.stringify(body),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      });
+      const json = (await jsonOrThrow(resp)) as ScrapID;
+      this.scrapID = json.Hash;
+      this.body = body;
+      return this.scrapID;
+    }
+
+    /**
+     * The possibly edited shader code. If compile has not been called then it
+     * may differ from the current running code as embodied in the getShader()
+     * response.
+     */
+    get shaderCode(): string { return this._shaderCode; }
+
+    set shaderCode(val: string) {
+      this._shaderCode = val;
+    }
+
+    /**
+     * The values that should be used for the used defined uniforms, as opposed
+     * to the predefined uniform values.
+     * */
+    get currentUserUniformValues(): number[] { return this._currentUserUniformValues; }
+
+    set currentUserUniformValues(val: number[]) {
+      this._currentUserUniformValues = val;
+    }
+
+    /**
+     * The full shader compile error message. Only updated on a call to
+     * compile().
+     */
+    get compileErrorMessage(): string {
+      return this._compileErrorMessage;
+    }
+
+    /** The line numbers that errors occurred on. Only updated on a call to
+     * compile(). */
+    get compileErrorLineNumbers(): number[] {
+      return this._compileErrorLineNumbers;
+    }
+
+    /** Compiles the shader code for this node. */
+    compile(): void {
+      this._compileErrorMessage = '';
+      this._compileErrorLineNumbers = [];
+      this.runningCode = this._shaderCode;
+      // eslint-disable-next-line no-unused-expressions
+      this.effect?.delete();
+      this.effect = this.canvasKit!.RuntimeEffect.Make(`${predefinedUniforms}\n${this.runningCode}`, (err) => {
+      // Fix up the line numbers on the error messages, because they are off by
+      // the number of lines we prefixed with the predefined uniforms. The regex
+      // captures the line number so we can replace it with the correct value.
+      // While doing the fix up of the error message we also annotate the
+      // corresponding lines in the CodeMirror editor.
+        err = err.replace(shaderCompilerErrorRegex, (_match, firstRegexCaptureValue): string => {
+          const lineNumber = (+firstRegexCaptureValue - (numPredefinedUniformLines + 1));
+          this._compileErrorLineNumbers.push(lineNumber);
+          return `error: ${lineNumber.toFixed(0)}`;
+        });
+        this._compileErrorMessage = err;
+      });
+
+      // Do some precalculations to avoid bouncing into WASM code too much.
+      this.uniformFloatCount = this.effect?.getUniformFloatCount() || 0;
+      this.buildUniformsFromEffect();
+      this.calcNumPredefinedUniformValues();
+      this.mallocUniformsMallocObj();
+
+      // Fix up currentUserUniformValues if it's the wrong length.
+      const userUniformValuesLength = this.uniformFloatCount - this._numPredefinedUniformValues;
+      if (this.currentUserUniformValues.length !== userUniformValuesLength) {
+        this.currentUserUniformValues = new Array(userUniformValuesLength).fill(0.5);
+      }
+    }
+
+    /** Returns true if this node needs to have its code recompiled. */
+    needsCompile(): boolean {
+      return (this._shaderCode !== this.runningCode);
+    }
+
+    /** Returns true if this node or any child node needs to be saved. */
+    needsSave(): boolean {
+      return (this._shaderCode !== this.body!.Body) || this.userUniformValuesHaveBeenEdited();
+    }
+
+    /** Returns the number of uniforms in the effect. */
+    getUniformCount(): number {
+      return this.uniforms.length;
+    }
+
+    /** Get a description of the uniform at the given index. */
+    getUniform(index: number): Uniform {
+      return this.uniforms[index];
+    }
+
+    /** The total number of floats across all predefined and user uniforms. */
+    getUniformFloatCount(): number {
+      return this.uniformFloatCount;
+    }
+
+    /**
+     * This is really only called once every raf for the shader that has focus,
+     * i.e. that shader that is being displayed on the web UI.
+     */
+    getShader(predefinedUniformsValues: number[]): Shader | null {
+      if (!this.effect) {
+        return null;
+      }
+      const uniformsFloat32Array: Float32Array = this.uniformsMallocObj!.toTypedArray() as Float32Array;
+
+      // Copy in predefined uniforms values.
+      predefinedUniformsValues.forEach((val, index) => { uniformsFloat32Array[index] = val; });
+
+      // Copy in our local edited uniform values to the right spots.
+      this.currentUserUniformValues.forEach((val, index) => { uniformsFloat32Array[index + this._numPredefinedUniformValues] = val; });
+
+      return this.effect!.makeShaderWithChildren(uniformsFloat32Array, false, this.inputImageShaders);
+    }
+
+    get numPredefinedUniformValues(): number {
+      return this._numPredefinedUniformValues;
+    }
+
+    /** The number of floats that are defined by predefined uniforms. */
+    private calcNumPredefinedUniformValues(): void {
+      this._numPredefinedUniformValues = 0;
+      if (!this.effect) {
+        return;
+      }
+      for (let i = 0; i < numPredefinedUniforms; i++) {
+        const u = this.uniforms[i];
+        this._numPredefinedUniformValues += u.rows * u.columns;
+      }
+    }
+
+    /**
+     * Builds this._uniforms from this.effect, which is used to avoid later
+     * repeated calls into WASM.
+     */
+    private buildUniformsFromEffect() {
+      this.uniforms = [];
+      if (!this.effect) {
+        return;
+      }
+      const count = this.effect.getUniformCount();
+      for (let i = 0; i < count; i++) {
+        // Use object spread operator to clone the SkSLUniform and add a name to make a Uniform.
+        this.uniforms.push({ ...this.effect.getUniform(i), name: this.effect.getUniformName(i) });
+      }
+    }
+
+    private mallocUniformsMallocObj(): void {
+      // Copy uniforms into this.uniformsMallocObj, which is kept around to avoid
+      // copying overhead in WASM.
+      if (this.uniformsMallocObj) {
+        this.canvasKit!.Free(this.uniformsMallocObj);
+      }
+      this.uniformsMallocObj = this.canvasKit!.Malloc(Float32Array, this.uniformFloatCount);
+    }
+
+    private userUniformValuesHaveBeenEdited(): boolean {
+      const savedLocalUniformValues = this.body?.SKSLMetaData?.Uniforms || [];
+      if (this._currentUserUniformValues.length !== savedLocalUniformValues.length) {
+        return true;
+      }
+      for (let i = 0; i < this._currentUserUniformValues.length; i++) {
+        if (this._currentUserUniformValues[i] !== savedLocalUniformValues[i]) {
+          return true;
+        }
+      }
+      return false;
+    }
+}
diff --git a/shaders/modules/shadernode/index_test.ts b/shaders/modules/shadernode/index_test.ts
new file mode 100644
index 0000000..e911f4f
--- /dev/null
+++ b/shaders/modules/shadernode/index_test.ts
@@ -0,0 +1,157 @@
+/* eslint-disable dot-notation */
+import './index';
+import { assert } from 'chai';
+import { numPredefinedUniforms, ShaderNode } from './index';
+import { CanvasKit } from '../../build/canvaskit/canvaskit';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const CanvasKitInit = require('../../build/canvaskit/canvaskit.js');
+
+let canvasKit: CanvasKit | null = null;
+
+const getCanvasKit = async (): Promise<CanvasKit> => {
+  if (canvasKit) {
+    return canvasKit;
+  }
+  canvasKit = await CanvasKitInit({ locateFile: (file: string) => `https://particles.skia.org/dist/${file}` });
+  return canvasKit!;
+};
+
+const createShaderNode = async (): Promise<ShaderNode> => {
+  const ck = await getCanvasKit();
+  const image = ck.MakeImageFromCanvasImageSource(new Image(512, 512));
+  const shader1 = image.makeShaderOptions(ck.TileMode.Clamp, ck.TileMode.Clamp, ck.FilterMode.Linear, ck.MipmapMode.None);
+  const shader2 = image.makeShaderOptions(ck.TileMode.Clamp, ck.TileMode.Clamp, ck.FilterMode.Linear, ck.MipmapMode.None);
+
+  return new ShaderNode(ck, [shader1, shader2]);
+};
+
+describe('ShaderNode', async () => {
+  it('constructor throws when not passed in the correct number of image shaders', async () => {
+    const ck = await getCanvasKit();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    assert.throws(() => { const node = new ShaderNode(ck, []); });
+  });
+
+  it('constructor builds with a default shader', async () => {
+    const node = await createShaderNode();
+    node.compile();
+
+    // Confirm that all the post-compile pre-calculations are done correctly.
+    assert.equal(node.getUniformCount(), numPredefinedUniforms, 'The default shader doesn\'t have any user uniforms.');
+    assert.equal(node.getUniform(0).name, 'iResolution', 'Confirm the predefined shaders show up in the uniforms.');
+    assert.equal(node.getUniformFloatCount(), node.numPredefinedUniformValues, 'These are equal because the default shader has 0 user uniforms.');
+    assert.isNotNull(node['uniformsMallocObj'], "We Malloc'd");
+    assert.equal(node.numPredefinedUniformValues, 11, 'The number of predefined uniform values is calculated after compile() is called. This value will change if predefinedUniforms is changed.');
+    assert.deepEqual(node.compileErrorLineNumbers, []);
+    assert.equal(node.compileErrorMessage, '');
+  });
+
+  it('updates all values when a new shader is compiled.', async () => {
+    const node = await createShaderNode();
+    node.compile();
+    assert.isNotNull(node.getShader([]));
+
+    // Check our starting values.
+    assert.equal(node.getUniformCount(), numPredefinedUniforms, 'The default shader doesn\'t have any user uniforms.');
+    assert.equal(node.getUniform(0).name, 'iResolution', 'Confirm the predefined shaders show up in the uniforms.');
+    assert.equal(node.getUniformFloatCount(), node.numPredefinedUniformValues, 'These are equal because the default shader has 0 user uniforms.');
+
+    // Set code that has a user uniform, in this case with 4 floats.
+    node.setScrap({
+      Type: 'sksl',
+      Body: `uniform float4 iColorWithAlpha;
+
+      half4 main(float2 fragCoord) {
+        return half4(iColorWithAlpha);
+      }
+      `,
+      SKSLMetaData: {
+        Children: [],
+        Uniforms: [1, 0, 1, 0],
+      },
+    });
+    node.compile();
+    assert.isNotNull(node.getShader([0, 0, 0, 0]));
+
+    // Confirm that all the post-compile pre-calculations are done correctly for the new shader.
+    assert.equal(node.getUniformCount(), numPredefinedUniforms + 1, 'The new shader has 1 user uniform.');
+    assert.equal(node.getUniform(0).name, 'iResolution', 'Confirm the predefined shaders show up in the uniforms.');
+    assert.equal(node.getUniformFloatCount(), node.numPredefinedUniformValues + 4, 'The user uniform contributes 4 floats to the total.');
+  });
+
+  it('correctly indicates when run() needs to be called.', async () => {
+    const node = await createShaderNode();
+    node.compile();
+
+    assert.isFalse(node.needsCompile(), 'Should not need a run immediately after a call to compile().');
+
+    const originalCode = node.shaderCode;
+    node.shaderCode += '\n';
+    assert.isTrue(node.needsCompile(), 'Needs compile when code has changed.');
+    node.shaderCode = originalCode;
+    assert.isFalse(node.needsCompile(), 'No longer needs a compile when change is undone.');
+  });
+
+  it('correctly indicates when save() needs to be called.', async () => {
+    const node = await createShaderNode();
+    node.compile();
+
+    const startingUniformValues = [1, 0, 1, 0];
+    const modifiedUniformValues = [1, 1, 1, 1];
+
+    // Set code that has a user uniform, in this case with 4 floats, because
+    // saving is not only indicated when the code changes, but when the user
+    // uniforms change.
+    node.setScrap({
+      Type: 'sksl',
+      Body: `uniform float4 iColorWithAlpha;
+
+      half4 main(float2 fragCoord) {
+        return half4(iColorWithAlpha);
+      }
+      `,
+      SKSLMetaData: {
+        Children: [],
+        Uniforms: startingUniformValues,
+      },
+    });
+    node.compile();
+
+    // Changing the code means we need to save.
+    const originalCode = node.shaderCode;
+    assert.isFalse(node.needsSave());
+    node.shaderCode += '\n';
+    assert.isTrue(node.needsSave(), 'Needs save if code changed.');
+    node.shaderCode = originalCode;
+    assert.isFalse(node.needsSave(), "Doesn't need save when code restored.");
+
+    // Also changing the user uniform values means we need to save.
+    node.currentUserUniformValues = modifiedUniformValues;
+    assert.isTrue(node.needsSave(), 'Needs save if uniform values changed.');
+    node.currentUserUniformValues = startingUniformValues;
+    assert.isFalse(node.needsSave(), "Doesn't need save if uniform values restored.");
+  });
+
+  it('reports compiler errors', async () => {
+    const node = await createShaderNode();
+    node.compile();
+    node.setScrap({
+      Type: 'sksl',
+      Body: `uniform float4 iColorWithAlpha;
+
+      half4 main(float2 fragCoord) {
+        return half4(iColorWithAlpha) // Missing trailing semicolon.
+      }
+      `,
+      SKSLMetaData: {
+        Children: [],
+        Uniforms: [1, 0, 1, 0],
+      },
+    });
+    node.compile();
+
+    assert.deepEqual(node.compileErrorLineNumbers, [4]);
+    node.compileErrorMessage.startsWith('error: 4:');
+  });
+});
diff --git a/shaders/modules/shaders-app-sk/shaders-app-sk.scss b/shaders/modules/shaders-app-sk/shaders-app-sk.scss
index d4c3c7a..86eb89a 100644
--- a/shaders/modules/shaders-app-sk/shaders-app-sk.scss
+++ b/shaders/modules/shaders-app-sk/shaders-app-sk.scss
@@ -38,6 +38,10 @@
     flex-direction: row;
     flex-wrap: wrap;
 
+    #examples {
+      margin: 0 8px 8px 0;
+    }
+
     canvas {
       margin: 0 16px 16px 0;
     }
@@ -111,11 +115,10 @@
 
   details#shaderinputs {
     display: initial;
-    margin: initial;
     padding: initial;
     list-style: initial;
     box-shadow: initial;
-    margin: 0 0 8px 0;
+    margin: 0 8px 8px 0;
     font-size: 11px;
 
     textarea {
diff --git a/shaders/modules/shaders-app-sk/shaders-app-sk.ts b/shaders/modules/shaders-app-sk/shaders-app-sk.ts
index dcadbc9..377711e 100644
--- a/shaders/modules/shaders-app-sk/shaders-app-sk.ts
+++ b/shaders/modules/shaders-app-sk/shaders-app-sk.ts
@@ -11,16 +11,13 @@
 import CodeMirror from 'codemirror';
 import { $$ } from 'common-sk/modules/dom';
 import { stateReflector } from 'common-sk/modules/stateReflector';
-import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';
 import { HintableObject } from 'common-sk/modules/hintable';
 import { isDarkMode } from '../../../infra-sk/modules/theme-chooser-sk/theme-chooser-sk';
 import type {
   CanvasKit,
   Surface,
   Canvas,
-  RuntimeEffect,
   Paint,
-  MallocObj,
   Shader,
 } from '../../build/canvaskit/canvaskit.js';
 
@@ -30,7 +27,6 @@
 import '../../../infra-sk/modules/theme-chooser-sk';
 import { SKIA_VERSION } from '../../build/version';
 import { ElementSk } from '../../../infra-sk/modules/ElementSk/ElementSk';
-import { ScrapBody, ScrapID } from '../json';
 import '../../../infra-sk/modules/uniform-time-sk';
 import '../../../infra-sk/modules/uniform-generic-sk';
 import '../../../infra-sk/modules/uniform-dimensions-sk';
@@ -38,9 +34,12 @@
 import '../../../infra-sk/modules/uniform-mouse-sk';
 import '../../../infra-sk/modules/uniform-color-sk';
 import '../../../infra-sk/modules/uniform-imageresolution-sk';
-import { Uniform, UniformControl } from '../../../infra-sk/modules/uniform/uniform';
+import { UniformControl } from '../../../infra-sk/modules/uniform/uniform';
 import { FPS } from '../fps/fps';
 import { DimensionsChangedEventDetail } from '../../../infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk';
+import {
+  defaultShader, numPredefinedUniformLines, predefinedUniforms, ShaderNode,
+} from '../shadernode';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const CanvasKitInit = require('../../build/canvaskit/canvaskit.js');
@@ -48,41 +47,13 @@
 // This element might be loaded from a different site, and that means we need
 // to be careful about how we construct the URL back to the canvas.wasm file.
 // Start by recording the script origin.
-const scriptOrigin = new URL((document!.currentScript as HTMLScriptElement).src)
-  .origin;
+const scriptOrigin = new URL((document!.currentScript as HTMLScriptElement).src).origin;
 const kitReady = CanvasKitInit({
   locateFile: (file: any) => `${scriptOrigin}/dist/${file}`,
 });
 
 const DEFAULT_SIZE = 512;
 
-const predefinedUniforms = `uniform float3 iResolution;      // Viewport resolution (pixels)
-uniform float  iTime;            // Shader playback time (s)
-uniform float4 iMouse;           // Mouse drag pos=.xy Click pos=.zw (pixels)
-uniform float3 iImageResolution; // iImage1 and iImage2 resolution (pixels)
-uniform shader iImage1;          // An input image (Mandrill).
-uniform shader iImage2;          // An input image (Soccer ball).`;
-
-// How many of the uniforms listed in predefinedUniforms are of type 'shader'?
-const numPredefinedShaderUniforms = predefinedUniforms.match(/^uniform shader/gm)!.length;
-
-// Counts the number of uniforms defined in 'predefinedUniforms'. All the
-// remaining uniforms that start with 'i' will be referred to as "user
-// uniforms".
-const numPredefinedUniforms = predefinedUniforms.match(/^uniform/gm)!.length - numPredefinedShaderUniforms;
-
-// The number of lines prefixed to every shader for predefined uniforms. Needed
-// to properly adjust error line numbers.
-const numPredefinedUniformLines = predefinedUniforms.split('\n').length;
-
-const defaultShader = `half4 main(float2 fragCoord) {
-  return vec4(1, 0, 0, 1);
-}`;
-
-// Regex that finds lines in shader compiler error messages that mention a line number
-// and makes that line number available as a capture.
-const shaderCompilerErrorRegex = /^error: (\d+)/i;
-
 type stateChangedCallback = ()=> void;
 
 // State represents data reflected to/from the URL.
@@ -158,9 +129,9 @@
 const RAF_NOT_RUNNING = -1;
 
 export class ShadersAppSk extends ElementSk {
-  private width: number = 512;
+  private width: number = DEFAULT_SIZE;
 
-  private height: number = 512;
+  private height: number = DEFAULT_SIZE;
 
   private codeMirror: CodeMirror.Editor | null = null;
 
@@ -178,42 +149,17 @@
 
   private inputImageShaders: Shader[] = [];
 
-  private effect: RuntimeEffect | null = null;
-
-  private state: State = defaultState;
-
-  // If not the empty string, this contains the full last shader compiler error
-  // message.
-  private compileErrorMessage: string = '';
+  private shaderNode: ShaderNode | null = null;
 
   // Records the lines that have been marked as having errors. We keep these
   // around so we can clear the error annotations efficiently.
   private compileErrorLines: CodeMirror.TextMarker[] = [];
 
-  // Keep a MallocObj around to pass uniforms to the shader to avoid the need to
-  // make copies.
-  private uniformsMallocObj: MallocObj | null = null;
+  private state: State = defaultState;
 
   // The requestAnimationFrame id if we are running, otherwise we are not running.
   private rafID: number = RAF_NOT_RUNNING;
 
-  // Records the code that we started with, either at startup, or after we've saved.
-  private lastSavedCode = defaultShader;
-
-  // Records the code that is currently running.
-  private runningCode = defaultShader;
-
-  // The current code in the editor.
-  private editedCode = defaultShader;
-
-  // These are the uniform values for all the user defined uniforms. They
-  // exclude the predefined uniform values.
-  private lastSavedUserUniformValues: number[] = [];
-
-  // These are the uniform values for all the user defined uniforms. They
-  // exclude the predefined uniform values.
-  private currentUserUniformValues: number[] = [];
-
   // stateReflector update function.
   private stateChanged: stateChangedCallback | null = null;
 
@@ -225,13 +171,12 @@
 
   private static uniformControls = (ele: ShadersAppSk): TemplateResult[] => {
     const ret: TemplateResult[] = [];
-    const effect = ele.effect;
-    if (!effect) {
+    const node = ele.shaderNode;
+    if (!node) {
       return ret;
     }
-    for (let i = 0; i < effect.getUniformCount(); i++) {
-      // Use object spread operator to clone the SkSLUniform and add a name to make a Uniform.
-      const uniform: Uniform = { ...effect.getUniform(i), name: effect.getUniformName(i) };
+    for (let i = 0; i < node.getUniformCount(); i++) {
+      const uniform = node.getUniform(i);
       if (!uniform.name.startsWith('i')) {
         continue;
       }
@@ -281,7 +226,7 @@
     </header>
     <main>
       <div>
-        <p @click=${ele.fastLoad}>Examples: <a href="/?id=@inputs">Uniforms</a> <a href="/?id=@iResolution">iResolution</a> <a href="/?id=@iTime">iTime</a> <a href="/?id=@iMouse">iMouse</a> <a href="/?id=@iImage">iImage</a></p>
+        <p id=examples @click=${ele.fastLoad}>Examples: <a href="/?id=@inputs">Uniforms</a> <a href="/?id=@iResolution">iResolution</a> <a href="/?id=@iTime">iTime</a> <a href="/?id=@iMouse">iMouse</a> <a href="/?id=@iImage">iImage</a></p>
         <canvas
           id="player"
           width=${ele.width}
@@ -306,9 +251,9 @@
         </div>
         </details>
         <div id="codeEditor"></div>
-        <div ?hidden=${!ele.compileErrorMessage} id="compileErrors">
+        <div ?hidden=${!ele.shaderNode?.compileErrorMessage} id="compileErrors">
           <h3>Errors</h3>
-          <pre>${ele.compileErrorMessage}</pre>
+          <pre>${ele.shaderNode?.compileErrorMessage}</pre>
         </div>
       </div>
       <div id=shaderControls>
@@ -319,14 +264,14 @@
           ${ShadersAppSk.uniformControls(ele)}
         </div>
         <button
-          ?hidden=${ele.editedCode === ele.runningCode}
+          ?hidden=${!ele.shaderNode?.needsCompile()}
           @click=${ele.runClick}
           class=action
         >
           Run
         </button>
         <button
-          ?hidden=${ele.editedCode === ele.lastSavedCode && !ele.userUniformValuesHaveBeenEdited()}
+          ?hidden=${!ele.shaderNode?.needsSave()}
           @click=${ele.saveClick}
           class=action
         >
@@ -388,8 +333,9 @@
           /* getState */ () => (this.state as unknown) as HintableObject,
           /* setState */ (newState: HintableObject) => {
             this.state = (newState as unknown) as State;
+            this.shaderNode = new ShaderNode(this.kit!, this.inputImageShaders);
             if (!this.state.id) {
-              this.startShader(defaultShader);
+              this.run();
             } else {
               this.loadShaderIfNecessary();
             }
@@ -421,14 +367,14 @@
     const newDims = (e as CustomEvent<DimensionsChangedEventDetail>).detail;
     this.width = newDims.width;
     this.height = newDims.height;
-    this.startShader(this.runningCode);
+    this.run();
   }
 
   private monitorIfDevicePixelRatioChanges() {
     // Use matchMedia to detect if the screen resolution changes from the current value.
     // See https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes
     const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
-    matchMedia(mqString).addEventListener('change', () => this.startShader(this.runningCode));
+    matchMedia(mqString).addEventListener('change', () => this.run());
   }
 
   private async loadShaderIfNecessary() {
@@ -436,17 +382,13 @@
       return;
     }
     try {
-      const resp = await fetch(`/_/load/${this.state.id}`, {
-        credentials: 'include',
-      });
-      const json = (await jsonOrThrow(resp)) as ScrapBody;
-      this.lastSavedCode = json.Body;
-      this.startShader(json.Body);
-      if (json.SKSLMetaData && json.SKSLMetaData.Uniforms !== null) {
-        this.setCurrentUserUniformValues(json.SKSLMetaData.Uniforms);
-        // We round trip the uniforms through the controls so we are sure to get an exact match.
-        this.lastSavedUserUniformValues = this.getCurrentUserUniformValues(this.getUniformValuesFromControls());
-      }
+      await this.shaderNode!.loadScrap(this.state.id);
+      this._render();
+
+      const predefinedUniformValues = new Array(this.shaderNode!.numPredefinedUniformValues).fill(0);
+      this.setUniformValuesToControls(predefinedUniformValues.concat(this.shaderNode!.currentUserUniformValues));
+
+      this.run();
     } catch (error) {
       errorMessage(error, 0);
       // Return to the default view.
@@ -455,7 +397,7 @@
     }
   }
 
-  private startShader(shaderCode: string) {
+  private run() {
     this.monitorIfDevicePixelRatioChanges();
     // Cancel any pending drawFrames.
     if (this.rafID !== RAF_NOT_RUNNING) {
@@ -463,9 +405,7 @@
       this.rafID = RAF_NOT_RUNNING;
     }
 
-    this.runningCode = shaderCode;
-    this.editedCode = shaderCode;
-    this.codeMirror!.setValue(shaderCode);
+    this.codeMirror!.setValue(this.shaderNode?.shaderCode || defaultShader);
 
     // eslint-disable-next-line no-unused-expressions
     this.surface?.delete();
@@ -478,30 +418,17 @@
     // the parent surface will do that for us.
     this.canvas = this.surface.getCanvas();
     this.canvasKitContext = this.kit!.currentContext();
-    // eslint-disable-next-line no-unused-expressions
-    this.effect?.delete();
     this.clearAllEditorErrorAnnotations();
-    this.compileErrorMessage = '';
-    this.effect = this.kit!.RuntimeEffect.Make(`${predefinedUniforms}\n${shaderCode}`, (err) => {
-      // Fix up the line numbers on the error messages, because they are off by
-      // the number of lines we prefixed with the predefined uniforms. The regex
-      // captures the line number so we can replace it with the correct value.
-      // While doing the fix up of the error message we also annotate the
-      // corresponding lines in the CodeMirror editor.
-      err = err.replace(shaderCompilerErrorRegex, (_match, firstRegexCaptureValue): string => {
-        const lineNumber = (+firstRegexCaptureValue - (numPredefinedUniformLines + 1));
-        this.setEditorErrorLineAnnotation(lineNumber);
-        return `error: ${lineNumber.toFixed(0)}`;
-      });
-      this.compileErrorMessage = err;
+
+    this.shaderNode!.compile();
+
+    // Set CodeMirror errors if the run failed.
+    this.shaderNode!.compileErrorLineNumbers.forEach((lineNumber: number) => {
+      this.setEditorErrorLineAnnotation(lineNumber);
     });
+
     // Render so the uniform controls get displayed.
     this._render();
-
-    if (!this.effect) {
-      return;
-    }
-
     this.drawFrame();
   }
 
@@ -523,90 +450,53 @@
     ));
   }
 
+  /** Populate the uniforms values from the controls. */
   private getUniformValuesFromControls(): number[] {
-    // Populate the uniforms values from the controls.
-    const uniforms: number[] = new Array(this.effect!.getUniformFloatCount());
+    const uniforms: number[] = new Array(this.shaderNode!.getUniformFloatCount()).fill(0);
     $('#uniformControls > *').forEach((control) => {
       (control as unknown as UniformControl).applyUniformValues(uniforms);
     });
     return uniforms;
   }
 
+  /** Populate the control values from the uniforms. */
   private setUniformValuesToControls(uniforms: number[]): void {
-    // Populate the control values from the uniforms.
     $('#uniformControls > *').forEach((control) => {
       (control as unknown as UniformControl).restoreUniformValues(uniforms);
     });
   }
 
-  private userUniformValuesHaveBeenEdited(): boolean {
-    if (this.currentUserUniformValues.length !== this.lastSavedUserUniformValues.length) {
-      return true;
-    }
-    for (let i = 0; i < this.currentUserUniformValues.length; i++) {
-      if (this.currentUserUniformValues[i] !== this.lastSavedUserUniformValues[i]) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  private totalPredefinedUniformValues(): number {
-    let ret = 0;
-    if (!this.effect) {
-      return 0;
-    }
-    for (let i = 0; i < numPredefinedUniforms; i++) {
-      const u = this.effect.getUniform(i);
-      ret += u.rows * u.columns;
-    }
-    return ret;
-  }
-
-  private setCurrentUserUniformValues(userUniformValues: number[]): void {
-    if (this.effect) {
-      const uniforms = this.getUniformValuesFromControls();
-      // Update only the non-predefined uniform values.
-      const begin = this.totalPredefinedUniformValues();
-      for (let i = begin; i < this.effect.getUniformFloatCount(); i++) {
-        uniforms[i] = userUniformValues[i - begin];
-      }
-      this.setUniformValuesToControls(uniforms);
-    }
-  }
-
   private getCurrentUserUniformValues(uniforms: number[]): number[] {
-    const uniformsArray: number[] = [];
-    if (this.effect) {
-      // Return only the non-predefined uniform values.
-      for (let i = this.totalPredefinedUniformValues(); i < this.effect.getUniformFloatCount(); i++) {
-        uniformsArray.push(uniforms[i]);
-      }
+    if (this.shaderNode) {
+      return uniforms.slice(this.shaderNode.numPredefinedUniformValues);
     }
-    return uniformsArray;
+    return [];
+  }
+
+  private getPredefinedUniformValues(uniforms: number[]): number[] {
+    if (this.shaderNode) {
+      return uniforms.slice(0, this.shaderNode.numPredefinedUniformValues);
+    }
+    return [];
   }
 
   private drawFrame() {
     this.fps.raf();
     this.kit!.setCurrentContext(this.canvasKitContext);
     const uniformsArray = this.getUniformValuesFromControls();
-    this.currentUserUniformValues = this.getCurrentUserUniformValues(uniformsArray);
 
-    // Copy uniforms into this.uniformsMallocObj, which is kept around to avoid
-    // copying overhead in WASM.
-    if (!this.uniformsMallocObj) {
-      this.uniformsMallocObj = this.kit!.Malloc(Float32Array, uniformsArray.length);
-    } else if (this.uniformsMallocObj.length !== uniformsArray.length) {
-      this.kit!.Free(this.uniformsMallocObj);
-      this.uniformsMallocObj = this.kit!.Malloc(Float32Array, uniformsArray.length);
+    // TODO(jcgregorio) Change this to be event driven.
+    this.shaderNode!.currentUserUniformValues = this.getCurrentUserUniformValues(uniformsArray);
+
+    const shader = this.shaderNode!.getShader(this.getPredefinedUniformValues(uniformsArray));
+    if (!shader) {
+      errorMessage('Failed to get shader.', 0);
+      return;
     }
-    const uniformsFloat32Array: Float32Array = this.uniformsMallocObj.toTypedArray() as Float32Array;
-    uniformsArray.forEach((val, index) => { uniformsFloat32Array[index] = val; });
-
-    const shader = this.effect!.makeShaderWithChildren(uniformsFloat32Array, false, this.inputImageShaders);
-    this._render();
 
     // Allow uniform controls to update, such as uniform-timer-sk.
+    // TODO(jcgregorio) This is overkill, allow controls to register for a 'raf'
+    //   event if they need to update frequently.
     this._render();
 
     // Draw the shader.
@@ -622,35 +512,13 @@
   }
 
   private async runClick() {
-    this.startShader(this.editedCode);
+    this.run();
     this.saveClick();
   }
 
   private async saveClick() {
-    const userUniformValues = this.getCurrentUserUniformValues(this.getUniformValuesFromControls());
-    const body: ScrapBody = {
-      Body: this.editedCode,
-      Type: 'sksl',
-      SKSLMetaData: {
-        Uniforms: userUniformValues,
-        Children: [],
-      },
-    };
     try {
-      // POST the JSON to /_/upload
-      const resp = await fetch('/_/save/', {
-        credentials: 'include',
-        body: JSON.stringify(body),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        method: 'POST',
-      });
-      const json = (await jsonOrThrow(resp)) as ScrapID;
-
-      this.state.id = json.Hash;
-      this.lastSavedCode = this.editedCode;
-      this.lastSavedUserUniformValues = userUniformValues;
+      this.state.id = await this.shaderNode!.saveScrap();
       this.stateChanged!();
       this._render();
     } catch (error) {
@@ -659,7 +527,7 @@
   }
 
   private codeChange() {
-    this.editedCode = this.codeMirror!.getValue();
+    this.shaderNode!.shaderCode = this.codeMirror!.getValue();
     this._render();
   }
 
diff --git a/shaders/modules/shaders-app-sk/shaders-app-sk_test.ts b/shaders/modules/shaders-app-sk/shaders-app-sk_test.ts
deleted file mode 100644
index 1b417f8..0000000
--- a/shaders/modules/shaders-app-sk/shaders-app-sk_test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import './index';
-import { assert } from 'chai';
-import { ShadersAppSk } from './shaders-app-sk';
-
-import { setUpElementUnderTest } from '../../../infra-sk/modules/test_util';
-
-describe('shaders-app-sk', () => {
-  const newInstance = setUpElementUnderTest<ShadersAppSk>('shaders-app-sk');
-
-  let element: ShadersAppSk;
-  beforeEach(() => {
-    element = newInstance();
-  });
-
-  describe('some action', () => {
-    it('some result', () => {
-      assert.isNotNull(element);
-    });
-  });
-});