Skip to content
Web-like GUI toolkit for node.js with minimal overhead. Lightweight, GPU-rendered alternative to electron.
Rust TypeScript Ruby JavaScript
Branch: master
Clone or download
Latest commit 06f2a64 Jan 3, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
examples add example browser, redo/extend some examples Dec 26, 2019
libgraffiti minor platform refactor Jan 2, 2020
src minor platform refactor Jan 2, 2020
.editorconfig WIP: basic primitive rendering Sep 2, 2019
.gitignore add example browser, redo/extend some examples Dec 26, 2019
.gitmodules
.prettierrc cleanup May 8, 2019
CONTRIBUTING.md add more docs Jan 12, 2019
Gemfile add gemfile so we can preview docs Jan 11, 2019
Gemfile.lock
LICENSE add LICENSE Dec 9, 2018
README.md minor platform refactor Jan 2, 2020
_config.yml more fixes Oct 10, 2019
build.js platform refactor Dec 29, 2019
package-lock.json add example browser, redo/extend some examples Dec 26, 2019
package.json test git submodules Dec 26, 2019
tsconfig.json random fixes to do tv-app Dec 1, 2019

README.md

title permalink
Home
/

graffiti

Experimental GUI toolkit for node.js. The idea is to implement just enough subset of DOM & styling so that you can use react & other web frameworks, including the most of the related libraries but keep it as simple as possible so it can run fluently even on cheap devices like Raspberry Pi. The trick is to render everything using GPU and to keep the scope & abstractions at minimum.

One day, it could be viable alternative to electron but you will never be able to just take an existing web app and run it with this (but it should be possible the other way around).


import * as React from 'react'
import { render } from 'react-dom'

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

  return (
    <div style={styles.counter}>
      <span>{count}</span>

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

      <div style={styles.buttons}>
        <button onClick={dec}>--</button>
        <button onClick={inc}>++</button>
      </div>
    </div>
  )
}

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

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

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

render(<Counter />, document.body)

Why it's interesting

  • quick to setup, apart from rust, 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)

Status

It's getting very close to v1 now, so stay tuned if you're looking for something like this but as with other hobby projects, there are no deadlines. Follow me on my twitter to get notified :-)

Note: I'm looking for somebody wiling to maintain windows part. It's not about just making it work (that should be easy) but rather about having some deeper knowledge of the platform and being familiar with the issues on various versions/configurations (basically, it implies you're daily windows user)


Documentation

Please refer to respective sub-page on the project website

License

This project is MIT licensed. By contributing to this project, you also agree that your contributions will be licensed under the MIT license.

You can’t perform that action at this time.