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

brixtonmavu — Sat, 23 May 2026 07:28:56 +0000

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/
💻 GitLab Repository: Gemma 4 Caretaker Sandbox Repository

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:

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 (generateTemplate): Translates standard English prompts into an immediately renderable { 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 (fixTemplate): 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.
The Virtual CRUD Filesystem Manager (caretakerCrud): Translates loose instructions like "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)

Forem: brixtonmavu