Playground
  • Introduction
  • Components

Shareability

The extent to which system state can be captured, transmitted, and reliably reconstructed through links, enabling users to communicate precise application contexts to others.

Principle

A shareable link preserves the complete user experience—returning any user to the same view, configuration, and content. This honours the basic web architecture where URLs serve as both addresses and state descriptors, ensuring that refreshing, bookmarking, or sharing a link maintains context rather than losing it.

Shareability transforms applications from ephemeral, session-bound experiences into persistent, communicable states. When users can share exactly what they see, interfaces become more transparent, collaborative, and trustworthy.

URL as state container

URLs provide native, universal state management through three mechanisms:

Path segments

Hierarchical navigation and resource identification:

/projects/42/tasks/18
/users/alice/settings

Best for: entity relationships, navigational structure, semantic hierarchy.

Query parameters

Configuration, filters, and non-hierarchical state:

?view=grid&sort=date&status=active&page=3
?theme=dark&density=comfortable

Best for: view preferences, filters, sorting, pagination, search queries, feature flags.

Fragments

Client-side navigation, scroll positions, and element targeting:

#section-3
#L42-L58
#canvas-x=1240&y=680&zoom=2.5

Best for: in-page positions, highlighted ranges, canvas coordinates, selected elements.

Navigation context vs destination

When content exists in multiple locations or is reachable through multiple paths, shareability faces a key choice: should URLs encode the destination alone, or preserve the navigation context that led there?

Destination-only addressing

URLs identify content regardless of how users arrived:

/documents/42

Advantages: Clean URLs, unambiguous addressing, stable references Limitations: Loses spatial context, navigation history, and relationship to surrounding content

Path-preserving addressing

URLs capture the route taken to reach content:

/projects/alpha/documents/42
/teams/design/documents/42

When the same content appears in multiple contexts (linked cards, symmetric references, spatial canvases), the path becomes meaningful state. Users may need to know not just what they’re viewing, but how they got there.

Navigation stack restoration

Complex applications may need to restore entire navigation histories:

/projects/alpha/teams/design/documents/42

This enables “back” navigation and preserves hierarchical context, but creates longer URLs and couples shareability to navigation implementation.

Trade-offs

  • Addressability simplicity vs context preservation
  • URL stability vs relationship visibility
  • Unique references vs multiple valid paths

Choose based on whether spatial or temporal context materially affects content meaning. Document viewers benefit from destination-only addressing; spatial canvases and relationship-rich environments often require path preservation.

What to share

Appropriate candidates

State that enhances collaboration, reference, and reproducibility:

  • Search and filters — preserve query context for shared discovery
  • View configuration — layout mode (grid/list), density, grouping
  • Sort and pagination — maintain position within large datasets
  • Feature toggles — experimental or accessibility settings
  • Canvas state — zoom, pan, selected elements (design tools, maps)
  • Highlighting and selection — specific content ranges or annotations
  • Navigation history — preserve spatial/temporal context when path to content is meaningful
  • Reference paths — capture route through relationship graphs or linked structures

Poor candidates

State that compromises security, performance, or user experience:

  • Sensitive data — passwords, tokens, personal identifiers
  • Temporary UI states — modal visibility, dropdown expansion, hover states
  • Unsaved input — draft content, incomplete forms
  • High-frequency transient data — mouse position, animation frames
  • Session-specific state — authentication status, temporary permissions

Resources & references

  • Alfy (2025) Your URL is your state
  • W3C History API specification
  • Nielsen (1999) Deep Linking is Good Linking