initial commit

renderers/raylib/clay_renderer_raylib.c

@@ -0,0 +1,228 @@
+#include "raylib.h"
+#include "raymath.h"
+#include "stdint.h"
+#include "string.h"
+#include "stdio.h"
+#include "stdlib.h"
+#include "signal.h"
+
+#define CLAY_RECTANGLE_TO_RAYLIB_RECTANGLE(rectangle) (Rectangle) { .x = rectangle.x, .y = rectangle.y, .width = rectangle.width, .height = rectangle.height }
+#define CLAY_COLOR_TO_RAYLIB_COLOR(color) (Color) { .r = (unsigned char)roundf(color.r), .g = (unsigned char)roundf(color.g), .b = (unsigned char)roundf(color.b), .a = (unsigned char)roundf(color.a) }
+
+typedef struct
+{
+    uint32_t fontId;
+    Font font;
+} Raylib_Font;
+
+Raylib_Font Raylib_fonts[10];
+Camera Raylib_camera;
+
+typedef enum
+{
+    CUSTOM_LAYOUT_ELEMENT_TYPE_3D_MODEL
+} CustomLayoutElementType;
+
+typedef struct
+{
+    Model model;
+    float scale;
+    Vector3 position;
+    Matrix rotation;
+} CustomLayoutElement_3DModel;
+
+typedef struct
+{
+    CustomLayoutElementType type;
+    union {
+        CustomLayoutElement_3DModel model;
+    };
+} CustomLayoutElement;
+
+// Get a ray trace from the screen position (i.e mouse) within a specific section of the screen
+Ray GetScreenToWorldPointWithZDistance(Vector2 position, Camera camera, int screenWidth, int screenHeight, float zDistance)
+{
+    Ray ray = { 0 };
+
+    // Calculate normalized device coordinates
+    // NOTE: y value is negative
+    float x = (2.0f*position.x)/(float)screenWidth - 1.0f;
+    float y = 1.0f - (2.0f*position.y)/(float)screenHeight;
+    float z = 1.0f;
+
+    // Store values in a vector
+    Vector3 deviceCoords = { x, y, z };
+
+    // Calculate view matrix from camera look at
+    Matrix matView = MatrixLookAt(camera.position, camera.target, camera.up);
+
+    Matrix matProj = MatrixIdentity();
+
+    if (camera.projection == CAMERA_PERSPECTIVE)
+    {
+        // Calculate projection matrix from perspective
+        matProj = MatrixPerspective(camera.fovy*DEG2RAD, ((double)screenWidth/(double)screenHeight), 0.01f, zDistance);
+    }
+    else if (camera.projection == CAMERA_ORTHOGRAPHIC)
+    {
+        double aspect = (double)screenWidth/(double)screenHeight;
+        double top = camera.fovy/2.0;
+        double right = top*aspect;
+
+        // Calculate projection matrix from orthographic
+        matProj = MatrixOrtho(-right, right, -top, top, 0.01, 1000.0);
+    }
+
+    // Unproject far/near points
+    Vector3 nearPoint = Vector3Unproject((Vector3){ deviceCoords.x, deviceCoords.y, 0.0f }, matProj, matView);
+    Vector3 farPoint = Vector3Unproject((Vector3){ deviceCoords.x, deviceCoords.y, 1.0f }, matProj, matView);
+
+    // Calculate normalized direction vector
+    Vector3 direction = Vector3Normalize(Vector3Subtract(farPoint, nearPoint));
+
+    ray.position = farPoint;
+
+    // Apply calculated vectors to ray
+    ray.direction = direction;
+
+    return ray;
+}
+
+uint32_t measureCalls = 0;
+
+static inline Clay_Dimensions Raylib_MeasureText(Clay_String *text, Clay_TextElementConfig *config) {
+    measureCalls++;
+    // Measure string size for Font
+    Clay_Dimensions textSize = { 0 };
+
+    float maxTextWidth = 0.0f;
+    float lineTextWidth = 0;
+
+    float textHeight = config->fontSize;
+    Font fontToUse = Raylib_fonts[config->fontId].font;
+
+    for (int i = 0; i < text->length; ++i)
+    {
+        if (text->chars[i] == '\n') {
+            maxTextWidth = fmax(maxTextWidth, lineTextWidth);
+            lineTextWidth = 0;
+            continue;
+        }
+        int index = text->chars[i] - 32;
+        if (fontToUse.glyphs[index].advanceX != 0) lineTextWidth += fontToUse.glyphs[index].advanceX;
+        else lineTextWidth += (fontToUse.recs[index].width + fontToUse.glyphs[index].offsetX);
+    }
+
+    maxTextWidth = fmax(maxTextWidth, lineTextWidth);
+
+    textSize.width = maxTextWidth / 2;
+    textSize.height = textHeight;
+
+    return textSize;
+}
+
+void Clay_Raylib_Initialize(unsigned int flags) {
+    SetConfigFlags(flags);
+    InitWindow(1024, 768, "Clay - Raylib Renderer Example");
+//    EnableEventWaiting();
+}
+
+void Clay_Raylib_Render(Clay_RenderCommandArray renderCommands)
+{
+    measureCalls = 0;
+    for (int j = 0; j < renderCommands.length; j++)
+    {
+        Clay_RenderCommand *renderCommand = Clay_RenderCommandArray_Get(&renderCommands, j);
+        Clay_Rectangle boundingBox = renderCommand->boundingBox;
+        switch (renderCommand->commandType)
+        {
+            case CLAY_RENDER_COMMAND_TYPE_TEXT: {
+                // Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator
+                Clay_String text = renderCommand->text;
+                char *cloned = (char *)malloc(text.length + 1);
+                memcpy(cloned, text.chars, text.length);
+                cloned[text.length] = '\0';
+                Font fontToUse = Raylib_fonts[renderCommand->config.textElementConfig->fontId].font;
+                DrawTextEx(fontToUse, cloned, (Vector2){boundingBox.x, boundingBox.y}, (float)renderCommand->config.textElementConfig->fontSize, (float)renderCommand->config.textElementConfig->letterSpacing, CLAY_COLOR_TO_RAYLIB_COLOR(renderCommand->config.textElementConfig->textColor));
+                free(cloned);
+                break;
+            }
+            case CLAY_RENDER_COMMAND_TYPE_IMAGE: {
+                Texture2D imageTexture = *(Texture2D *)renderCommand->config.imageElementConfig->imageData;
+                DrawTextureEx(
+                imageTexture,
+                (Vector2){boundingBox.x, boundingBox.y},
+                0,
+                boundingBox.width / (float)imageTexture.width,
+                WHITE);
+                break;
+            }
+            case CLAY_RENDER_COMMAND_TYPE_SCISSOR_START: {
+                BeginScissorMode((int)roundf(boundingBox.x), (int)roundf(boundingBox.y), (int)roundf(boundingBox.width), (int)roundf(boundingBox.height));
+                break;
+            }
+            case CLAY_RENDER_COMMAND_TYPE_SCISSOR_END: {
+                EndScissorMode();
+                break;
+            }
+            case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
+                DrawRectangle((int)roundf(boundingBox.x), (int)roundf(boundingBox.y), (int)roundf(boundingBox.width), (int)roundf(boundingBox.height), CLAY_COLOR_TO_RAYLIB_COLOR(renderCommand->config.rectangleElementConfig->color));
+                break;
+            }
+            case CLAY_RENDER_COMMAND_TYPE_BORDER: {
+                Clay_BorderContainerElementConfig *config = renderCommand->config.borderElementConfig;
+                // Left border
+                if (config->left.width > 0) {
+                    DrawRectangle((int)roundf(boundingBox.x), (int)roundf(boundingBox.y + config->cornerRadius.topLeft), (int)config->left.width, (int)roundf(boundingBox.height - config->cornerRadius.topLeft - config->cornerRadius.bottomLeft), CLAY_COLOR_TO_RAYLIB_COLOR(config->left.color));
+                }
+                // Right border
+                if (config->right.width > 0) {
+                    DrawRectangle((int)roundf(boundingBox.x + boundingBox.width - config->right.width), (int)roundf(boundingBox.y + config->cornerRadius.topRight), (int)config->right.width, (int)roundf(boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight), CLAY_COLOR_TO_RAYLIB_COLOR(config->right.color));
+                }
+                // Top border
+                if (config->top.width > 0) {
+                    DrawRectangle((int)roundf(boundingBox.x + config->cornerRadius.topLeft), (int)roundf(boundingBox.y), (int)roundf(boundingBox.width - config->cornerRadius.topLeft - config->cornerRadius.topRight), (int)config->top.width, CLAY_COLOR_TO_RAYLIB_COLOR(config->top.color));
+                }
+                // Bottom border
+                if (config->bottom.width > 0) {
+                    DrawRectangle((int)roundf(boundingBox.x + config->cornerRadius.bottomLeft), (int)roundf(boundingBox.y + boundingBox.height - config->bottom.width), (int)roundf(boundingBox.width - config->cornerRadius.bottomLeft - config->cornerRadius.bottomRight), (int)config->bottom.width, CLAY_COLOR_TO_RAYLIB_COLOR(config->bottom.color));
+                }
+                if (config->cornerRadius.topLeft > 0) {
+                    DrawRing((Vector2) { roundf(boundingBox.x + config->cornerRadius.topLeft), roundf(boundingBox.y + config->cornerRadius.topLeft) }, roundf(config->cornerRadius.topLeft - config->top.width), config->cornerRadius.topLeft, 180, 270, 10, CLAY_COLOR_TO_RAYLIB_COLOR(config->top.color));
+                }
+                if (config->cornerRadius.topRight > 0) {
+                    DrawRing((Vector2) { roundf(boundingBox.x + boundingBox.width - config->cornerRadius.topRight), roundf(boundingBox.y + config->cornerRadius.topRight) }, roundf(config->cornerRadius.topRight - config->top.width), config->cornerRadius.topRight, 270, 360, 10, CLAY_COLOR_TO_RAYLIB_COLOR(config->top.color));
+                }
+                if (config->cornerRadius.bottomLeft > 0) {
+                    DrawRing((Vector2) { roundf(boundingBox.x + config->cornerRadius.bottomLeft), roundf(boundingBox.y + boundingBox.height - config->cornerRadius.bottomLeft) }, roundf(config->cornerRadius.bottomLeft - config->top.width), config->cornerRadius.bottomLeft, 90, 180, 10, CLAY_COLOR_TO_RAYLIB_COLOR(config->bottom.color));
+                }
+                if (config->cornerRadius.bottomRight > 0) {
+                    DrawRing((Vector2) { roundf(boundingBox.x + boundingBox.width - config->cornerRadius.bottomRight), roundf(boundingBox.y + boundingBox.height - config->cornerRadius.bottomRight) }, roundf(config->cornerRadius.bottomRight - config->bottom.width), config->cornerRadius.bottomRight, 0.1, 90, 10, CLAY_COLOR_TO_RAYLIB_COLOR(config->bottom.color));
+                }
+                break;
+            }
+            case CLAY_RENDER_COMMAND_TYPE_CUSTOM: {
+                CustomLayoutElement *customElement = (CustomLayoutElement *)renderCommand->config.customElementConfig->customData;
+                if (!customElement) continue;
+                switch (customElement->type) {
+                    case CUSTOM_LAYOUT_ELEMENT_TYPE_3D_MODEL: {
+                        Clay_Rectangle rootBox = renderCommands.internalArray[0].boundingBox;
+                        float scaleValue = CLAY__MIN(CLAY__MIN(1, 768 / rootBox.height) * CLAY__MAX(1, rootBox.width / 1024), 1.5f);
+                        Ray positionRay = GetScreenToWorldPointWithZDistance((Vector2) { renderCommand->boundingBox.x + renderCommand->boundingBox.width / 2, renderCommand->boundingBox.y + (renderCommand->boundingBox.height / 2) + 20 }, Raylib_camera, (int)roundf(rootBox.width), (int)roundf(rootBox.height), 140);
+                        BeginMode3D(Raylib_camera);
+                            DrawModel(customElement->model.model, positionRay.position, customElement->model.scale * scaleValue, WHITE);        // Draw 3d model with texture
+                        EndMode3D();
+                        break;
+                    }
+                    default: break;
+                }
+                break;
+            }
+            default: {
+                printf("Error: unhandled render command.");
+                raise(SIGTRAP);
+                exit(1);
+            }
+        }
+    }
+}

renderers/web/build-wasm.sh

@@ -0,0 +1,13 @@
+cp ../../clay.h clay.c && 		\
+clang 							\
+-Os 							\
+-DCLAY_WASM 					\
+-mbulk-memory 					\
+--target=wasm32 				\
+-nostdlib 						\
+-Wl,--strip-all 				\
+-Wl,--export-dynamic 			\
+-Wl,--no-entry 					\
+-Wl,--export=__heap_base 		\
+-Wl,--initial-memory=6553600 	\
+-o clay.wasm clay.c; rm clay.c;

renderers/web/canvas2d/clay-canvas2d-renderer.html

@@ -0,0 +1,480 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Clay - UI Layout Library</title>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            padding: 0;
+            margin: 0;
+            pointer-events: none;
+        }
+
+        @font-face {
+            font-family: 'Calistoga';
+            font-style: normal;
+            font-weight: 400;
+            src: url('/fonts/Calistoga-Regular.ttf') format('truetype');
+        }
+
+        @font-face {
+            font-family: 'Quicksand';
+            font-style: normal;
+            font-weight: 400;
+            src: url('/fonts/Quicksand-Semibold.ttf') format('truetype');
+        }
+
+        body>canvas {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<script type="module">
+    const CLAY_RENDER_COMMAND_TYPE_NONE = 0;
+    const CLAY_RENDER_COMMAND_TYPE_RECTANGLE = 1;
+    const CLAY_RENDER_COMMAND_TYPE_BORDER = 2;
+    const CLAY_RENDER_COMMAND_TYPE_TEXT = 3;
+    const CLAY_RENDER_COMMAND_TYPE_IMAGE = 4;
+    const CLAY_RENDER_COMMAND_TYPE_SCISSOR_START = 5;
+    const CLAY_RENDER_COMMAND_TYPE_SCISSOR_END = 6;
+    const CLAY_RENDER_COMMAND_TYPE_CUSTOM = 7;
+    const GLOBAL_FONT_SCALING_FACTOR = 0.8;
+    let renderCommandSize = 0;
+    let scratchSpaceAddress = 0;
+    let heapSpaceAddress = 0;
+    let memoryDataView;
+    let textDecoder = new TextDecoder("utf-8");
+    let previousFrameTime;
+    let fontsById = [
+        // YOUR FONTS HERE
+    ];
+    let elementCache = {};
+    let imageCache = {};
+    let colorDefinition = {
+        type: 'struct', members: [
+            { name: 'r', type: 'float' },
+            { name: 'g', type: 'float' },
+            { name: 'b', type: 'float' },
+            { name: 'a', type: 'float' },
+        ]
+    };
+    let stringDefinition = {
+        type: 'struct', members: [
+            { name: 'length', type: 'uint32_t' },
+            { name: 'chars', type: 'uint32_t' },
+        ]
+    };
+    let borderDefinition = {
+        type: 'struct', members: [
+            { name: 'width', type: 'uint32_t' },
+            { name: 'color', ...colorDefinition },
+        ]
+    };
+    let cornerRadiusDefinition = {
+        type: 'struct', members: [
+            { name: 'topLeft', type: 'float' },
+            { name: 'topRight', type: 'float' },
+            { name: 'bottomLeft', type: 'float' },
+            { name: 'bottomRight', type: 'float' },
+        ]
+    };
+    let rectangleConfigDefinition = {
+        name: 'rectangle', type: 'struct', members: [
+            { name: 'color', ...colorDefinition },
+            { name: 'cornerRadius', ...cornerRadiusDefinition },
+            { name: 'link', ...stringDefinition },
+            { name: 'cursorPointer', type: 'uint8_t' },
+        ]
+    };
+    let borderConfigDefinition = {
+        name: 'text', type: 'struct', members: [
+            { name: 'left', ...borderDefinition },
+            { name: 'right', ...borderDefinition },
+            { name: 'top', ...borderDefinition },
+            { name: 'bottom', ...borderDefinition },
+            { name: 'betweenChildren', ...borderDefinition },
+            { name: 'cornerRadius', ...cornerRadiusDefinition }
+        ]
+    };
+    let textConfigDefinition = {
+        name: 'text', type: 'struct', members: [
+            { name: 'textColor', ...colorDefinition },
+            { name: 'fontId', type: 'uint16_t' },
+            { name: 'fontSize', type: 'uint16_t' },
+            { name: 'letterSpacing', type: 'uint16_t' },
+            { name: 'lineSpacing', type: 'uint16_t' },
+            { name: 'disablePointerEvents', type: 'uint8_t' }
+        ]
+    };
+    let imageConfigDefinition = {
+        name: 'image', type: 'struct', members: [
+            { name: 'imageData', type: 'uint32_t' },
+            {
+                name: 'sourceDimensions', type: 'struct', members: [
+                    { name: 'width', type: 'float' },
+                    { name: 'height', type: 'float' },
+                ]
+            },
+            { name: 'sourceURL', ...stringDefinition }
+        ]
+    };
+    let customConfigDefinition = {
+        name: 'custom', type: 'struct', members: [
+            { name: 'customData', type: 'uint32_t' },
+        ]
+    }
+    let renderCommandDefinition = {
+        name: 'CLay_RenderCommand',
+        type: 'struct',
+        members: [
+            {
+                name: 'boundingBox', type: 'struct', members: [
+                    { name: 'x', type: 'float' },
+                    { name: 'y', type: 'float' },
+                    { name: 'width', type: 'float' },
+                    { name: 'height', type: 'float' },
+                ]
+            },
+            { name: 'config', type: 'uint32_t' },
+            { name: 'text', ...stringDefinition },
+            { name: 'id', type: 'uint32_t' },
+            { name: 'commandType', type: 'uint32_t', },
+        ]
+    };
+
+    function getStructTotalSize(definition) {
+        switch (definition.type) {
+            case 'union':
+            case 'struct': {
+                let totalSize = 0;
+                for (const member of definition.members) {
+                    let result = getStructTotalSize(member);
+                    if (definition.type === 'struct') {
+                        totalSize += result;
+                    } else {
+                        totalSize = Math.max(totalSize, result);
+                    }
+                }
+                return totalSize;
+            }
+            case 'float': return 4;
+            case 'uint32_t': return 4;
+            case 'uint16_t': return 2;
+            case 'uint8_t': return 1;
+            default: {
+                throw "Unimplemented C data type " + definition.type
+            }
+        }
+    }
+
+    function readStructAtAddress(address, definition) {
+        switch (definition.type) {
+            case 'union':
+            case 'struct': {
+                let struct = { __size: 0 };
+                for (const member of definition.members) {
+                    let result = readStructAtAddress(address, member);
+                    struct[member.name] = result;
+                    if (definition.type === 'struct') {
+                        struct.__size += result.__size;
+                        address += result.__size;
+                    } else {
+                        struct.__size = Math.max(struct.__size, result.__size);
+                    }
+                }
+                return struct;
+            }
+            case 'float': return { value: memoryDataView.getFloat32(address, true), __size: 4 };
+            case 'uint32_t': return { value: memoryDataView.getUint32(address, true), __size: 4 };
+            case 'uint16_t': return { value: memoryDataView.getUint16(address, true), __size: 2 };
+            case 'uint8_t': return { value: memoryDataView.getUint16(address, true), __size: 1 };
+            default: {
+                throw "Unimplemented C data type " + definition.type
+            }
+        }
+    }
+
+    function getTextDimensions(text, font) {
+        // re-use canvas object for better performance
+        window.canvasContext.font = font;
+        let metrics = window.canvasContext.measureText(text);
+        return { width: metrics.width, height: metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent };
+    }
+
+    function createMainArena(arenaStructAddress, arenaMemoryAddress) {
+        let memorySize = instance.exports.Clay_MinMemorySize();
+        // Last arg is address to store return value
+        instance.exports.Clay_CreateArenaWithCapacityAndMemory(arenaStructAddress, memorySize, arenaMemoryAddress);
+    }
+    async function init() {
+        window.htmlRoot = document.body.appendChild(document.createElement('div'));
+        window.canvasRoot = document.body.appendChild(document.createElement('canvas'));
+        window.canvasContext = window.canvasRoot.getContext("2d");
+        window.mousePositionXThisFrame = 0;
+        window.mousePositionYThisFrame = 0;
+        window.mouseWheelXThisFrame = 0;
+        window.mouseWheelYThisFrame = 0;
+        window.touchDown = false;
+        let zeroTimeout = null;
+        addEventListener("wheel", (event) => {
+            window.mouseWheelXThisFrame = event.deltaX * -0.1;
+            window.mouseWheelYThisFrame = event.deltaY * -0.1;
+            clearTimeout(zeroTimeout);
+            zeroTimeout = setTimeout(() => {
+                window.mouseWheelXThisFrame = 0;
+                window.mouseWheelYThisFrame = 0;
+            }, 10);
+        });
+
+        function handleTouch(event) {
+            if (event.touches.length === 1) {
+                window.touchDown = true;
+                window.mousePositionXThisFrame = event.changedTouches[0].pageX;
+                window.mousePositionYThisFrame = event.changedTouches[0].pageY;
+            }
+        }
+
+        document.addEventListener("touchstart", handleTouch);
+        document.addEventListener("touchmove", handleTouch);
+        document.addEventListener("touchend", () => {
+            window.touchDown = false;
+            window.mousePositionXThisFrame = 0;
+            window.mousePositionYThisFrame = 0;
+        })
+
+        document.addEventListener("mousemove", (event) => {
+            window.mousePositionXThisFrame = event.x;
+            window.mousePositionYThisFrame = event.y;
+        });
+
+        document.addEventListener("mousedown", (event) => {
+            window.mouseDown = true;
+        });
+
+        const importObject = {
+            clay: {
+                measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {
+                    let stringLength = memoryDataView.getUint32(textToMeasure, true);
+                    let pointerToString = memoryDataView.getUint32(textToMeasure + 4, true);
+                    let textConfig = readStructAtAddress(addressOfConfig, textConfigDefinition);
+                    let textDecoder = new TextDecoder("utf-8");
+                    let text = textDecoder.decode(memoryDataView.buffer.slice(pointerToString, pointerToString + stringLength));
+                    let sourceDimensions = getTextDimensions(text, `${Math.round(textConfig.fontSize.value * GLOBAL_FONT_SCALING_FACTOR)}px ${fontsById[textConfig.fontId.value]}`);
+                    memoryDataView.setFloat32(addressOfDimensions, sourceDimensions.width, true);
+                    memoryDataView.setFloat32(addressOfDimensions + 4, sourceDimensions.height, true);
+                }
+            },
+        };
+        const { instance } = await WebAssembly.instantiateStreaming(
+            fetch("./index.wasm"), importObject
+        );
+        memoryDataView = new DataView(new Uint8Array(instance.exports.memory.buffer).buffer);
+        scratchSpaceAddress = instance.exports.__heap_base.value;
+        heapSpaceAddress = instance.exports.__heap_base.value + 1024;
+        let arenaAddress = scratchSpaceAddress;
+        window.instance = instance;
+        createMainArena(arenaAddress, heapSpaceAddress);
+        instance.exports.Clay_Initialize(arenaAddress);
+        renderCommandSize = getStructTotalSize(renderCommandDefinition);
+        renderLoop();
+    }
+
+    function renderLoopCanvas() {
+        // Note: Rendering to canvas needs to be scaled up by window.devicePixelRatio in both width and height.
+        // e.g. if we're working on a device where devicePixelRatio is 2, we need to render
+        // everything at width^2 x height^2 resolution, then scale back down with css to get the correct pixel density.
+        let capacity = memoryDataView.getUint32(scratchSpaceAddress, true);
+        let length = memoryDataView.getUint32(scratchSpaceAddress + 4, true);
+        let arrayOffset = memoryDataView.getUint32(scratchSpaceAddress + 8, true);
+        if (window.previousWidth !== window.innerWidth) {
+            window.canvasRoot.width = window.innerWidth * window.devicePixelRatio;
+            window.previousWidth = window.innerWidth;
+        }
+        if (window.previousHeight !== window.innerHeight) {
+            window.canvasRoot.height = window.innerHeight * window.devicePixelRatio;
+            window.previousHeight = window.innerHeight;
+        }
+        let ctx = window.canvasContext;
+        let scale = window.devicePixelRatio;
+        for (let i = 0; i < length; i++, arrayOffset += renderCommandSize) {
+            let renderCommand = readStructAtAddress(arrayOffset, renderCommandDefinition);
+            let boundingBox = renderCommand.boundingBox;
+            switch (renderCommand.commandType.value) {
+                case (CLAY_RENDER_COMMAND_TYPE_NONE): {
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_RECTANGLE): {
+                    let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
+                    let color = config.color;
+                    ctx.beginPath();
+                    window.canvasContext.fillStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                    window.canvasContext.roundRect(
+                        boundingBox.x.value * scale, // x
+                        boundingBox.y.value * scale, // y
+                        boundingBox.width.value * scale, // width
+                        boundingBox.height.value * scale,
+                        [config.cornerRadius.topLeft.value * scale, config.cornerRadius.topRight.value * scale, config.cornerRadius.bottomRight.value * scale, config.cornerRadius.bottomLeft.value * scale]) // height;
+                    ctx.fill();
+                    ctx.closePath();
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_BORDER): {
+                    let config = readStructAtAddress(renderCommand.config.value, borderConfigDefinition);
+                    ctx.beginPath();
+                    ctx.moveTo(boundingBox.x.value * scale, boundingBox.y.value * scale);
+                    // Top Left Corner
+                    if (config.cornerRadius.topLeft.value > 0) {
+                        let lineWidth = config.top.width.value;
+                        let halfLineWidth = lineWidth / 2;
+                        ctx.moveTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale);
+                        let color = config.top.color;
+                        ctx.lineWidth = lineWidth * scale;
+                        ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                        ctx.arcTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, config.cornerRadius.topLeft.value * scale);
+                        ctx.stroke();
+                    }
+                    // Top border
+                    if (config.top.width.value > 0) {
+                        let lineWidth = config.top.width.value;
+                        let halfLineWidth = lineWidth / 2;
+                        let color = config.top.color;
+                        ctx.lineWidth = lineWidth * scale;
+                        ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                        ctx.moveTo((boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
+                        ctx.lineTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.topRight.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
+                        ctx.stroke();
+                    }
+                    // Top Right Corner
+                    if (config.cornerRadius.topRight.value > 0) {
+                        let lineWidth = config.top.width.value;
+                        let halfLineWidth = lineWidth / 2;
+                        ctx.moveTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.topRight.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
+                        let color = config.top.color;
+                        ctx.lineWidth = lineWidth * scale;
+                        ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                        ctx.arcTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topRight.value + halfLineWidth) * scale, config.cornerRadius.topRight.value * scale);
+                        ctx.stroke();
+                    }
+                    // Right border
+                    if (config.right.width.value > 0) {
+                        let color = config.right.color;
+                        let lineWidth = config.right.width.value;
+                        let halfLineWidth = lineWidth / 2;
+                        ctx.lineWidth = lineWidth * scale;
+                        ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                        ctx.moveTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topRight.value + halfLineWidth) * scale);
+                        ctx.lineTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.topRight.value - halfLineWidth) * scale);
+                        ctx.stroke();
+                    }
+                    // Bottom Right Corner
+                    if (config.cornerRadius.bottomRight.value > 0) {
+                        let color = config.top.color;
+                        let lineWidth = config.top.width.value;
+                        let halfLineWidth = lineWidth / 2;
+                        ctx.moveTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale);
+                        ctx.lineWidth = lineWidth * scale;
+                        ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                        ctx.arcTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, (boundingBox.x.value + boundingBox.width.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, config.cornerRadius.bottomRight.value * scale);
+                        ctx.stroke();
+                    }
+                    // Bottom Border
+                    if (config.bottom.width.value > 0) {
+                        let color = config.bottom.color;
+                        let lineWidth = config.bottom.width.value;
+                        let halfLineWidth = lineWidth / 2;
+                        ctx.lineWidth = lineWidth * scale;
+                        ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                        ctx.moveTo((boundingBox.x.value + config.cornerRadius.bottomLeft.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
+                        ctx.lineTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
+                        ctx.stroke();
+                    }
+                    // Bottom Left Corner
+                    if (config.cornerRadius.bottomLeft.value > 0) {
+                        let color = config.bottom.color;
+                        let lineWidth = config.bottom.width.value;
+                        let halfLineWidth = lineWidth / 2;
+                        ctx.moveTo((boundingBox.x.value + config.cornerRadius.bottomLeft.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
+                        ctx.lineWidth = lineWidth * scale;
+                        ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                        ctx.arcTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, (boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomLeft.value - halfLineWidth) * scale, config.cornerRadius.bottomLeft.value * scale);
+                        ctx.stroke();
+                    }
+                    // Left Border
+                    if (config.left.width.value > 0) {
+                        let color = config.left.color;
+                        let lineWidth = config.left.width.value;
+                        let halfLineWidth = lineWidth / 2;
+                        ctx.lineWidth = lineWidth * scale;
+                        ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                        ctx.moveTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomLeft.value - halfLineWidth) * scale);
+                        ctx.lineTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.bottomRight.value + halfLineWidth) * scale);
+                        ctx.stroke();
+                    }
+                    ctx.closePath();
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_TEXT): {
+                    let config = readStructAtAddress(renderCommand.config.value, textConfigDefinition);
+                    let textContents = renderCommand.text;
+                    let stringContents = new Uint8Array(memoryDataView.buffer.slice(textContents.chars.value, textContents.chars.value + textContents.length.value));
+                    let fontSize = config.fontSize.value * GLOBAL_FONT_SCALING_FACTOR * scale;
+                    ctx.font = `${fontSize}px ${fontsById[config.fontId.value]}`;
+                    let color = config.textColor;
+                    ctx.textBaseline = 'middle';
+                    ctx.fillStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                    ctx.fillText(textDecoder.decode(stringContents), boundingBox.x.value * scale, (boundingBox.y.value + boundingBox.height.value / 2 + 1) * scale);
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
+                    window.canvasContext.beginPath();
+                    window.canvasContext.rect(boundingBox.x.value * scale, boundingBox.y.value * scale, boundingBox.width.value * scale, boundingBox.height.value * scale);
+                    window.canvasContext.clip();
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
+                    window.canvasContext.restore();
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_IMAGE): {
+                    let config = readStructAtAddress(renderCommand.config.value, imageConfigDefinition);
+                    let src = textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.sourceURL.chars.value, config.sourceURL.chars.value + config.sourceURL.length.value)));
+                    if (!imageCache[src]) {
+                        imageCache[src] = {
+                            image: new Image(),
+                            loaded: false,
+                        }
+                        imageCache[src].image.onload = () => imageCache[src].loaded = true;
+                        imageCache[src].image.src = src;
+                    } else if (imageCache[src].loaded) {
+                        ctx.drawImage(imageCache[src].image, boundingBox.x.value * scale, boundingBox.y.value * scale, boundingBox.width.value * scale, boundingBox.height.value * scale);
+                    }
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_CUSTOM): break;
+            }
+        }
+    }
+
+    function renderLoop(currentTime) {
+        const elapsed = currentTime - previousFrameTime;
+        previousFrameTime = currentTime;
+        instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, elapsed / 1000);
+        renderLoopCanvas();
+        requestAnimationFrame(renderLoop);
+        window.mouseDown = false;
+    }
+    init();
+</script>
+
+<body>
+</body>
+
+</html>

renderers/web/html/clay-html-renderer.html

@@ -0,0 +1,522 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Clay - UI Layout Library</title>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            padding: 0;
+            margin: 0;
+            pointer-events: none;
+        }
+
+        @font-face {
+            font-family: 'Calistoga';
+            font-style: normal;
+            font-weight: 400;
+            src: url('/fonts/Calistoga-Regular.ttf') format('truetype');
+        }
+
+        @font-face {
+            font-family: 'Quicksand';
+            font-style: normal;
+            font-weight: 400;
+            src: url('/fonts/Quicksand-Semibold.ttf') format('truetype');
+        }
+
+        body>canvas {
+            width: 100%;
+            height: 100%;
+        }
+
+        div,
+        a,
+        img {
+            position: absolute;
+            box-sizing: border-box;
+            -webkit-backface-visibility: hidden;
+        }
+
+        a {
+            cursor: pointer;
+            pointer-events: all;
+        }
+
+        .text {
+            pointer-events: all;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+<script type="module">
+    const CLAY_RENDER_COMMAND_TYPE_NONE = 0;
+    const CLAY_RENDER_COMMAND_TYPE_RECTANGLE = 1;
+    const CLAY_RENDER_COMMAND_TYPE_BORDER = 2;
+    const CLAY_RENDER_COMMAND_TYPE_TEXT = 3;
+    const CLAY_RENDER_COMMAND_TYPE_IMAGE = 4;
+    const CLAY_RENDER_COMMAND_TYPE_SCISSOR_START = 5;
+    const CLAY_RENDER_COMMAND_TYPE_SCISSOR_END = 6;
+    const CLAY_RENDER_COMMAND_TYPE_CUSTOM = 7;
+    const GLOBAL_FONT_SCALING_FACTOR = 0.8;
+    let renderCommandSize = 0;
+    let scratchSpaceAddress = 0;
+    let heapSpaceAddress = 0;
+    let memoryDataView;
+    let textDecoder = new TextDecoder("utf-8");
+    let previousFrameTime;
+    let fontsById = [
+        // YOUR FONTS HERE
+    ];
+    let elementCache = {};
+    let imageCache = {};
+    let colorDefinition = {
+        type: 'struct', members: [
+            { name: 'r', type: 'float' },
+            { name: 'g', type: 'float' },
+            { name: 'b', type: 'float' },
+            { name: 'a', type: 'float' },
+        ]
+    };
+    let stringDefinition = {
+        type: 'struct', members: [
+            { name: 'length', type: 'uint32_t' },
+            { name: 'chars', type: 'uint32_t' },
+        ]
+    };
+    let borderDefinition = {
+        type: 'struct', members: [
+            { name: 'width', type: 'uint32_t' },
+            { name: 'color', ...colorDefinition },
+        ]
+    };
+    let cornerRadiusDefinition = {
+        type: 'struct', members: [
+            { name: 'topLeft', type: 'float' },
+            { name: 'topRight', type: 'float' },
+            { name: 'bottomLeft', type: 'float' },
+            { name: 'bottomRight', type: 'float' },
+        ]
+    };
+    let rectangleConfigDefinition = {
+        name: 'rectangle', type: 'struct', members: [
+            { name: 'color', ...colorDefinition },
+            { name: 'cornerRadius', ...cornerRadiusDefinition },
+            { name: 'link', ...stringDefinition },
+            { name: 'cursorPointer', type: 'uint8_t' },
+        ]
+    };
+    let borderConfigDefinition = {
+        name: 'text', type: 'struct', members: [
+            { name: 'left', ...borderDefinition },
+            { name: 'right', ...borderDefinition },
+            { name: 'top', ...borderDefinition },
+            { name: 'bottom', ...borderDefinition },
+            { name: 'betweenChildren', ...borderDefinition },
+            { name: 'cornerRadius', ...cornerRadiusDefinition }
+        ]
+    };
+    let textConfigDefinition = {
+        name: 'text', type: 'struct', members: [
+            { name: 'textColor', ...colorDefinition },
+            { name: 'fontId', type: 'uint16_t' },
+            { name: 'fontSize', type: 'uint16_t' },
+            { name: 'letterSpacing', type: 'uint16_t' },
+            { name: 'lineSpacing', type: 'uint16_t' },
+            { name: 'disablePointerEvents', type: 'uint8_t' }
+        ]
+    };
+    let imageConfigDefinition = {
+        name: 'image', type: 'struct', members: [
+            { name: 'imageData', type: 'uint32_t' },
+            {
+                name: 'sourceDimensions', type: 'struct', members: [
+                    { name: 'width', type: 'float' },
+                    { name: 'height', type: 'float' },
+                ]
+            },
+            { name: 'sourceURL', ...stringDefinition }
+        ]
+    };
+    let customConfigDefinition = {
+        name: 'custom', type: 'struct', members: [
+            { name: 'customData', type: 'uint32_t' },
+        ]
+    }
+    let renderCommandDefinition = {
+        name: 'CLay_RenderCommand',
+        type: 'struct',
+        members: [
+            {
+                name: 'boundingBox', type: 'struct', members: [
+                    { name: 'x', type: 'float' },
+                    { name: 'y', type: 'float' },
+                    { name: 'width', type: 'float' },
+                    { name: 'height', type: 'float' },
+                ]
+            },
+            { name: 'config', type: 'uint32_t' },
+            { name: 'text', ...stringDefinition },
+            { name: 'id', type: 'uint32_t' },
+            { name: 'commandType', type: 'uint32_t', },
+        ]
+    };
+
+    function getStructTotalSize(definition) {
+        switch (definition.type) {
+            case 'union':
+            case 'struct': {
+                let totalSize = 0;
+                for (const member of definition.members) {
+                    let result = getStructTotalSize(member);
+                    if (definition.type === 'struct') {
+                        totalSize += result;
+                    } else {
+                        totalSize = Math.max(totalSize, result);
+                    }
+                }
+                return totalSize;
+            }
+            case 'float': return 4;
+            case 'uint32_t': return 4;
+            case 'uint16_t': return 2;
+            case 'uint8_t': return 1;
+            default: {
+                throw "Unimplemented C data type " + definition.type
+            }
+        }
+    }
+
+    function readStructAtAddress(address, definition) {
+        switch (definition.type) {
+            case 'union':
+            case 'struct': {
+                let struct = { __size: 0 };
+                for (const member of definition.members) {
+                    let result = readStructAtAddress(address, member);
+                    struct[member.name] = result;
+                    if (definition.type === 'struct') {
+                        struct.__size += result.__size;
+                        address += result.__size;
+                    } else {
+                        struct.__size = Math.max(struct.__size, result.__size);
+                    }
+                }
+                return struct;
+            }
+            case 'float': return { value: memoryDataView.getFloat32(address, true), __size: 4 };
+            case 'uint32_t': return { value: memoryDataView.getUint32(address, true), __size: 4 };
+            case 'uint16_t': return { value: memoryDataView.getUint16(address, true), __size: 2 };
+            case 'uint8_t': return { value: memoryDataView.getUint16(address, true), __size: 1 };
+            default: {
+                throw "Unimplemented C data type " + definition.type
+            }
+        }
+    }
+
+    function getTextDimensions(text, font) {
+        // re-use canvas object for better performance
+        window.canvasContext.font = font;
+        let metrics = window.canvasContext.measureText(text);
+        return { width: metrics.width, height: metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent };
+    }
+
+    function createMainArena(arenaStructAddress, arenaMemoryAddress) {
+        let memorySize = instance.exports.Clay_MinMemorySize();
+        // Last arg is address to store return value
+        instance.exports.Clay_CreateArenaWithCapacityAndMemory(arenaStructAddress, memorySize, arenaMemoryAddress);
+    }
+    async function init() {
+        window.htmlRoot = document.body.appendChild(document.createElement('div'));
+        window.canvasRoot = document.body.appendChild(document.createElement('canvas'));
+        window.canvasContext = window.canvasRoot.getContext("2d");
+        window.mousePositionXThisFrame = 0;
+        window.mousePositionYThisFrame = 0;
+        window.mouseWheelXThisFrame = 0;
+        window.mouseWheelYThisFrame = 0;
+        window.touchDown = false;
+        let zeroTimeout = null;
+        addEventListener("wheel", (event) => {
+            window.mouseWheelXThisFrame = event.deltaX * -0.1;
+            window.mouseWheelYThisFrame = event.deltaY * -0.1;
+            clearTimeout(zeroTimeout);
+            zeroTimeout = setTimeout(() => {
+                window.mouseWheelXThisFrame = 0;
+                window.mouseWheelYThisFrame = 0;
+            }, 10);
+        });
+
+        function handleTouch(event) {
+            if (event.touches.length === 1) {
+                window.touchDown = true;
+                window.mousePositionXThisFrame = event.changedTouches[0].pageX;
+                window.mousePositionYThisFrame = event.changedTouches[0].pageY;
+            }
+        }
+
+        document.addEventListener("touchstart", handleTouch);
+        document.addEventListener("touchmove", handleTouch);
+        document.addEventListener("touchend", () => {
+            window.touchDown = false;
+            window.mousePositionXThisFrame = 0;
+            window.mousePositionYThisFrame = 0;
+        })
+
+        document.addEventListener("mousemove", (event) => {
+            window.mousePositionXThisFrame = event.x;
+            window.mousePositionYThisFrame = event.y;
+        });
+
+        document.addEventListener("mousedown", (event) => {
+            window.mouseDown = true;
+        });
+
+        const importObject = {
+            clay: {
+                measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {
+                    let stringLength = memoryDataView.getUint32(textToMeasure, true);
+                    let pointerToString = memoryDataView.getUint32(textToMeasure + 4, true);
+                    let textConfig = readStructAtAddress(addressOfConfig, textConfigDefinition);
+                    let textDecoder = new TextDecoder("utf-8");
+                    let text = textDecoder.decode(memoryDataView.buffer.slice(pointerToString, pointerToString + stringLength));
+                    let sourceDimensions = getTextDimensions(text, `${Math.round(textConfig.fontSize.value * GLOBAL_FONT_SCALING_FACTOR)}px ${fontsById[textConfig.fontId.value]}`);
+                    memoryDataView.setFloat32(addressOfDimensions, sourceDimensions.width, true);
+                    memoryDataView.setFloat32(addressOfDimensions + 4, sourceDimensions.height, true);
+                }
+            },
+        };
+        const { instance } = await WebAssembly.instantiateStreaming(
+            fetch("./index.wasm"), importObject
+        );
+        memoryDataView = new DataView(new Uint8Array(instance.exports.memory.buffer).buffer);
+        scratchSpaceAddress = instance.exports.__heap_base.value;
+        heapSpaceAddress = instance.exports.__heap_base.value + 1024;
+        let arenaAddress = scratchSpaceAddress;
+        window.instance = instance;
+        createMainArena(arenaAddress, heapSpaceAddress);
+        instance.exports.Clay_Initialize(arenaAddress);
+        renderCommandSize = getStructTotalSize(renderCommandDefinition);
+        renderLoop();
+    }
+
+    function MemoryIsDifferent(one, two, length) {
+        for (let i = 0; i < length; i++) {
+            if (one[i] !== two[i]) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    function renderLoopHTML() {
+        let capacity = memoryDataView.getUint32(scratchSpaceAddress, true);
+        let length = memoryDataView.getUint32(scratchSpaceAddress + 4, true);
+        let arrayOffset = memoryDataView.getUint32(scratchSpaceAddress + 8, true);
+        let scissorStack = [{ nextAllocation: { x: 0, y: 0 }, element: htmlRoot, nextElementIndex: 0 }];
+        for (let i = 0; i < length; i++, arrayOffset += renderCommandSize) {
+            let entireRenderCommandMemory = new Uint32Array(memoryDataView.buffer.slice(arrayOffset, arrayOffset + renderCommandSize));
+            let renderCommand = readStructAtAddress(arrayOffset, renderCommandDefinition);
+            let parentElement = scissorStack[scissorStack.length - 1];
+            let element = null;
+            if (!elementCache[renderCommand.id.value]) {
+                let elementType = 'div';
+                switch (renderCommand.commandType.value) {
+                    case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
+                        if (readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition).link.length.value > 0) {
+                            elementType = 'a';
+                        }
+                        break;
+                    }
+                    case CLAY_RENDER_COMMAND_TYPE_IMAGE: { elementType = 'img'; break; }
+                    default: break;
+                }
+                element = document.createElement(elementType);
+                element.id = renderCommand.id.value;
+                elementCache[renderCommand.id.value] = {
+                    exists: true,
+                    element: element,
+                    previousMemoryCommand: new Uint8Array(0),
+                    previousMemoryConfig: new Uint8Array(0),
+                    previousMemoryText: new Uint8Array(0)
+                };
+            }
+
+            let dirty = false;
+            let elementData = elementCache[renderCommand.id.value];
+            element = elementData.element;
+            if (Array.prototype.indexOf.call(parentElement.element.children, element) !== parentElement.nextElementIndex) {
+                if (parentElement.nextElementIndex === 0) {
+                    parentElement.element.insertAdjacentElement('afterbegin', element);
+                } else {
+                    parentElement.element.childNodes[parentElement.nextElementIndex - 1].insertAdjacentElement('afterend', element);
+                }
+            }
+
+            elementData.exists = true;
+            // Don't get me started. Cheaper to compare the render command memory than to update HTML elements
+            if (renderCommand.commandType.value !== CLAY_RENDER_COMMAND_TYPE_SCISSOR_START && renderCommand.commandType.value !== CLAY_RENDER_COMMAND_TYPE_SCISSOR_END) {
+                dirty = MemoryIsDifferent(elementData.previousMemoryCommand, entireRenderCommandMemory, renderCommandSize);
+                parentElement.nextElementIndex++;
+            } else {
+                dirty = true;
+            }
+
+            elementData.previousMemoryCommand = entireRenderCommandMemory;
+            let offsetX = scissorStack.length > 0 ? scissorStack[scissorStack.length - 1].nextAllocation.x : 0;
+            let offsetY = scissorStack.length > 0 ? scissorStack[scissorStack.length - 1].nextAllocation.y : 0;
+            if (dirty) {
+                element.style.transform = `translate(${Math.round(renderCommand.boundingBox.x.value - offsetX)}px, ${Math.round(renderCommand.boundingBox.y.value - offsetY)}px)`
+                element.style.width = Math.round(renderCommand.boundingBox.width.value) + 'px';
+                element.style.height = Math.round(renderCommand.boundingBox.height.value) + 'px';
+            }
+
+            switch (renderCommand.commandType.value) {
+                case (CLAY_RENDER_COMMAND_TYPE_NONE): {
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_RECTANGLE): {
+                    let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
+                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
+                    let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
+                    if (linkContents.length > 0 && (window.mouseDown || window.touchDown) && instance.exports.Clay_PointerOver(renderCommand.id.value)) {
+                        window.location.href = linkContents;
+                    }
+                    if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
+                        break;
+                    }
+                    if (linkContents.length > 0) {
+                        element.href = linkContents;
+                    }
+
+                    if (linkContents.length > 0 || config.cursorPointer.value) {
+                        element.style.pointerEvents = 'all';
+                        element.style.cursor = 'pointer';
+                    }
+                    elementData.previousMemoryConfig = configMemory;
+                    let color = config.color;
+                    element.style.backgroundColor = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
+                    if (config.cornerRadius.topLeft.value > 0) {
+                        element.style.borderTopLeftRadius = config.cornerRadius.topLeft.value + 'px';
+                    }
+                    if (config.cornerRadius.topRight.value > 0) {
+                        element.style.borderTopRightRadius = config.cornerRadius.topRight.value + 'px';
+                    }
+                    if (config.cornerRadius.bottomLeft.value > 0) {
+                        element.style.borderBottomLeftRadius = config.cornerRadius.bottomLeft.value + 'px';
+                    }
+                    if (config.cornerRadius.bottomRight.value > 0) {
+                        element.style.borderBottomRightRadius = config.cornerRadius.bottomRight.value + 'px';
+                    }
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_BORDER): {
+                    let config = readStructAtAddress(renderCommand.config.value, borderConfigDefinition);
+                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
+                    if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
+                        break;
+                    }
+                    elementData.previousMemoryConfig = configMemory;
+                    if (config.left.width.value > 0) {
+                        let color = config.left.color;
+                        element.style.borderLeft = `${config.left.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`
+                    }
+                    if (config.right.width.value > 0) {
+                        let color = config.right.color;
+                        element.style.borderRight = `${config.right.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`
+                    }
+                    if (config.top.width.value > 0) {
+                        let color = config.top.color;
+                        element.style.borderTop = `${config.top.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`
+                    }
+                    if (config.bottom.width.value > 0) {
+                        let color = config.bottom.color;
+                        element.style.borderBottom = `${config.bottom.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`
+                    }
+                    if (config.cornerRadius.topLeft.value > 0) {
+                        element.style.borderTopLeftRadius = config.cornerRadius.topLeft.value + 'px';
+                    }
+                    if (config.cornerRadius.topRight.value > 0) {
+                        element.style.borderTopRightRadius = config.cornerRadius.topRight.value + 'px';
+                    }
+                    if (config.cornerRadius.bottomLeft.value > 0) {
+                        element.style.borderBottomLeftRadius = config.cornerRadius.bottomLeft.value + 'px';
+                    }
+                    if (config.cornerRadius.bottomRight.value > 0) {
+                        element.style.borderBottomRightRadius = config.cornerRadius.bottomRight.value + 'px';
+                    }
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_TEXT): {
+                    let config = readStructAtAddress(renderCommand.config.value, textConfigDefinition);
+                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
+                    let textContents = renderCommand.text;
+                    let stringContents = new Uint8Array(memoryDataView.buffer.slice(textContents.chars.value, textContents.chars.value + textContents.length.value));
+                    if (MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
+                        element.className = 'text';
+                        let textColor = config.textColor;
+                        let fontSize = Math.round(config.fontSize.value * GLOBAL_FONT_SCALING_FACTOR);
+                        element.style.color = `rgba(${textColor.r.value}, ${textColor.g.value}, ${textColor.b.value}, ${textColor.a.value})`;
+                        element.style.fontFamily = fontsById[config.fontId.value];
+                        element.style.fontSize = fontSize + 'px';
+                        element.style.pointerEvents = config.disablePointerEvents.value ? 'none' : 'all';
+                        elementData.previousMemoryConfig = configMemory;
+                    }
+                    if (stringContents.length !== elementData.previousMemoryText.length || MemoryIsDifferent(stringContents, elementData.previousMemoryText, stringContents.length)) {
+                        element.innerHTML = textDecoder.decode(stringContents);
+                    }
+                    elementData.previousMemoryText = stringContents;
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
+                    scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 });
+                    element.style.overflow = 'hidden';
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
+                    scissorStack.splice(scissorStack.length - 1, 1);
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_IMAGE): {
+                    let config = readStructAtAddress(renderCommand.config.value, imageConfigDefinition);
+                    let srcContents = new Uint8Array(memoryDataView.buffer.slice(config.sourceURL.chars.value, config.sourceURL.chars.value + config.sourceURL.length.value));
+                    if (srcContents.length !== elementData.previousMemoryText.length || MemoryIsDifferent(srcContents, elementData.previousMemoryText, srcContents.length)) {
+                        element.src = textDecoder.decode(srcContents);
+                    }
+                    elementData.previousMemoryText = srcContents;
+                    break;
+                }
+                case (CLAY_RENDER_COMMAND_TYPE_CUSTOM): break;
+            }
+        }
+
+        for (const key of Object.keys(elementCache)) {
+            if (elementCache[key].exists) {
+                elementCache[key].exists = false;
+            } else {
+                elementCache[key].element.remove();
+                delete elementCache[key];
+            }
+        }
+    }
+
+    function renderLoop(currentTime) {
+        const elapsed = currentTime - previousFrameTime;
+        previousFrameTime = currentTime;
+        instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, elapsed / 1000);
+        renderLoopHTML();
+        requestAnimationFrame(renderLoop);
+        window.mouseDown = false;
+    }
+    init();
+</script>
+
+<body>
+</body>
+
+</html>