toss
Feature Proposal: `es-toolkit` Playground
1. Background
es-toolkit is increasingly adopted as a modern, type-safe alternative to Lodash, yet there is no purpose-built space for developers to experiment with its API.
While users can technically paste snippets into the browser console on the docs site, feedback shows that a dedicated, interactive environment would lower the barrier to exploration and learning.
An open-source, browser-based playground will let anyone:
- browse symbols and documentation side-by-side,
- write / auto-complete code in TypeScript,
- run it instantly in a safe sandbox,
- inspect the output in an integrated console.
2. Project Goals (MVP)
| # | Capability | Notes |
|---|---|---|
| 1 | Categorized navigation | Tree or tabbed view grouped by module (Array, Object, ...) |
| 2 | Symbol search | Fuzzy search with instant filtering |
| 3 | Code editor | Monaco with TS IntelliSense & linting |
| 4 | Console output | Real-time console.* stream + error stack traces |
| 5 | Example injection | Clicking a symbol inserts a runnable sample |
| 6 | Docs synchronization | Sidebar pulls from existing es-toolkit Typedoc JSON |
| 7 | Dark-mode toggle | Simple light/dark switch |
| 8 | i18n | en / ko support |
3. Out of Scope (Non-Goals)
- Theme/custom palette editor
- Permalink or gist-style code sharing
- Server-side sessions, DB, or Node-based REPL
4. Reference Screen (TBD)
(Just tweaked this, let me know if it looks okay!)
5. Technical Specification
| Layer | Library / Tooling | Purpose |
|---|---|---|
| Editor | @monaco-editor/react | TS/JS editing & IntelliSense |
| Sandbox | @codesandbox/sandpack-react | In-browser ESBuild + iframe runner |
| Docs Renderer | react-markdown | Render README & JSDoc |
6. Security & Performance Considerations
| Concern | Mitigation |
|---|---|
| Sandbox isolation | Run user code in an off-origin iframe with sandbox="allow-scripts"; parent ↔ child via postMessage. |
| Infinite loops / heavy compute | Worker timeout 1 s; terminate iframe on overrun. |
| XSS | All console output passes through DOMPurify.sanitize and is inserted with textContent, never innerHTML. |
If this direction looks reasonable, may I go ahead and implement it as outlined above?
This is a really great suggestion! I especially love that we can write while looking at the documentation.
Would you be able to work on this even lightly, even if you don't implement all the MVP features you listed?
This is a really great suggestion! I especially love that we can write while looking at the documentation.
Would you be able to work on this even lightly, even if you don't implement all the MVP features you listed?
Sure! I'll let you know when the PR is open.
