V8 Hidden Classes - Shapes and Inline Caches | IconVault
Visualize V8 hidden-class transitions and inline cache states: monomorphic, polymorphic, megamorphic. Interactive shape trees. Free.
V8 Hidden Classes
Shape transitions and inline-cache states
V8 gives every object a hidden class describing its layout. Adding a property transitions the object to a new class. Add properties in the same order and objects share classes (fast); mix the order and each path gets its own class (slow). Toggle properties below to see the trees diverge.
Object A
C1
∅ empty
C2
{ x }
C3
{ x, y }
final class: C2 { x, y }
Object B
C1
∅ empty
C2
{ y }
C3
{ y, x }
final class: C2 { y, x }
Copyable example
// Different property order -> DIFFERENT hidden classes -> slower
function makeA() {
const o = {};
o.x = 0;
o.y = 0;
return o;
}
function makeB() {
const o = {};
o.y = 0;
o.x = 0;
return o;
}
// makeA() ends at C2 { x, y }
// makeB() ends at C2 { y, x } - a different class!About this tool
IconVault's V8 Hidden Classes visualizer reveals the optimization hiding inside every JavaScript object. Build two objects with different property orders and watch their hidden-class transition trees diverge: same order shares one class, mixed orders fork into slower shapes, with a copyable code example to prove it.
Then explore inline caching: slide from one shape to eight and watch the call site degrade from monomorphic to polymorphic to megamorphic, with a plain-English report on what V8 does at each stage. Everything is free and runs fully in your browser.
Frequently asked questions
Popular searches
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