Export & Import Pages

StudioWeb saves pages as JSON files that can be exported, shared, version-controlled, and imported back. This guide covers the full round-trip workflow.

Exporting a Page

Quick Save

  1. Click File → Save or the Save toolbar icon
  2. The browser downloads a page.json file
  3. Rename it to something meaningful (e.g., pump-station-overview.json)

What Gets Exported

The JSON file contains the complete page definition:

  • Format properties — canvas size, background, window metadata, paging links
  • All objects — static and dynamic, with full properties
  • Layer definitions — layer names, visibility, ordering
  • Object properties — AFD (geometry, input), DFD (type-specific), HDA (data bindings)
  • Styles — colors, line, fill, font for each object

What Does NOT Get Exported

  • Live data values (data comes from peers at runtime)
  • Undo/redo history
  • User preferences (stored in browser localStorage)

Importing a Page

Load from File

  1. Click File → Open or the Open toolbar icon
  2. Select a .json page file from your file system
  3. The page loads, replacing the current canvas contents

From Converted ASC Files

Pages converted from SAMMI ASC format using asc2web are also JSON files and load the same way. They live in public/pages/ and are available in RuntimeWeb’s file picker.

Page JSON Structure

{
  "version": 1,
  "name": "My Page",
  "formatProperties": {
    "canvasWidth": 800,
    "canvasHeight": 600,
    "backgroundColor": "#0f172a",
    "title": "Pump Station Overview",
    "description": "Main monitoring page"
  },
  "objects": [
    {
      "id": "obj_001",
      "type": "dynamic",
      "objectType": "Meter",
      "name": "Temp Meter",
      "x": 100, "y": 50,
      "width": 200, "height": 180,
      "layer": 2,
      "visible": true,
      "style": { "fg": "#ffffff", "bg": "#000000" },
      "properties": {
        "min": 0, "max": 100,
        "readKey": "temperature",
        "logicalServer": "peer_fast"
      }
    }
  ],
  "layers": [
    { "id": 1, "name": "Background", "visible": true },
    { "id": 2, "name": "Instruments", "visible": true }
  ]
}

Version Control

Page JSON files are plain text and work well with Git:

# Track page files
git add public/pages/pump-station.json
git commit -m "Add pump station overview page"

# See what changed
git diff public/pages/pump-station.json

Sharing Pages

To share a page with another StudioWeb user:

  1. Export the page as JSON
  2. Send the .json file (email, file share, Git repository)
  3. The recipient imports it via File → Open
  4. All objects, properties, and layout are preserved

Batch Conversion (ASC → JSON)

To convert legacy SAMMI ASC pages to JSON:

cd apps/asc2web
npx tsx src/cli.ts ../../asc/*.asc -o ../../apps/runtime-web/public/pages/

This converts all .asc files and places the JSON output in public/pages/.

Tips

  • Keep page files under version control for change tracking
  • Use descriptive file names that match the page’s purpose
  • After importing, verify all DDOs rendered correctly before saving over the original
  • The JSON format is human-readable — you can hand-edit it for bulk property changes

See Also