Design and Implementation of an Online Component Preview and Debugging Platform for Frontend Development

Background

Frontend developers need a fast way to perceive component functionality and properties. While basic component libraries provide complete documentation, business components are only available in an internal NPM registry with static API docs and no demos. Non‑frontend users (product, test, operations) also need to preview and debug components.

Requirements

Scenario Analysis

Function

Component preview

Component debugging – two interaction modes: code debugging (edit example code) and schema debugging (modify component props via a JSON schema).

Classification

Basic components

Business components

Low‑code components (used by the internal low‑code platform “Luban”).

Low‑code components ship with a schema.json file that describes their props; developers should not have to write this manually.

Target Audience

R&D engineers – need full code debugging.

Non‑R&D (product, test, operations) – need quick preview and prop editing via a property panel.

Research

Existing Mature Products

StackBlitz – online IDE with WebContainers for Node.js.

CodeSandbox – online editor with many templates and open‑source core.

Solution Overview

The platform consists of a code editor, component property panel, toolbar, and preview area.

Code Editor

Both MonacoEditor (feature‑rich) and CodeMirror (lightweight) are viable; CodeMirror is sufficient for editing component demos.

Component Property Panel

A generic schema protocol describes component props; the low‑code platform provides the schema data, and the panel renders a dynamic form.

Toolbar

Account login

API proxy – obtains a token via OAuth and injects it into request headers.

Service Worker based proxy to intercept requests directly in the browser.

Preview Area

Container – an iframe isolates the component runtime.

Communication – postMessage between editor, core package, and preview.

Core Package

Inspired by CodeSandbox, it handles code transpilation and execution. Main modules:

Manger – registers and resolves transpiled modules ( addTranspiledModule , resolveTranspiledModuleSync , resolveTranspiledModuleAsync , evaluateTranspiledModule ).

Transpiler – loaders for Babel, TypeScript, Vue, etc. module.exports = JSON.stringify(sourceCode)

Preset – framework‑specific presets (Vue, React) that register appropriate transpilers. vuePreset.registerTranspiler(module => /\.(m|c)?jsx?$/.test(module.path), [{ transpiler: babelTranspiler }]);

Transpiled‑module – stores transpiled code, dependencies, and execution results.

Runtime – evaluates transpiled modules with a custom eval wrapper, providing Node‑like globals (require, process, global).

Final Remarks

The design balances product‑driven requirements with technical feasibility, ensuring that both developers and non‑developers can efficiently preview, debug, and interact with components throughout their lifecycle.

References

CodeSandbox core source: https://github.com/codesandbox/codesandbox-client/tree/master/packages/sandpack-core

How CodeSandbox runs Webpack in the browser: https://www.yuque.com/wangxiangzhong/aob8up/nb1gp2