IconVault logoIconVault
Sign in

Proxy and Reflect Playground - Interactive Lab | IconVault

Watch Proxy traps intercept gets, sets, deletes and calls in real time across 5 scenarios. Free, runs fully in your browser.

All tools

Proxy & Reflect Playground

Watch Proxy traps intercept operations in real time

5 of 5 free uses left

Pick a scenario, then run operations against its proxy.

Proxy intercepts operations with traps; Reflect performs the default behavior inside the trap so language invariants stay intact.

Operations

Trap log

Run an operation. Each fired trap appears here in order.

Scenario source

const target = { name: "ada", role: "admin" };

const logged = new Proxy(target, {
  get(t, prop, receiver) {
    console.log("get", prop);
    return Reflect.get(t, prop, receiver); // forward, keeps invariants
  },
  set(t, prop, value, receiver) {
    console.log("set", prop, value);
    return Reflect.set(t, prop, value, receiver);
  },
  deleteProperty(t, prop) {
    console.log("delete", prop);
    return Reflect.deleteProperty(t, prop);
  },
});

Why Reflect matters

Traps must honor language invariants: for example, a get trap on a non-configurable, non-writable data property must return the target's actual value. Calling Reflect.get(target, prop, receiver) performs the default operation correctly, including keeping the right this.

5 of 5 free copies left.

About this tool

IconVault's Proxy and Reflect Playground makes metaprogramming visible: pick from logging, validation, read-only, private-field and function-proxy scenarios, run real get, set, delete, in and Object.keys operations, and watch every trap fire in order in the live log. It is free to use and runs fully in your browser with nothing uploaded.

How to use: choose a scenario, run operations against its proxy, and read the trap sequence. The source panel explains why Reflect matters for keeping language invariants. Perfect for developers learning ES6 proxies or understanding how frameworks like Vue build reactivity.

Frequently asked questions

Popular searches

javascript proxyproxy traps explainedreflect api javascriptproxy get set trapjavascript proxy exampleproxy vs reflectproxy apply trapproxy construct trapproxy has trapproxy ownkeysproxy deletepropertyreflect.get examplereflect.set examplereflect.applyjavascript metaprogrammingproxy validation examplereadonly proxy javascriptprivate fields proxylogging proxy jsproxy invariantsrevocable proxyproxy function callproxy this bindingreflect.constructreflect.definepropertyreflect.ownkeysproxy set return falseproxy strict mode errorlearn javascript proxyes6 proxy tutorialproxy design pattern jsproxy use casesvue reactivity proxyhow vue 3 proxy worksproxy performanceproxy browser supportproxy mdnreflect mdnproxy handler traps listjavascript proxy interviewmetaprogramming javascriptproxy get trap exampleproxy set trap validationobservable object proxyproxy negative array indexproxy default valuesproxy api playgroundreflect api explainedproxy reflect tutorialjs proxy lab

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →