Loading content...
Back to Projects
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 frequently experience layout latency and waste time hardcoding mock values or reloading browser states to preview templates. Existing sandboxes lack built-in responsive frames, do not compile client-side Pug/JSX dynamically with dynamic variable drawers, and create slow context-switching friction.
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
1
Step 1: Wireframed a split-panel interface separating code composition from live preview.
2
Step 2: Prototyped a bottom collapsible drawer for declaring reactive scope variables.
3
Step 3: Designed high-fidelity dark-themed syntax reference workspaces.
4
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.