Shadowgraph
TrendingBuzzTop stargazers
Chrome extension
Sign in

cztomsik/graffiti

HTML/CSS engine for node.js and deno.

Zig

933

1,221 commits

updated Nov 8, 2023

tomsik.cz/graffiti

See the code

See what people are saying

SourceMessageScoreDate

For lightweight alternatives to Electron.js (apart from Tauri), have a look at: - Sciter (https://sciter.com) - Yue (https://libyue.com) - Wails (https://wails.io) - Muon (https://github.com/ImVexed/muon) and Ultralight (https://ultralig.ht) - Gluon (https://gluonjs.org) - NeutralinoJS…

on This year in Servo: over 1000 pull requests and beyond

0

Dec 18, 2023

README

graffiti (prealpha MVP)

HTML/CSS engine for node.js and deno.

Currently, it is just my hobby/research project and it's not yet intended for any use.

Discord | Quickstart repo

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'
  }
}

Current scope

  • single-window, single-thread, single-script (global document), nodejs-only (N-API)
  • subset of DOM needed by major JS frameworks (preact-only for now)
  • subset of CSS and CSSOM for CSS-in-JS (goober-only for now)
  • block/flexbox layout (no floats)
  • no index.html, no runtime behavior (no <script>, no <link>, ...)
  • no HMR, no live-reload (but nodemon works)
  • publish to npm (until then, you can npm i github:cztomsik/graffiti)
  • and even then, it will be just a toy

Goals & philosophy

  • simplicity > number of features
  • support "reasonable subset" of DOM/CSS so we don't need to learn anything new
  • fit nicely into the existing node.js ecosystem (lib is better than framework)
  • it has to be fun (for me, sorry)

Hacking

To work on the project, you will need recent Zig (0.11.0-dev.3731+c6e2e1ae4) and system-installed GLFW3.3 with headers (brew install pkg-config glfw).

git clone ...
cd ...
git submodule init
git submodule update
npm i
zig build
node examples/hello.js

License

The code in this repository is licensed under the MIT license, except for the HTML parser in lib/core/htmlparser.js which is based on the work of John Resig (MIT), Juriy "kangax" Zaytsev (MIT) and Erik Arvidsson (MPL).

You are also bound by the licenses of all the transitive dependencies:

Contributing

If you are interested in contributing, please join the Discord channel to discuss your ideas before submitting a pull request. Unexpected merge requests are likely to be rejected.

Thank you for your interest :)

Significant stargazers

(top 24 of 28)

Maciej Hirsz

456 followers · starred Dec 2018

Adam Perry

575 followers · starred Oct 2018

Jakub Konka

914 followers · starred Jan 2023

waddlesplash

173 followers · starred Apr 2020

Similar repos

tchayen/red-otter

Self-contained WebGL flexbox layout engine

286

dioxuslabs/blitz

A radically modular HTML/CSS rendering engine

4,279

marko-js/marko

A declarative, HTML-based language that makes building web apps fun

14,456

wavesoft/dot-dom

.dom is a tiny (512 byte) template engine that uses virtual DOM and some of react principles

807

rolandbrake/Redium

A small, declarative, JavaScript-first UI library for building reactive interfaces with TypeScript

2

CanadaHonk/shadow

Shadow is a new novel web engine made (almost) entirely in JS from scratch

341

nodecg/nodecg

Create broadcast graphics using Node.js and a browser

1,307

18alantom/strawberry

Zero-dependency, build-free framework for the artisanal web.

686

cztomsik/graffiti

HTML/CSS engine for node.js and deno.

Zig

933

1,221 commits

updated Nov 8, 2023

tomsik.cz/graffiti

See the code

See what people are saying

SourceMessageScoreDate

For lightweight alternatives to Electron.js (apart from Tauri), have a look at: - Sciter (https://sciter.com) - Yue (https://libyue.com) - Wails (https://wails.io) - Muon (https://github.com/ImVexed/muon) and Ultralight (https://ultralig.ht) - Gluon (https://gluonjs.org) - NeutralinoJS…

on This year in Servo: over 1000 pull requests and beyond

0

Dec 18, 2023

README

graffiti (prealpha MVP)

HTML/CSS engine for node.js and deno.

Currently, it is just my hobby/research project and it's not yet intended for any use.

Discord | Quickstart repo

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'
  }
}

Current scope

  • single-window, single-thread, single-script (global document), nodejs-only (N-API)
  • subset of DOM needed by major JS frameworks (preact-only for now)
  • subset of CSS and CSSOM for CSS-in-JS (goober-only for now)
  • block/flexbox layout (no floats)
  • no index.html, no runtime behavior (no <script>, no <link>, ...)
  • no HMR, no live-reload (but nodemon works)
  • publish to npm (until then, you can npm i github:cztomsik/graffiti)
  • and even then, it will be just a toy

Goals & philosophy

  • simplicity > number of features
  • support "reasonable subset" of DOM/CSS so we don't need to learn anything new
  • fit nicely into the existing node.js ecosystem (lib is better than framework)
  • it has to be fun (for me, sorry)

Hacking

To work on the project, you will need recent Zig (0.11.0-dev.3731+c6e2e1ae4) and system-installed GLFW3.3 with headers (brew install pkg-config glfw).

git clone ...
cd ...
git submodule init
git submodule update
npm i
zig build
node examples/hello.js

License

The code in this repository is licensed under the MIT license, except for the HTML parser in lib/core/htmlparser.js which is based on the work of John Resig (MIT), Juriy "kangax" Zaytsev (MIT) and Erik Arvidsson (MPL).

You are also bound by the licenses of all the transitive dependencies:

Contributing

If you are interested in contributing, please join the Discord channel to discuss your ideas before submitting a pull request. Unexpected merge requests are likely to be rejected.

Thank you for your interest :)

Significant stargazers

(top 24 of 28)

Maciej Hirsz

456 followers · starred Dec 2018

Adam Perry

575 followers · starred Oct 2018

Jakub Konka

914 followers · starred Jan 2023

waddlesplash

173 followers · starred Apr 2020

Similar repos

tchayen/red-otter

Self-contained WebGL flexbox layout engine

286

dioxuslabs/blitz

A radically modular HTML/CSS rendering engine

4,279

marko-js/marko

A declarative, HTML-based language that makes building web apps fun

14,456

wavesoft/dot-dom

.dom is a tiny (512 byte) template engine that uses virtual DOM and some of react principles

807

rolandbrake/Redium

A small, declarative, JavaScript-first UI library for building reactive interfaces with TypeScript

2

CanadaHonk/shadow

Shadow is a new novel web engine made (almost) entirely in JS from scratch

341

nodecg/nodecg

Create broadcast graphics using Node.js and a browser

1,307

18alantom/strawberry

Zero-dependency, build-free framework for the artisanal web.

686