SmartPreview

SmartPreview is a high-performance web-based visual code sandbox

Nextjs

Overview

SmartPreview allows developers to compose mockups in multiple template languages (HTML/Handlebars, Pug, JSX), inject key-value scope variables reactively, and inspect live sandbox rendering with responsive testing viewports.

The Problem

Developers repeatedly waste time hardcoding mock data or manually reloading the browser just to preview how a template or email body will render with different variables. Existing sandboxes rarely offer responsive preview frames or dynamic variable inputs alongside live, client-side compilation of Pug/JSX, forcing developers to rebuild this workflow themselves each time.

The Solution

An immersive split-screen layout linking a Monaco-powered code editor directly to a sandboxed preview frame. Features a collapsible variables drawer that injects data reactively on every keystroke, a draggable split layout, dynamic device viewport simulations, and custom syntax reference sheets.

Design Flow

Step 1: Wireframed a split-panel interface separating code composition from live preview.

Step 2: Prototyped a bottom collapsible drawer for declaring reactive scope variables.

Step 3: Designed high-fidelity dark-themed syntax reference workspaces.

Step 4: Implemented a fluid drag-to-resize handle for customized developer layouts.

Schema Design

{
  "code": "string",
  "language": "html | pug | handlebars | jsx",
  "variables": [
    { "key": "string", "value": "string" }
  ],
  "viewMode": "edit | view | both",
  "viewport": "desktop | tablet | mobile"
}

Technical Decisions

Next.js & React: Selected for premium static rendering performance and modular hook composition.
Monaco Editor: Standardized as the code core to provide developers with standard IDE shortcuts.
react-resizable-panels: Integrated to provide buttery-smooth, fluid drag-to-resize workspace splits.
Custom Tokenizer: Wrote a pure RegExp-based client highlighter for instantaneous, lightweight syntax rules rendering.

Challenges

Pug and JSX Rendering: Compiling specialized formats directly in the client browser environment without backend API delays.
Hydration & Contrast: Managing theme switches so dark-mode code elements remain high-contrast on dark backgrounds, even when the page is switched to light mode.
Reactivity Bottlenecks: Preventing frame lag while continuously rendering compilation changes on keypress.

Key Learnings

In-Browser compilation: Discovered that running compiler bundles like @babel/standalone inside a client-side worker resolves JSX seamlessly.
Static Highlighting: Custom light token highlight systems perform faster and have fewer packages than heavy static syntax engines.
Tactile Drag UX: Clean boundaries are key to ensuring split columns resizing feels balanced on desktop.

Results

Successfully built a fast, zero-latency template compiler. SmartPreview compiles JSX and Pug with active variable injections in under 10ms, lets users resize their workspaces intuitively, and provides a polished, interactive, responsive mockup suite.

Loading content...

The Problem

Design Flow

Step 1: Wireframed a split-panel interface separating code composition from live preview.

Step 2: Prototyped a bottom collapsible drawer for declaring reactive scope variables.

Step 3: Designed high-fidelity dark-themed syntax reference workspaces.

Step 4: Implemented a fluid drag-to-resize handle for customized developer layouts.

{ "code": "string", "language": "html | pug | handlebars | jsx", "variables": [ { "key": "string", "value": "string" } ], "viewMode": "edit | view | both", "viewport": "desktop | tablet | mobile" }

Technical Decisions

Next.js & React: Selected for premium static rendering performance and modular hook composition.

Monaco Editor: Standardized as the code core to provide developers with standard IDE shortcuts.

react-resizable-panels: Integrated to provide buttery-smooth, fluid drag-to-resize workspace splits.

Custom Tokenizer: Wrote a pure RegExp-based client highlighter for instantaneous, lightweight syntax rules rendering.

Challenges

Pug and JSX Rendering: Compiling specialized formats directly in the client browser environment without backend API delays.

Hydration & Contrast: Managing theme switches so dark-mode code elements remain high-contrast on dark backgrounds, even when the page is switched to light mode.

Reactivity Bottlenecks: Preventing frame lag while continuously rendering compilation changes on keypress.

Key Learnings

In-Browser compilation: Discovered that running compiler bundles like @babel/standalone inside a client-side worker resolves JSX seamlessly.

Static Highlighting: Custom light token highlight systems perform faster and have fewer packages than heavy static syntax engines.

Tactile Drag UX: Clean boundaries are key to ensuring split columns resizing feels balanced on desktop.