A visual playground for understanding the internals of the stack and heap in Java applications. Create interactive diagrams to visualize objects, references, variables, and method calls.
Visit jmp.openpatch.org to start using the Java Memory Playground in your browser.
- Visual Memory Modeling: Create and visualize Java objects, variables, and method calls
- Stack and Heap Visualization: See how the stack (method calls and local variables) and heap (objects) interact
- References: Connect variables to objects with visual reference arrows
- Class Definitions: Define custom classes with attributes
- Garbage Collection: Simulate garbage collection to see which objects would be removed
- Undo and Redo: Step back through your edits, with keyboard shortcuts
- Black and White: A print palette that says in line style what the diagram otherwise says in colour, so a downloaded PNG survives a photocopier
- English and German: The interface follows your browser language
When you click the "Save (URL)" button, your current project state is saved directly to the URL. This means:
- Persistence: The URL contains all your work - no account needed
- Sharing: Copy and share the URL with others to share your memory diagram
- Reloading: Bookmark or save the URL to return to your project later
The URL uses compressed encoding to efficiently store your entire project state in the browser's address bar.
For educators, the Java Memory Playground is perfect for teaching memory concepts:
- Prepare: Create a memory diagram showing a specific concept (linked lists, object references, method call stack, etc.)
- Save: Click "Save (URL)" to encode your diagram in the URL
- Share: Copy the URL and share it with your students via email, LMS, or messaging
- Learn: Students can open the URL to see your exact diagram, explore it, and modify it for learning
No setup or installation required for students - they just open the link and start learning!
Besides the hosted app, the playground ships as two packages:
- React component — integrate it into your own React app (see packages/java-memory-playground)
- Web component — use it in any page, no framework required (see packages/web-component)
There are two elements: <java-memory-playground> for students, and
<java-memory-playground-editor> for teachers, which adds class configuration
and step authoring on top.
.jmp files open as the diagram rather than as JSON
(see platforms/vscode). A .jmp file is the same JSON the
playground puts in a shared link, so a diagram moves between the app, an
embedded playground and the editor unchanged — and being a plain text file, it
diffs and reviews like the code it illustrates.
<java-memory-playground id="playground"></java-memory-playground>
<script src="path/to/index.umd.js"></script>
<script>
const playground = document.getElementById("playground");
playground.setAttribute("memory", JSON.stringify(diagram));
playground.addEventListener("change", (e) => console.log(e.detail));
</script>An embedded playground never touches the URL of its host page, and several of them can share a page. The UI is available in English and German.
- Node.js (v22 or higher)
- pnpm (v9 or higher — v9 is the floor because that is what the deployment runs; 10 and 11 work too)
Clone the repository and install dependencies:
git clone https://github.com/openpatch/java-memory-playground.git
cd java-memory-playground
pnpm installThe app at jmp.openpatch.org is the student's
playground. Append ?edit for the teacher's, which adds class configuration and
step authoring.
The help button opens documentation.html, which is served beside the app from
platforms/web/public. The link is
relative, so it follows the app wherever it is deployed.
Start the standalone app with hot reload:
pnpm build # the app consumes the built package
pnpm --filter web devThe application will be available at http://localhost:5173 (or another port if 5173 is in use).
pnpm build # build every package and the app
pnpm test # run the test suites
pnpm lint # type-check every packagebuild comes first: the packages typecheck against each other through their
built dist/index.d.ts, so lint cannot resolve them in a checkout that has
never been built.
This is a pnpm workspace.
packages/java-memory-playground/- the React component libraryMemoryPlayground.tsx- the embeddable entry point (props, change events)MemoryView.tsx- main canvas for creating memory diagramsConfigView.tsx- configuration view for defining classes and optionsstore.ts- per-instance state (nodes, edges, classes, options), undo history and opt-in URL persistencestoreContext.tsx- scopes a store to one playground instancetranslations.ts- English and German stringsKeyboardShortcuts.tsx- keyboard handlingserde.ts- serialization/deserialization for URL encodingmemory.ts- type definitions for memory objects
packages/web-component/-<java-memory-playground>custom element (UMD bundle)platforms/web/- the standalone app served at jmp.openpatch.orgplatforms/vscode/- the VS Code editor for.jmpfiles
Versioning and changelogs are handled by changesets. Add one describing your change:
pnpm changesetMerging to main opens a "Version Packages" pull request; merging that one
publishes. The npm packages go to npm, and the VS Code extension goes to the
Visual Studio Marketplace and Open VSX in the same run — it is a private
package, but changesets versions and tags private packages, so a changeset
naming java-memory-playground-studio releases it too.
Publishing the extension needs the VSCE_TOKEN and OVSX_TOKEN repository
secrets; see platforms/vscode/DEVELOPMENT.md.
- React - UI framework
- TypeScript - Type-safe JavaScript
- Vite - Build tool and dev server
- @xyflow/react - Flow diagram rendering
- Zustand - State management
- Pako - Compression for URL encoding
- Zundo - Undo/redo history
- @r2wc/react-to-web-component - React to custom element bridge
MIT