# Preview with hot reload

Preview a Block's interface locally in StillMade's own view host, with stand-ins for hosted calls, a console and reload on save.

`stillmade-block dev <folder>` opens a local preview at `http://127.0.0.1:4800`
(`--port` changes it). The page is StillMade's own view host: the same sandbox
page, bridge, response policy, theme, run limits and guard that run your
interface in the app, so what works here works there.

- Your interface (standard or frame view) runs with the first fixture's input.
  Edit the input as JSON beside it, pick another fixture, switch Light, Dark and
  White, and try phone, tablet and full widths.
- `StillMade.run` runs the Block on your machine with the SDK runtime. Hosted
  operations, files, network, connections and storage are answered by
  [stand-ins](/docs/build/testing), and stand-in media (images, audio, video)
  previews in the view. Shared view state (`updateShared`) is kept in the page.
- Saving any file the package reads reloads the preview, keeping the input and
  shared state. With `--build "npm run build"`, saving any other source file
  (such as `src/view.jsx`) runs the build first, then reloads.
- The console lists every run, the module's `stillmade.log` lines, each
  stand-in that answered, reloads, build output and errors from the view.
- The server listens on this machine only, refuses other host names and other
  sites, and never contacts StillMade or a provider. Paid runs, sign-ins and
  keys happen only in StillMade, after you import the Block.

### Live link to your account

`stillmade-block dev <folder> --live` also prints a link to StillMade's Import
page. Open it while signed in and choose **Connect**: each time you save, the
packed Block (what `pack` would write) opens in StillMade's usual import review
with its checks and preview, and confirming installs that version in your
account, as a new revision of the same build. Use it in a project to run it with
real hosted operations, files and connections; every paid step shows its price
and asks first, as for any Block.

- Nothing is installed or published without your confirmation in the review.
- Only the StillMade site can read the link, and only with the random key in it,
  which changes each time `dev` starts. `--site` sets another StillMade address
  (https). Stop the link with **Disconnect** or by stopping `dev`.
- The browser may ask once whether StillMade may reach a local address.

## Templates
`stillmade-block create <folder> <template>` writes a complete folder that validates and tests offline:

| Template | What it starts |
| --- | --- |
| `recipe` (default), `image`, `stateful` | Built-in steps with no code; memory between runs |
| `javascript` | A few lines of sandboxed JavaScript |
| `module`, `module-wasm` | Modern JavaScript modules in a Worker, with WebAssembly |
| `module-hosted` | A module calling hosted text and image generation as tools |
| `view-react`, `view-html` | A frame view in React (bundled with esbuild) or plain web code |
| `text`, `image-generate`, `video-generate`, `speech`, `music`, `sfx`, `transcribe`, `describe-image`, `analyze-media`, `web-fetch`, `web-research`, `timeline-proposal` | One hosted operation each, on the person's credits |
| `outside-api`, `connection` | An outside API with the person's own key; a published adapter with their sign-in |
| `storage` | Values kept across runs in project storage |
| `trigger-media`, `trigger-webhook`, `trigger-schedule` | Blocks that run on their own once the project owner turns them on |