A React state management library that extends to your server.
View on GitHubSynchronize 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} />
))
}
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
}
}
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 => c.id === props.id)
})
return <Pointer position={cursor.location} />
}