Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more

Phonebook turns existing SwiftUI #Preview and Jetpack Compose @Preview output into a static gallery of app screens and states. It is designed for teams that want designers, product managers, and QA to browse native UI previews without opening an IDE or maintaining a separate story catalog. Its main trade-offs are practical: Android rendering can run on the JVM without an emulator, iOS rendering needs macOS and a simulator, and the documented v1 produces a single-platform gallery per repository.

What Phonebook does

Phonebook is an open-source CLI and MCP server that harvests previews already in an app repository and turns them into a browsable static HTML gallery. Rather than creating a second catalog of screens, it uses native preview code as the source of truth. That can make it easier to answer questions such as “Can I see all the button states?” or “What does the empty state look like now?” outside the developer’s IDE.

Phonebook groups previews by names. For example, a preview named UserCard/Loading is intended to appear under a “User Card” component with a “Loading” state. That means consistent, descriptive preview names matter: the gallery’s organization depends on the names developers give their previews.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The project describes itself as a self-hosted alternative to snapshot-gallery tools. The deliverable is a static website, not a hosted service. Phonebook also offers an MCP server that coding-agent clients can use for setup diagnosis, preview-coverage analysis, guidance on missing previews, and generation/build actions.

How the generation and build steps work

The documented workflow has two commands. The first renders previews into a bundle; the second turns that bundle into a static site.

  1. Run phonebook generate. Phonebook invokes the platform-specific preview renderer and writes a bundle containing a manifest and images.

  2. Run phonebook build. Phonebook builds the bundle into an HTML, CSS, and JavaScript gallery.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  3. Open the result locally using a file:// URL, or publish the static output to a host if others need to access it.

Hosting is optional: it affects how you share the finished gallery, not whether you can generate one. The project announcement lists GitHub Pages, S3, Vercel, Netlify, and internal static hosting as possible destinations; the right choice depends on your team’s existing deployment and access-control practices.

Android and iOS have different rendering requirements

Phonebook uses different rendering paths for the two supported preview systems. This matters most when deciding whether generation can run on a developer machine or in CI.

Platform Documented rendering path Key requirements Configuration
Android / Jetpack Compose Roborazzi and ComposablePreviewScanner, using Robolectric on the JVM JDK 17 or later; an Android emulator is not required Gradle module or modules and build variant
iOS / SwiftUI SnapshotPreviews through xcodebuild test against a named simulator macOS with Xcode installed and a booted or bootable simulator; CI therefore needs a macOS runner Xcode project or workspace, scheme, and simulator

Android Studio’s official documentation describes Compose previews as a way to inspect composables during development. Phonebook’s Android pipeline uses a separate JVM rendering route to collect those previews. See Android’s Compose previews documentation for the native preview concept; for Phonebook-specific setup and current dependencies, consult the Phonebook repository.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Installation and agent-assisted use

The project documents installation through npm, one-off execution with npx, and Homebrew. Its MCP server can be launched with npx @stag-build/phonebook mcp. The repository includes example configuration for coding-agent clients, including Codex CLI.

  • Global npm install: npm install -g @stag-build/phonebook
  • One-off use: run the CLI through npx.
  • MCP server: npx @stag-build/phonebook mcp

With the MCP server configured in a supported client, an agent can help diagnose setup, inspect preview coverage, suggest where previews may be missing, and invoke the documented generation and build actions. Exact installation options, configuration format, and supported client details can change; use the current instructions in the official repository before setting up a team workflow.

What v1 can and cannot publish

The current documentation describes v1 as single-platform per repository: an Android repository or an iOS repository produces one bundle and one site. It does not document a built-in way to merge Android and iOS bundles into a combined, side-by-side gallery.

The project lists gallery search and filtering, multi-bundle merging with cross-platform comparison, version diffing, and additional CI recipes as roadmap work. These are not features to assume are available in the current v1. If your deliverable requires one place to compare Android and iOS, or to inspect changes between releases, check the current project status and plan for a separate solution unless those capabilities have since shipped.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

When Phonebook is a good fit

  • Your app already has meaningful previews. Phonebook builds on native preview code; it does not remove the need to create and maintain that code.
  • Your team wants stakeholder access without an IDE. A static gallery can make UI states easier to browse, whether opened locally or published to a static host.
  • Your platform’s renderer can run where you need it. Android’s documented JVM route avoids an emulator; iOS requires macOS, Xcode, and a simulator.
  • You are comfortable deriving the catalog from preview names. Naming conventions become the organization system, rather than a separate story metadata file.

When to look for another approach

  • You need a combined cross-platform gallery today. The documented v1 is single-platform per repository, and bundle merging is roadmap work.
  • You need built-in release-to-release visual diffs. Version diffing is also listed as roadmap work, not a current capability.
  • Your iOS build environment lacks macOS or simulator access. The documented SwiftUI rendering path depends on both.
  • Your preview coverage is sparse or inconsistently named. The output can only organize and display the previews available to it; useful component/state grouping relies on names such as UserCard/Loading.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Decision checklist

  1. Confirm that the repository contains the relevant native previews: Compose @Preview or SwiftUI #Preview.

  2. Check the renderer’s environment requirements against developer machines and CI. For Android, verify JDK 17 or later and the configured Gradle modules and variant. For iOS, verify macOS, Xcode, a usable simulator, project or workspace, and scheme.

  3. Agree on preview naming conventions so component and state groupings are predictable.

  4. Decide whether a local static artifact is enough or whether the gallery should be published to an existing static host.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  5. Confirm that one platform per repository meets the audience’s needs; do not count roadmap items as available functionality.

Phonebook is most compelling when a team already invests in native previews and wants to make them easier to review beyond the IDE. Its value is less about replacing preview authoring than about packaging existing states into a shareable catalog, with platform-specific rendering constraints and a single-platform v1 scope to account for.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.