A React state management library that extends to your server.

View on GitHub

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 => ( 
      <Cursor location={c.location} color={c.color} /> 

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 => === id)
      if (!cursor) return
      cursor.location = location

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>

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 => ===

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