$ show seek-oss/playroom
Playroom is a code-oriented design environment for React component libraries. It allows developers to write JSX code in an in-browser CodeMirror editor and see live previews rendered inside isolated iframes, with support for multiple themes and viewport widths simultaneously. The application provides a CLI (playroom start / build) that generates a dynamic webpack configuration, serves the editor UI via webpack-dev-server in development, or produces a static build for production. The frontend is a single-page React application using Vanilla Extract for CSS-in-JS, with state managed via React context and persisted to IndexedDB via localforage. Code is compiled client-side with sucrase, and the entire editor state (code, themes, widths) can be compressed into shareable URLs via lz-string.
The LLM identified 3 files worth highlighting for reuse:
A standalone utility that compiles JSX source code into React elements using sucrase. It is isolated (only imports sucrase), well-typed, and can be reused in any project that needs to transform JSX strings to React components at runtime. Demonstrates non-obvious skill in efficient client-side JSX transformation.
A utility that formats code strings using Prettier with built-in support for embedded CSS-in-JS (<style jsx>). It is self-contained, parameterizable, and can be extracted for any project requiring code formatting. Shows careful handling of edge cases (embedded CSS) and integration with Prettier's API.
A reusable scrollable container component that applies fade-out gradients at the top and bottom edges to indicate overflow. It is built with Vanilla Extract for styling, does not depend on any internal state or context, and can be extracted as a standalone UI component. Demonstrates a clean scroll-fade pattern often needed in design systems.