简体中文
EnglishCan Subframe preview and edit a live app?
Updated
Yes. Subframe is built around a roundtrip between design and code, and one of its core surfaces is a browser view of your running app. The page evidence shows a canvas that can launch localhost:3000/home and display it alongside a layers panel and a stack of card components. That means you are not looking at a static mockup — you are looking at the app itself, and edits made in the design surface are meant to correspond to that running interface.
What "live preview" means here
Subframe describes itself as "a design tool connected to your codebase, and a coding agent with a canvas." The relevant heading is "Preview & edit your live app," and the broader framing is "Designing & building is a roundtrip."
The practical reading of that:
- Input: a running app, referenced by a local address such as
localhost:3000/home. - Action: the canvas loads that page and lets you work on it — inspecting structure, editing design, and using an agent for code changes.
- Expected result: the change you make in the design surface maps back to the app, rather than living only in a separate design file.
This is the difference between a design tool that exports specs and a tool that sits on top of the actual running product.
The three surfaces: Canvas, Browser, Agent
The page lists its main areas as "Canvas. Browser. Agent." They are not separate products — they are three views of the same work:
| Surface | What it shows | Why it matters |
|---|---|---|
| Canvas | Infinite canvas built for code | Design work happens in a space that understands code structure, not just pixels |
| Browser | Your live app, e.g. localhost:3000/home |
You see the real rendered result, not an approximation |
| Agent | One agent for design & code | Changes can be planned and applied across both layers |
The evidence also shows a "Layers" panel with a "Home" tree containing a "Stack" of "Card" components. So the canvas is not just visual — it exposes the component hierarchy of the page you are previewing.
A concrete example from the page
The clearest illustration in the evidence is a planning task:
"Plan a new feature for geotagging where photos are taken. Research the codebase to come up with an implementation approach, and capture the existing product to explore a few new designs of how to present it to..."
This is the roundtrip in one sentence. The agent researches the codebase, captures the existing product, and explores new designs — all before or alongside implementation. You are not switching between a design tool, an editor, and a browser to do this.
What this changes about the workflow
If you are used to a design-then-handoff process, the shift is:
- You point Subframe at your running app.
- You edit in the canvas, seeing the live result.
- The agent handles the code side of the change.
The page's own summary is "Design & build in one tool," and the roundtrip framing suggests the loop can repeat — design, build, preview, adjust — without leaving the tool.
What to check before relying on it
The page evidence supports the preview-and-edit capability and the localhost connection. It does not spell out every constraint, so verify these against your own setup:
- How your app is served. The example uses
localhost:3000/home, so a locally running dev server is the implied starting point. - Which frameworks and component structures map cleanly to the canvas layers view.
- How agent-made code changes are reviewed before they land in your codebase.
Pricing and plan limits are referenced on the site (there is an "Upgrade to Pro" link and a docs page about AI credits), so if agent usage matters to you, check the plans page rather than assuming a free tier covers it.
The short answer: Subframe previews your live app in a browser view and lets you edit against it, with an agent bridging design and code. Whether that fits your stack depends on how your app is served and how much of the code-change loop you want automated.