Re-importing a library

Tostada's importLibrary / exportLibrary pair lets you move a full library out of one browser and into another. Use it to back up your work, move to a different machine, or share a starting library with a teammate.

No UI yet. The store actions exist; the Settings page UI to call them ships in a later iteration. For now you call them from the browser devtools.

The library JSON

A different file from design-system.json. The library JSON contains everything Tostada needs to fully reconstruct your editing state:

interface LibraryExport {
  name: string
  tokens: Record<string, DesignToken>
  principles: LayoutPrinciple[]
  designRules: DesignRules
  componentRules: Record<string, ComponentRules>
  history: HistoryEntry[]   // persisted change log (max 500 entries)
}

It's a superset of design-system.json:

• design-system.json is the exported design system (no history, no internal layout)
• the library JSON is the editor state (everything, including history)

Exporting from the browser

In the main app, open devtools and run:

const json = window.__tostadaStore.getState().exportLibrary()
// Save to a file:
const blob = new Blob([json], { type: 'application/json' })
const url = URL.createObjectURL(blob)
Object.assign(document.createElement('a'), { href: url, download: 'tostada-library.json' }).click()

The exact accessor (window.__tostadaStore) is a development convenience; check the current code if it doesn't exist. The function in the store is exportLibrary() in src/store/index.ts.

Importing into a fresh browser

const json = '…paste the file contents…'
window.__tostadaStore.getState().importLibrary(json)

Importing:

• Merges with seeded defaults. If Tostada has added newly-seeded tokens or principles since your export, those are merged in so you don't end up missing them.
• Resets undo/redo. The past and future stacks are cleared; the imported state becomes the new baseline.
• Preserves history. The persisted change log comes along — useful for auditing edits across machine moves.

When this is the right workflow

• Backups — Tostada is localStorage-only. Browser data loss = library loss. Export periodically.
• New machine — copy the file, import on the new machine.
• Team starter — one person authors a base library, exports the JSON, shares it as tostada-starter.json; teammates import to skip the initial setup.
• Multi-library — not yet supported; today a re-import replaces the active library entirely.

When this is NOT the right workflow

• Shipping the design system to your app — that's tokens.css and design-system.md. Library JSON is only for moving Tostada editor state.
• AI context — feed design-system.md, not the library JSON. The library JSON includes internal layout that adds noise without value.