Review working product screens together.
Atelier is a local workspace for reviewing coded prototypes on a pannable, zoomable canvas. See related screens side by side, focus on one, then enter it to try the real interaction. Each project keeps its own code, styles and data.
Watch the 33-second demo · Download the MP4
Review a compact Robot UI board, inspect its UI library, then start and stop a local branch preview. Recording and review notes.
Explore the Marvin project shown here · See my portfolio
Five screens keep the overview easy to scan. Robot UI is the demo project label; the sample product uses fictional fleet data.
- Choose a project. The project rail switches between connected prototypes. The sidebar lists their screens and any linked pages, such as a component library.
- Review related screens together. Screens appear in named groups. Pan, zoom or choose a screen in the sidebar to bring it into view.
- Try the interaction. Double-click a screen, or enter a selected preview, to use its links, forms and scrolling. Exit the preview to return to navigating the canvas.
- Review components and branches. Open the project’s UI library, or choose a local branch in Preview source and start a committed preview. Stop returns to Working preview.
The library stays a working project page. Atelier’s presentation controls sit outside it.
A coded prototype can spread a flow across many routes and states. Atelier brings those screens into one review space while keeping the implementation in its original project.
Three decisions shape the tool:
- Separate navigation from interaction. Selecting a frame moves around the review space; entering it passes input to the product. A click intended to select a screen does not activate a control inside it.
- Let projects describe their own screens. A small manifest supplies groups, routes and dimensions. Atelier displays those pages without copying their components or styling.
- Keep the review controls outside the product. Project switching, sizing and zoom belong to Atelier. Each framed screen keeps its own interface.
- A browser workspace with project switching, grouped screens, pan and zoom.
- Live previews with separate selection and interaction modes.
- Desktop, tablet and mobile viewport presets, plus each project’s original screen sizes.
- Linked project pages, such as UI libraries.
- A personal Mac app using the same workspace.
- Configurable previews of committed local branches on macOS.
The workspace uses React and TypeScript with a local Node server. The Mac app hosts it in a Swift/AppKit window with WKWebView. Connected projects serve their own pages; Atelier reads their screen manifest and embeds the previews.
Viewport presets help review responsive layouts. They do not emulate a physical device’s touch input, browser chrome or pixel density.
Atelier currently runs locally. This repository is a public showcase with a demo video and screenshots; the application source remains private. There is no public app download or hosted Atelier demo.
The screenshots use Marvin, a separate product design prototype with synthetic operational data. Try Marvin’s hosted demo to explore that project.