stain

Rapid GUI development using familiar technologies (javascript, flexbox, css)


const App = () => {
  const [count, setCount] = useState(0)
  const dec = () => setCount(count - 1)
  const inc = () => setCount(count + 1)

  return (
    <View style={styles.counter}>
      <Text>{count}</Text>

      <View style={[styles.bar, { width: count * 5 }]} />

      <View style={styles.buttons}>
        <Button title="--" onPress={dec} />
        <Button title="++" onPress={inc} />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  counter: {
    flex: 1,
    padding: 20,
    justifyContent: 'space-between'
  },

  bar: {
    backgroundColor: '#ff0000',
    height: 20
  },

  buttons: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
})

Status

Please note that we are still finishing major rewrite which started almost 2 months ago (yeah, I know but it was really needed) so some features which has been there originally are now missing, and docs are off (a lot). That said, we've also gained some other cool features along the way (text-align, images, shadow). As with other hobby projects, there are no ETAs, but it's very close now. Follow me on my twitter to get notified :-)

Why it's interesting

  • quick to setup, apart from rust & few libs, it should be just one npm install away
  • can be combined with most of the libraries you already know (react, mobx, lodash, ...)
  • works with existing tooling (debug in vscode, profile in chrome devtools, react-devtools, ...)
  • hot-reload works even without webpack (and it's faster)
  • bundle can be made using already established and mature tools (ncc + electron-builder)
  • low memory footprint (when compared to electron)
  • the language & platform you already know (when compared to flutter)

We use webrender for the actual drawing, yet there is no DOM, so we can be faster and use (much) less memory. Read more here


Documentation

Please refer to respective sub-page on the project website