Skip to content
Rapid GUI development using familiar technologies (javascript, flexbox, css)
Branch: master
Clone or download
cztomsik basic text input (#97)
basic text input
Latest commit 381fb8d Apr 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs fix docs Apr 21, 2019
example examples housekeeping Apr 1, 2019
examples basic text input Apr 22, 2019
native-new
src add support for backspace Apr 23, 2019
.editorconfig editorconfig, tsconfig Oct 30, 2018
.gitignore ffi + tscodegen Feb 14, 2019
.gitmodules webrender submodule -> cargo git dependency Nov 27, 2018
.prettierrc initial implementation of flat-list Dec 24, 2018
CONTRIBUTING.md add more docs Jan 12, 2019
Gemfile add gemfile so we can preview docs Jan 11, 2019
Gemfile.lock add gemfile so we can preview docs Jan 11, 2019
LICENSE add LICENSE Dec 9, 2018
README.md - merge textshaper & textmeasurer Apr 11, 2019
_config.yml add discord link Apr 21, 2019
package-lock.json update deps Apr 21, 2019
package.json update deps Apr 21, 2019
tsconfig.json refactor js part; create only one pango context Mar 9, 2019

README.md

title permalink
Home
/

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

You can’t perform that action at this time.