Quickstart

You will finish with a local link showing one flow from your app: its screens, with their normal, empty, and error states. Your coding agent prepares the configuration and starts the app and viewer for you.

Have an app already? Follow the three steps below. Want a working reference? Open the demo, inspect its source on GitHub, or go straight to run the example locally.

1. Install Mockspace#

Use Node.js 20.6 or later. Copy this command into your terminal and run it once:

npm install -g https://mockspace.ynext.co/mockspace-cli.tgz
mockspace --help

You should see the CLI’s supported commands. If installation fails, use the installation guide.

2. Paste this into your coding agent#

Open your app’s repository folder in your coding agent. Click Copy prompt below, paste it into the agent’s chat, and send it. You can use the prompt as written.

Read https://mockspace.ynext.co/agent-guide.md and help me set up Mockspace in this repository.
Inspect the app and its startup command. Read the packaged mockspace-setup and mockspace-mocks SKILL.md files as the guide explains for my agent.
Reuse existing .mockspace configuration and app-owned fixtures. Prepare one representative user flow with its key screen states; report unreachable states and failures truthfully.
Run mockspace check --project ., start the app with its declared command, then run mockspace dev --project . and inspect the result.
Report the actual local viewer URL and explain how to navigate the flow and its states. Keep the first result local; publishing is a separate next step only if I request it.

The agent will inspect your app, prepare one representative flow, validate the configuration, and start the app and viewer. If it needs a startup command or another project detail it cannot find, answer in that chat. The agent guide explains the setup in more detail.

3. Open the link your agent returns#

Open the actual local viewer URL from the agent’s response. Keep the app and viewer running while you review.

1. Select the flow. Its steps run from left to right.
2. Select a screen, then compare the states underneath it.
3. Use Fit flow to see the whole journey or Fit screen to focus on one state.
4. Ask the agent to fix any missing or incorrect state you find.

For a larger project, add levels: ["Booking", "Flights"] to a flow declaration to group it in the navigator. Drag the navigator’s right edge to make long names easier to scan. See Flows for the declaration and keyboard controls.

You are done when the canvas shows your flow, its screens load, and the important states visibly differ. You do not need a hosted account or a published project for this local result.

If the agent stopped before starting the viewer, ask it to run these from your app folder:

mockspace check --project .
mockspace dev --project .

The app must also be running with the startup command shown by check. If the canvas cannot connect, give your agent the error and ask it to verify both processes and the configured app.url.

Run the example locally#

The download contains Fieldnotes, the same synthetic notebook shown in the interactive demo. The webpage and its complete Mockspace setup live together in the repository’s demo directory. It is already configured with three screens and seven states. Downloading alone does not start it.

Get the demo#

From GitHub: inspect the source and README, then clone the repository:

git clone --depth 1 https://github.com/yanolja-org/mockspace.git
cd mockspace/demo

You can also choose Code → Download ZIP on GitHub and open the extracted repository’s demo folder. The repository is internal, so GitHub access is required. If you already have a checkout, open its demo folder directly.

Download just the demo: the website’s archive requires no GitHub access and contains the same webpage, .mockspace configuration, and README. If you downloaded mockspace-quickstart.tgz from onboarding, extract it and open the resulting demo folder. Or run these commands in a new directory:

curl -fL https://mockspace.ynext.co/static/mockspace-quickstart.tgz -o mockspace-quickstart.tgz
tar -xzf mockspace-quickstart.tgz
cd demo

Then, give your agent this example prompt. It will check the installation, start the sample and viewer, and tell you which link to open:

Help me run the Mockspace Fieldnotes demo. I have opened the demo folder in this agent.
Read README.md and the existing .mockspace configuration. This example is already configured; reuse it.
Check Node.js is 20.6 or later. In a Mockspace source checkout, use node ../bin/mockspace.mjs in place of mockspace below. Otherwise verify mockspace --help works; if the CLI is missing, install it with: npm install -g https://mockspace.ynext.co/mockspace-cli.tgz
Run mockspace check --project .; start node server.mjs and keep it running. Verify http://127.0.0.1:4173/browse responds, then run mockspace dev --project . in a second terminal.
Return the actual local viewer URL. Help me open Find a note worth keeping, select a screen, and compare its normal, empty, and error states. Confirm there are three screens and seven states, and report anything that fails.
Keep both processes running while I review, and tell me how to stop them. Keep this local; no publishing is needed.

What you should see: a flow named Find a note worth keeping, containing Browse notes, Read a note, and Your saved list. Select different states to see the empty and error screens. Use Run prototype to browse and save a note. The sample uses fixed URLs; it does not persist your changes.

Run it yourself instead#

After installing Mockspace, open a terminal in the demo folder. From a Mockspace source checkout, use node ../bin/mockspace.mjs in place of mockspace in the commands below; a global install is not needed in that case.

mockspace check --project .
node server.mjs

Leave that terminal running. The sample app is at http://127.0.0.1:4173/browse. Open a second terminal in the same demo folder and run:

mockspace dev --project .

Open the viewer URL printed by dev. Stop each process with Ctrl+C when finished. If port 4173 is occupied, ask your agent to identify the conflicting app or update both the sample server port and .mockspace/config.mjs app.url.

To use it as a reference, read app.mjs for the mock states, .mockspace/config.mjs for the app command and URL, and .mockspace/flows.mjs for the flow and state definitions. Keep these files together when copying the demo.

Review a shared link#

If someone sent you a review URL, open it in your browser and sign in if requested. Select a flow, inspect its states, and pin a comment to the relevant frame. You need no CLI or local app for browser review.

Share when you choose#

Publishing creates a hosted project and a review link. When you are ready, prepare the capture prerequisites, build and inspect the result, then sign in and publish. The CLI reference describes sharing commands.