A web tool to explore the internal mechanisms of frontend frameworks.
Prerequisites: Node 20+, npm 10+
git clone <repo-url>
cd frameworkx
npm install
npm run dev # http://localhost:5173src/
compiler/ # SWC WASM (React) and @vue/compiler-sfc (Vue) compile pipelines
probes/ # Instrumentation scripts injected into the iframe before the CDN loads
adapters/ # Normalize raw probe events into typed store data
hooks/ # useBridge — single postMessage listener mounted on AppShell
store/ # Zustand stores: editorStore, bridgeStore, visualizerStore
types/ # Canonical postMessage event contracts (touch first for new event shapes)
components/
Editor/ # Monaco editor (read-only) + instrumentation iframe
Shell/ # App layout and toolbar
Visualizer/ # TreeVisualizer (React fiber tree) and ReactivityGraph (Vue dep graph)
docs/
HLD.md # High-level architecture with Mermaid diagram
LLD.md # Low-level implementation details
Compilation — When the editor content changes (debounced 300 ms), the host bundle compiles it in the browser: SWC WASM for React TSX, @vue/compiler-sfc for Vue SFCs. The output is a self-contained ESM string sent into a sandboxed iframe via postMessage.
Instrumentation — A probe script is injected into the iframe shell before the framework CDN module loads. It installs __REACT_DEVTOOLS_GLOBAL_HOOK__ or __VUE_DEVTOOLS_GLOBAL_HOOK__. On every React commit or Vue reactive update, the probe serialises the internal tree and calls window.parent.postMessage back to the host.
Visualization — A single message listener (useBridge) on the host receives the event, routes it to the correct adapter, and writes the normalised data into Zustand. The React Flow canvas subscribes to the store and re-renders the fiber tree or reactivity graph on every change.
For a full breakdown see docs/HLD.md (architecture + data flow) and docs/LLD.md (implementation details).
| Layer | Technology |
|---|---|
| App shell | React 19 · Vite 7 · TypeScript 5.9 |
| Editor | @monaco-editor/react |
| React compilation | @swc/wasm-web — SWC WASM running in the browser |
| Vue compilation | @vue/compiler-sfc |
| Visualization | @xyflow/react (React Flow 12) |
| State | Zustand 5 |
| Styling | Tailwind CSS 4 |
PRs are welcome. Follow Conventional Commits (feat: / fix: / chore:). Run npx tsc --noEmit and npm run lint before opening a PR. For larger changes, open an issue first to discuss the approach.
This project is inspired by the ideas of:
- Dan Abramov
- JSer
While the initial plan was to extend JSer's RIE tool for other frontend frameworks, this project was built from scratch as the original RIE source is not open-source and the implementation has become outdated.
MIT — see LICENSE for details.