Save and load
Stay organized with collections
Save and categorize content based on your preferences.
Page Summary
Serialization saves your workspace state to be loaded later by converting data into a text-based format.
JSON is the recommended format for serializing your workspace.
You can save your workspace state using Blockly.serialization.workspaces.save().
You can load saved workspace state using Blockly.serialization.workspaces.load().
Serialization is saving the state of your workspace so that it can be loaded
back into the workspace later. You convert all of the data you need to save into
a text-based format for easy storage.
The following code snippet shows how to convert the state of your workspace to
JSON for saving:
// Serialize the state.conststate=Blockly.serialization.workspaces.save(myWorkspace);// Then you save the state, e.g. to local storage.localStorage.setItem('workspace-state',state);
Load
The following code snippet shows how to load some saved state into a workspace:
// Get your saved state from somewhere, e.g. local storage.conststate=localStorage.getItem('workspace-state');// Deserialize the state.Blockly.serialization.workspaces.load(state,myWorkspace);
This creates all of your saved blocks, variables, and other elements in the
workspace.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-03-10 UTC."],[],["Serialization saves workspace states for later loading by converting data into a text-based format, preferably JSON. To save, use `Blockly.serialization.workspaces.save(myWorkspace)` to get the state, then store it (e.g., in local storage). To load, retrieve the saved state and use `Blockly.serialization.workspaces.load(state, myWorkspace)` to recreate blocks, variables, and other elements in the workspace.\n"]]