コンテンツにスキップ
Developer Preview — APIs and language features may change before 1.0

Surfaces: Pages

このコンテンツはまだ日本語訳がありません。

The page surface turns a machine into a web application. Instead of returning JSON to an API client, the machine serves a web page that end users interact with in a browser. This is Kanvas, the interface layer where machines become visible to the people who use them.

Declaring a page surface

machine order_dashboard
accepts
customer_id as text
responds with
orders as list
total_value as number
ensures
permissions
allowed to
reason, http
implements
ask fetch_orders, from: "@mashin/actions/http/get"
url: "https://api.internal.com/orders?customer=${input.customer_id}"
returns
body as map
assuming
body: {orders: [{id: "ord_1", amount: 50}], total: 50}
compute format
{orders: steps.fetch_orders.body.orders, total_value: steps.fetch_orders.body.total}
expresses
page
path: "/"
title: "Order Dashboard"

This machine is now accessible as a web page at the root path.

Configuration options

ConfigRequiredDefaultDescription
pathYes-URL path for the page
titleNoMachine namePage title shown in the browser tab

What Kanvas renders

When a browser visits the page URL, Kanvas renders the machine’s output as an interactive web page. The rendering is based on the output structure:

  • Lists render as tables or card grids
  • Text renders as formatted content
  • Numbers render as metrics or charts
  • Maps render as structured data views
  • Nested structures render as expandable sections

You do not write HTML, CSS, or React. Kanvas generates the interface from the machine’s typed output. The output types from responds with determine the rendering.

How pages differ from other surfaces

ConcernAPI surfacePage surface
ClientHTTP client (code)Browser (human)
ResponseJSONHTML page
InteractionSingle request/responseNavigable interface
AuthenticationToken/API keySession-based

Combining page with WebSocket

For live dashboards, combine page and websocket surfaces:

machine live_dashboard
expresses
page
path: "/dashboard"
title: "System Metrics"
websocket
path: "/ws/metrics"

The page surface serves the initial view. The WebSocket surface pushes live updates. Kanvas wires these together automatically: when a page and a WebSocket share the same machine, the page subscribes to the WebSocket for real-time updates.

Combining page with API

machine data_explorer
expresses
page
path: "/explore"
title: "Data Explorer"
api
path: "/api/query"
method: "POST"
authentication: "bearer_token"

The page surface provides a visual interface. The API surface provides a programmatic one. Same machine, same governance, same ledger.

Multiple pages

A machine can serve multiple pages:

expresses
page
path: "/"
title: "Dashboard"
page
path: "/settings"
title: "Settings"

Accessing pages

Local cell

http://localhost:9000/
http://localhost:9000/dashboard

Cloud cell

https://myorg.mashin.live/
https://myorg.mashin.live/dashboard

Via tunnel

Terminal window
mashin tunnel order_dashboard.mashin
# Shows: https://mashin.live/tunnel/order_dashboard/

Authentication for pages

Page surfaces use session-based authentication. When a user visits the page, they are prompted to sign in (or the session is validated if they are already signed in). This is different from API surfaces, which use token-based authentication.

For public pages that do not require sign-in, the machine’s governance still applies. The user’s identity is “anonymous” in the ledger.

Governance

Every page view is governed:

  1. The user is authenticated (session-based)
  2. The machine’s ensures permissions are checked
  3. The machine executes
  4. A SurfaceAccess event is recorded with :page surface
  5. Kanvas renders the result

Navigation within the page (clicking a link, expanding a section) may trigger additional machine executions, each individually governed and recorded.

When to use pages

ScenarioSurface
Internal dashboard for your teamPage
Customer-facing portalPage
Admin toolPage + API
Public demoPage (no auth)
Data API for other systemsAPI only

Pages are the right choice when a human needs to see and interact with the machine’s output directly in a browser.

Next steps