Synchronize data

Share state between multiple clients. As soon as a change is made on one client it is shared with all other clients instantly and efficiently.


  import { syncedState, useValue } from '@visly/state' 

  const appState = syncedState({ cursors: [] }) 

  function Cursors() { 
    const cursors = useValue(appState, s => s.cursors) 
    return cursors.map(c => ( 
      <Cursor location={c.location} color={c.color} /> 
    )) 
  }

Click here to open a new tab

Share logic

Visly State is built to be used on both the server and client. This makes sharing business logic, data validation, and tests trivial.


  import { syncedState } from '@visly/state'
  
  export const appState = syncedState({ cursors: [] })

  export const mutations = {
    moveCursor: (state, id, location) => {
      const cursor = state.cursors.find(c => c.id === id)
      if (!cursor) return
      cursor.location = location
    }
  }

Click here to open a new tab

Time travel

Being able to quickly undo & redo operations is a key feature in any modern app. Visly State manages this for you simply and efficiently.


  import { undo, redo, useMutation } from '@visly/state'

  function Component() {
    const increment = useMutation(appState, s => s.count++)
    
    return [
      <button onClick={increment}>Increment</button>,
      <button onClick={() => undo(appState)}>Undo</button>,
      <button onClick={() => redo(appState)}>Redo</button>
    ]
  }

Click here to open a new tab

Improve performance

React performance is all about minimizing renders. Visly State keeps track of which components use what data and only re-renders the components it needs.


  import { useValue } from '@visly/state'

  function Cursor(props) {
    // Only re-render when this specific cursor
    // has a new value, not when any cursor moves
    const cursor = useValue(appState, s => {
      return s.cursors.find(c => c.id === props.id)
    })

    return <Pointer position={cursor.location} />
  }

Click here to open a new tab

View on GitHub