# The Caretaker Sandbox: An Offline-First Visual Playground & Template Engine powered by Gemma 4

> Source: <https://dev.to/brixtonmavu/the-caretaker-sandbox-an-offline-first-visual-playground-template-engine-powered-by-gemma-4-2bgl>
> Published: 2026-05-23 07:28:56+00:00

*This is a submission for the Gemma 4 Challenge: Build with Gemma 4*

## What I Built

The **Caretaker Sandbox** is a lightweight, offline-first developer playground and template deck designed for travel, remote work, and instant visual drafting. Rather than acting as a redundant code IDE, it is designed from the ground up to be a pocket instrument—perfect for crafting visual blocks such as transactional templates, responsive layouts, sign-off slips, forms, and custom web cards.

### The Purpose: Design On-The-Go, Healed by AI

We’ve all had those moments on a flight, train ride, or deep in a cafe with spotty Wi-Fi: you want to spin up a quick, highly stylized mock or format a piece of dynamic HTML/CSS, but spinning up heavy development servers or depending on cloud environments fails.

The **Caretaker Sandbox** solves this with a two-track architecture:

-
**Fully Isolated Offline Core**: You can code, inject responsive custom styles, preview in an isolated frame, and toggle boilerplates (like the*DHAS Secure Visa*or*Invoice details*) completely offline. It features a custom client-side syntax highlighter, interactive panels, and a custom**state difference tracker with full Undo/Redo historical control**. -
**Gemma 4 Cyber-Caretaker (Online-Ready)**: The moment your device hits a connection, Gemma 4 is unlocked as a powerful structural assistant. Directly inside your sandbox workspace, it can**instantly generate responsive designs**,** auto-diagnose and heal runtime syntax bugs**, or** manage physical workspace files**in your sandboxed filesystem using smart, semantic commands.

### Elegant "Cyber Midnight" Theme Palette

To prevent developer eye strain under dark airplane cabins or dimly lit environments, the entire template editing deck is built with a bespoke, Obsidian-inspired premium cyber styling palette utilizing customized hex tokens:

-
**Darkest Obsidian Onyx**(`#060609`

/`#0c0d12`

) for background layers and editing panels. -
**Vibrant Lavender & Soft Violet**(`#a78bfa`

/`#c084fc`

) for key action items and active visual splits. -
**Vivid Emerald Green**(`#10b981`

/`#34d399`

) for success indicators and string variables. -
**Neon Pink & Cyber Pink**(`#f472b6`

) for syntax keywords and UI triggers. -
**Warm Tangerine**(`#fb923c`

/`#f59e0b`

) for warnings and structural properties.

## Demo

Experience the live visual sandbox environment here:

- 🚀
**Live App Preview**:[https://zbd-hub.onrender.com/](https://zbd-hub.onrender.com/) - 💻
**GitLab Repository**:[Gemma 4 Caretaker Sandbox Repository](https://gitlab.com/brixmavu/zbd_hub)

## Code

The application contains zero redundant heavy full-stack frameworks—no React, Express, or Vite compilation scripts blocking start times. It is built as a pure Node.js HTTP command plane and client-side web sandbox.

The backend maps routes with nanosecond response times using standard built-in streams. It routes instructions straight to Google's official `@google/genai`

client.

### Inside the Schema-Restricted Core

Here is how we configure the prompt instructions in `gemini.ts`

to guarantee flawless, instant visual renderings:

``` js
import { GoogleGenAI, Type } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

export async function generateTemplate(prompt: string) {
  const systemInstruction = `You are a professional Cyberpunk Web Template Generator. Return ONLY a JSON object with keys "html", "css", "js".
Do not wrap your response in markdown fences and do not add any explanation or text outside the JSON. It must be a valid, parsed, complete JSON.`;

  const response = await ai.models.generateContent({
    model: "gemini-3.5-flash",
    contents: `Generate a web template for: ${prompt}`,
    config: {
      systemInstruction,
      responseMimeType: "application/json",
      responseSchema: {
        type: Type.OBJECT,
        properties: {
          html: { type: Type.STRING, description: "HTML layout structure containing components." },
          css: { type: Type.STRING, description: "Beautiful stylesheets and styling properties." },
          js: { type: Type.STRING, description: "Raw JavaScript code adding interactivity and state handlers." }
        },
        required: ["html", "css", "js"]
      }
    }
  });

  return response.text || "{}";
}
```

## How I Used Gemma 4

Integrating highly capable models like Gemma 4 to operate as a physical supervisor over real visual design files involves heavy semantic reasoning. We tailored our setup to accommodate two paths: online high-end compilation and offline edge-computing execution.

### Models Chosen

-
**Gemma 4 31B Dense (Primary Studio Caretaker)**: When connected to the network, we leverage the robust, state-of-the-art Gemma 4 31B Dense reasoning path (proxied via the client). The 31B Dense architecture is the ideal fit here. Designing websites requires a holistic understanding of how nested layers relate to class indicators and dynamic DOM query selectors. The 31B model exhibits high spatial layout intelligence, drafting complex multi-column grids and writing pristine vanilla functions that execute without logical collision. -
**Gemma 4 E4B / E2B (Edge & Offline Travel Companions)**: Because of our travel-first commitment, offline developers can run the lightweight Gemma 4 E4B or E2B models directly on their device via local runners (e.g.,`llama.cpp`

or Ollama inside native Terminal environments), using this frontend sandbox as an interactive local editor container.

### The Caretaker's Three Modules

-
**The Visual Synthesizer (**: Translates standard English prompts into an immediately renderable`generateTemplate`

)`{ html, css, js }`

JSON block. Enforcing strict JSON outputs prevents annoying markdown code block symbols from clogging up compilation streams. -
**The Code Caretaker Auto-Healer (**: When your layout looks off or throws a standard error, you type a short guideline. Gemma 4 reads the current code bundle alongside your visual critique, refactoring only the buggy segments while reserving the rest.`fixTemplate`

) -
**The Virtual CRUD Filesystem Manager (**: Translates loose instructions like`caretakerCrud`

)*"Save this design in a folder named templates under visa.html"*into safe CRUD JSON directives. The Node server executes these securely into process-isolated generated spaces.

## Summary Comparison

Whether you are looking for an elegant drafting tool or diving deep into the code underpinnings, here is a quick overview of why the Sandbox stands as a high-craft utility:

| For the Technical Developer | For the Creative / Non-Technical Reader |
|---|---|
Pure Event-Driven Node Server: Leverages the native HTTP server module, eliminating the overhead of bloated modern frameworks. |
Instant Visual Feedback: Write layout descriptions in plain English and see them turn into operational web blocks immediately. |
Strict JSON Schemas: Validated type constraints prevent API text hallucination and ensure 100% stable parser mapping. |
Zero Setup Work: Start creating in your browser right away without dealing with installations or configurations. |
Immutable Undo/Redo Differ: An array-bound history ring captures state snapshots, ensuring zero-loss rollbacks. |
Aesthetic Dark Mode: A gorgeous Obsidian Onyx color canvas that is gentle on your eyes during long late-night sessions. |
Regex-Driven Client-Side Tokenizer: A lightweight syntax highlighter parses and colors tags, classes, properties, and strings instantly in memory. |
Pre-Loaded Templates: Access preset templates (like interactive invoices or form pads) right out of the box. |

*Submission authored by Brixton Mavu ( @brixtonmavu on DEV.to)*