seek-oss/playroom

Playroom is a browser-based tool that lets you prototype and experiment with UI components using real code from your own design system. You write JSX (a syntax that looks like HTML mixed with JavaScript) and Playroom instantly shows how your components look across different screen sizes and visual themes at the same time, side by side in the same window. The tool is built to sit alongside an existing component library. You configure it by pointing it at your components folder, and optionally defining a list of themes and viewport widths to preview. Once running, you can write snippets of code in the editor and immediately see the result rendered in each combination of theme and screen size you defined. There is no install required for people using Playroom in a team because it can be deployed as a static bundle to any web server. Sharing work is done by copying the URL, which encodes the current code so anyone with the link can open the exact same state in their browser. The tool also supports predefined code snippets that team members can browse and insert, each with a live preview as you hover over them. Setup involves adding Playroom as a development dependency via npm, adding two scripts to your package.json for starting and building, and creating a configuration file that specifies where your components live and what options to enable. A custom wrapper component can be provided if your components require context providers such as a theme or localization setup. Playroom is maintained by the team at SEEK and is published as an open source npm package. It is aimed at teams that have already built a design system and want a faster way to prototype layouts and interactions without leaving real code behind.