Skip to content

feat: Add "Save Locally" button to persist editor state across page reloadsΒ #765

@hemantch01

Description

@hemantch01

Feature Request πŸ›οΈ

Add a "Save Locally" button so users can save their playground work to the browser and get it back later.

Use Case

Right now, if a user is editing a template, model, or data in the playground and accidentally refreshes the page (or closes the tab), all their work is gone. The playground always resets to the default sample on every load. Users need a way to save their progress so they can pick up right where they left off.

Possible Solution

Add a "Save Locally" button next to the existing "Load Sample" dropdown. When clicked, it saves the current state of all three editors (TemplateMark, Concerto Model, and JSON Data) into the browser's local storage. The next time the user opens or reloads the playground, the saved state is automatically loaded instead of the default sample. If a shared link is present in the URL, it still takes priority over the saved state.

Context

The playground is meant for experimentation and learning. Losing all edits on every page reload is frustrating, especially when users are working on complex templates or following along with the learning modules. Most modern browser-based playgrounds (like the TypeScript Playground) already offer this kind of persistence. Adding it here would make the Accord Project Playground feel more polished and user-friendly.

Detailed Description

The feature works in a simple flow:

  1. User edits any content in the template, model, or data editors.
  2. User clicks "Save Locally" β†’ the current content of all editors is saved to the browser's local storage, and a success message is shown.
  3. User reloads the page β†’ the playground detects saved data in local storage and restores it into the editors automatically.
  4. If no saved data exists, the playground loads the default sample as usual.
  5. If the user opens a shared link, the link data takes priority over any locally saved state.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions