Save & Load Projects

Overview

b5 projects are saved as .b5.json files - human-readable JSON documents that store your entire project including the Playground canvas, Factory definitions, and all block configurations.

b5 uses keyboard shortcuts familiar to most applications:

Save: Cmd+S (Mac) or Ctrl+S (Windows/Linux)
Load: Drag and drop the .b5.json file into the editor

Saving Your Project

Press Save Shortcut

Press Cmd+S (Mac) or Ctrl+S (Windows/Linux) to trigger the save dialog.

Choose Location

Your browser will prompt you to choose where to save the file. The filename is automatically generated with a timestamp.

File Downloaded

The file will be saved with the format: YYYY-MM-DD_HH-MM-SS.b5.jsonExample: 2026-03-03_14-30-45.b5.json

Loading a Project

Locate Your File

Find the .b5.json file you want to load from your file system.

Drag and Drop

Drag the file into the b5 editor window and drop it anywhere on the interface.

Project Loads

Your project will load automatically, restoring all blocks, connections, and Factory definitions.

Loading a project will replace your current work. Make sure to save your current project before loading a different one.

Understanding the .b5.json Format

The .b5.json file is a structured JSON document with three main sections:

File Structure

{
  "playground": { ... },
  "factory": { ... },
  "version": "0.1.2"
}

Section	Description
`playground`	Contains all blocks and wires in your main canvas
`factory`	Stores custom variables, functions, and objects
`version`	b5 editor version used to create the file

Playground Structure

"playground": {
  "type": "playground",
  "lineStyles": {},
  "blocks": {
    "0": {  // Line number
      "0": {  // Block position
        "name": "comment",
        "source": "original",
        "uuid": "89885483-c57c-4ea4-8588-abe67ef7dc71",
        "inlineData": ["Welcome to b5!"]
      },
      "1": { ... }
    },
    "1": { ... }
  }
}

Factory Structure

"factory": {
  "variable": [
    {
      "name": "cnv",
      "type": "variable",
      "lineStyles": {},
      "blocks": { ... }
    }
  ],
  "function": [
    {
      "name": "boundaries",
      "type": "function",
      "lineStyles": {},
      "blocks": { ... }
    }
  ],
  "object": []
}

Block Anatomy

Every block in a .b5.json file contains these key properties:

{
  "name": "circle",
  "source": "original",
  "uuid": "daddd1b9-9ee0-4fd2-976f-5c250af895d9",
  "input": {
    "0": ["3", "1", "0"],
    "1": ["3", "3", "0"],
    "2": ["0", "1", "0"]
  }
}

Block Properties

Property	Type	Description
`name`	string	Block type identifier
`source`	string	Origin: `"original"` (built-in), `"custom"` (user-made), or `"library"` (imported)
`uuid`	string	Unique identifier for this block instance
`inlineData`	array	Values stored directly in the block (for inputs, sliders, color pickers, etc.)
`input`	object	Wire connections to input nodes (format: `{"nodeIndex": ["line", "block", "outputNode"]}`)
`output`	object	Wire connections from output nodes to other blocks

Wire Connection Format

Wire connections use a coordinate system ["line", "block", "node"]:

"input": {
  "0": ["3", "1", "0"]
}

This means:

Input node 0 of this block
Connects to output node 0
Of block at position 1
On line 3

null means no connection for that input node.

Block Source Types

Original Blocks

"source": "original"

Built-in blocks provided by b5 (e.g., circle, rect, number, add).

Custom Blocks

"source": "custom"

User-created variables and functions defined in the Factory.

Library Blocks

"source": "library"

Blocks from imported libraries (e.g., posenet from the PoseNet library).

Example: Complete Project File

Here’s a simplified complete .b5.json file:

{
  "playground": {
    "type": "playground",
    "lineStyles": {},
    "blocks": {
      "0": {
        "0": {
          "name": "comment",
          "source": "original",
          "uuid": "89885483-c57c-4ea4-8588-abe67ef7dc71",
          "inlineData": ["Welcome to b5!"]
        },
        "1": {
          "name": "numberSlider",
          "source": "original",
          "uuid": "fdbab34e-f083-4d38-b06c-0e7bf584a662",
          "inlineData": [40, 0, 50, 5],
          "output": {
            "0": [["5", "3", "2"]]
          }
        }
      },
      "5": {
        "3": {
          "name": "circle",
          "source": "original",
          "uuid": "daddd1b9-9ee0-4fd2-976f-5c250af895d9",
          "input": {
            "0": ["3", "1", "0"],
            "1": ["3", "3", "0"],
            "2": ["0", "1", "0"]
          }
        }
      }
    }
  },
  "factory": {
    "variable": [
      {
        "name": "cnv",
        "type": "variable",
        "lineStyles": {},
        "blocks": {
          "0": {
            "0": {
              "name": "number",
              "source": "original",
              "uuid": "363fd6b1-1b3b-4149-945a-cd79b17e492a",
              "inlineData": [500],
              "output": { "0": [["1", "0", "0"]] }
            }
          },
          "1": {
            "0": {
              "name": "createCanvas",
              "source": "original",
              "uuid": "53d3acfc-f9c2-469d-bc83-73e2f16ab8d3",
              "input": {
                "0": ["0", "0", "0"],
                "1": null,
                "2": null
              },
              "output": { "0": [] }
            }
          }
        }
      }
    ],
    "function": [],
    "object": []
  },
  "version": "0.1.2"
}

Line Styles

The lineStyles object can store styling information for entire lines:

"lineStyles": {
  "2": {
    "highlight": true,
    "color": "#ff0000"
  }
}

Currently, this feature is reserved for future enhancements.

Version Compatibility

The version field indicates which version of b5 created the file:

"version": "0.1.2"

Files created with newer versions of b5 may not be fully compatible with older editor versions. Always use the latest version of b5 for best compatibility.

Working with Example Files

b5 comes with several example .b5.json files:

example1.b5.json - Bounce Ball demonstration
example2.b5.json - PoseNet machine learning example
example3.b5.json - Additional creative coding examples
example4.b5.json - More advanced techniques

Loading Examples

Click the Files icon (📁) at the top left corner of the editor to load random example files with detailed comments.

Advanced: Manual Editing

Since .b5.json files are plain text, you can edit them manually:

Open in Text Editor

Use any text editor to open the .b5.json file.

Make Changes

Edit block properties, connections, or inline data carefully.

Validate JSON

Ensure the JSON is valid before saving (use a JSON validator).

Load in b5

Drag the modified file back into b5 to see your changes.

Manual editing can easily break your project if the structure is not maintained correctly. Always keep a backup before manually editing .b5.json files.

Best Practices

Save Frequently: Use Cmd+S / Ctrl+S regularly to avoid losing work
Organize Files: Use descriptive filenames when renaming downloaded files
Version Control: Keep multiple versions as you develop (e.g., project-v1.b5.json, project-v2.b5.json)
Backup Important Work: Store copies in multiple locations
Test After Loading: Verify your project works correctly after loading

The .b5.json format makes sharing easy:

Save your project
Share the .b5.json file via email, cloud storage, or GitHub
Recipients can drag and drop the file into their b5 editor
The project loads with all blocks, connections, and custom definitions intact

In the future, b5 will support direct project sharing through the editor interface. For now, manual file sharing is the recommended method.

Troubleshooting

File won’t load?

Check that it’s a valid .b5.json file
Ensure the JSON structure is not corrupted
Try opening in a text editor to verify contents

Missing blocks after loading?

The file may have been created with a different b5 version
Custom blocks from libraries you don’t have installed won’t appear
Check the console for error messages

Connections missing?

Wire connection coordinates may be incorrect
Blocks may have been removed that wires referenced
Try manually recreating connections in the editor

Future: b5.js Rendering

In future versions, .b5.json files will be executable by the standalone b5.js rendering engine, allowing your projects to run on any website without the full editor. Learn more: b5.js Integration

Save & Load Projects

Overview

Saving Your Project

Loading a Project

Understanding the .b5.json Format

File Structure

Playground Structure

Factory Structure

Block Anatomy

Block Properties

Wire Connection Format

Block Source Types

Original Blocks

Custom Blocks

Library Blocks

Example: Complete Project File

Line Styles

Version Compatibility

Working with Example Files

Loading Examples

Advanced: Manual Editing

Best Practices

Troubleshooting

Future: b5.js Rendering

Next Steps

b5.js Integration

Custom Variables

​Overview

​Saving Your Project

​Loading a Project

​Understanding the .b5.json Format

​File Structure

​Playground Structure

​Factory Structure

​Block Anatomy

​Block Properties

​Wire Connection Format

​Block Source Types

​Original Blocks

​Custom Blocks

​Library Blocks

​Example: Complete Project File

​Line Styles

​Version Compatibility

​Working with Example Files

​Loading Examples

​Advanced: Manual Editing

​Best Practices

​Sharing Projects

​Troubleshooting

​Future: b5.js Rendering

​Next Steps

b5.js Integration

Custom Variables

Overview

Saving Your Project

Loading a Project

Understanding the .b5.json Format

File Structure

Playground Structure

Factory Structure

Block Anatomy

Block Properties

Wire Connection Format

Block Source Types

Original Blocks

Custom Blocks

Library Blocks

Example: Complete Project File

Line Styles

Version Compatibility

Working with Example Files

Loading Examples

Advanced: Manual Editing

Best Practices

Sharing Projects

Troubleshooting

Future: b5.js Rendering

Next Steps