Saving and Loading Pages

Status: Published

StudioWeb allows you to save your work as JSON files and load them later.

Saving a Page

Method 1: Toolbar Button

  1. Click the 💾 (Save) icon in the toolbar
  2. A file named page.json will download to your browser’s download folder

Method 2: Menu Bar Button

  1. Click the Save button in the top-right of the menu bar
  2. A file named page.json will download

Loading a Page

Method 1: Toolbar Button

  1. Click the 📂 (Open) icon in the toolbar
  2. Select a .json file from your file system
  3. The page will load, replacing any current content

Method 2: Menu Bar Button

  1. Click the Load button in the top-right of the menu bar
  2. Select a .json file from your file system

Creating a New Page

  1. Click the 📄 (New) icon in the toolbar
  2. Confirm the dialog (unsaved changes will be lost)
  3. A blank canvas will be created

Page File Format

Pages are saved as JSON with the following structure:

{
  "version": 1,
  "name": "Untitled Page",
  "canvasWidth": 800,
  "canvasHeight": 600,
  "objects": [
    {
      "id": "obj_001",
      "type": "dynamic",
      "objectType": "Meter",
      "name": "Meter 1",
      "x": 100,
      "y": 100,
      "width": 200,
      "height": 180,
      "layer": 1,
      "visible": true,
      "style": { ... },
      "properties": { ... }
    }
  ],
  "layers": [
    { "id": 1, "name": "Background", "visible": true },
    { "id": 2, "name": "Layer 1", "visible": true }
  ]
}

Tips

  • Backup regularly: Save your work frequently to avoid losing changes
  • Version control: Consider storing page files in Git for history tracking
  • Naming: Rename downloaded files to something meaningful (e.g., main-dashboard.json)

Troubleshooting

Save button doesn’t download anything

  • Check if your browser is blocking downloads
  • Try a different browser
  • Check browser console for errors

Load button doesn’t show file picker

  • Ensure you’re clicking the correct button
  • Try refreshing the page

See Also