State Designer

State Designer is a state management library for JavaScript and TypeScript.

As the name suggests, the library treats state as a design problem. If you’re not exactly sure how the state of a user interface should work, then State Designer can help you figure it out.

Watch a Video and see the library in action
Explore examples in React and TypeScript.
Learn more about what it means to design for state.

PREVIEW

CODEfunction Counter() {
  const state = useStateDesigner({
    data: { count: 0 },
    initial: 'stopped',
    states: {
      stopped: {
        on: { TOGGLED: { to: 'running' } },
      },
      running: {
        on: { TOGGLED: { to: 'stopped' } },
        repeat: {
          onRepeat: 'incrementCount',
          delay: 0.2,
        },
      },
    },
    actions: {
      incrementCount(data) {
        data.count++
      },
    },
  })

  return (
    <Grid columns="auto 1fr">
      <Button onClick={() => state.send('TOGGLED')}>
        {state.whenIn({
          running: 'Stop',
          stopped: 'Start',
        })}
      </Button>
      <Heading as="h1">{state.data.count}</Heading>
    </Grid>
  )
}
function Counter() {
  const state = useStateDesigner({
    data: { count: 0 },
    initial: 'stopped',
    states: {
      stopped: {
        on: { TOGGLED: { to: 'running' } },
      },
      running: {
        on: { TOGGLED: { to: 'stopped' } },
        repeat: {
          onRepeat: 'incrementCount',
          delay: 0.2,
        },
      },
    },
    actions: {
      incrementCount(data) {
        data.count++
      },
    },
  })

  return (
    <Grid columns="auto 1fr">
      <Button onClick={() => state.send('TOGGLED')}>
        {state.whenIn({
          running: 'Stop',
          stopped: 'Start',
        })}
      </Button>
      <Heading as="h1">{state.data.count}</Heading>
    </Grid>
  )
}

Packages

Starters

Usage

Your exact usage will depend on your framework:

-Usage in JavaScript - Core library.

Usage in React - React hook.

Examples

Inspiration

State Designer is heavily inspired by xstate. Note that, unlike xstate, State Designer does not adhere to the scxml spec.

Author

Steve Ruiz

License

MIT