Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cztomsik/graffiti
HTML/CSS engine for node.js and deno.
https://github.com/cztomsik/graffiti
Last synced: about 1 month ago
JSON representation
HTML/CSS engine for node.js and deno.
- Host: GitHub
- URL: https://github.com/cztomsik/graffiti
- Owner: cztomsik
- License: mit
- Created: 2018-10-22T16:30:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-08T17:06:06.000Z (about 1 year ago)
- Last Synced: 2024-05-18T18:32:37.987Z (7 months ago)
- Language: Zig
- Homepage: http://tomsik.cz/graffiti
- Size: 4.5 MB
- Stars: 938
- Watchers: 17
- Forks: 18
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - graffiti
- awesome-electron-alternatives - Graffiti
- awesome-desktop-js - graffiti - build desktop apps with react-native API, render them on GPU using [Servo WebRender](https://github.com/servo/webrender) (Linux, macOS, and Windows) (GUI Frameworks / Web)
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](https://discord.gg/zQwyzFb)
| [Quickstart repo](https://github.com/cztomsik/hello-graffiti/)
---
```javascript
const Counter = () => {
const [count, setCount] = React.useState(0)
const dec = () => setCount(count - 1)
const inc = () => setCount(count + 1)
return (
{count}
--
++
)
}
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 ``, 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](https://www.cmyr.net/blog/gui-framework-ingredients.html)
## 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:
- [Zig](https://ziglang.org/) (MIT)
- [GLFW](https://www.glfw.org/) (ZLIB)
- [nanovg-zig](https://github.com/fabioarnold/nanovg-zig) (ZLIB)
- [nanovg](https://github.com/memononen/nanovg) (ZLIB)
- [fontstash](https://github.com/memononen/fontstash) (ZLIB)
- [stb_truetype](https://github.com/nothings/stb) (MIT)
- Roboto font (Apache 2.0)
## 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 :)