Giter Club home page Giter Club logo

graffiti's Introduction

title nav_order permalink
Home
1
/

graffiti

HTML/CSS engine for node.js and deno. No electron, no webkit, no servo, all from scratch.


Current status

  • not production-ready, and it probably doesn't even work currently (ETA Q1/2022)
  • DOM is "done" (in a sense of what I wanted to achieve)
  • WebView is macos only (for now)
  • react/preact/vue is working with this
  • nodejs bindings are missing, only deno is working currently
  • hit-testing is missing (again)
  • rendering is broken
  • layout is WIP (I am currently replacing yoga with custom impl)
  • CSS is working but <style> is currently not respected

Usage

# one-shot (takes forever)
npx github:cztomsik/graffiti run <file.html>

# or install locally
npm i github:cztomsik/graffiti
npx graffiti run <file.html>

# or with deno
git clone https://github.com/cztomsik/graffiti
cd graffiti
npm i
deno run -Ar --unstable --no-check lib/cli.js run http://...

Features and limitations

  • low memory footprint
  • JS libraries generally work fine (react, vue, svelte, ...)
  • <script> elements are only evaluated during page-load
  • CSS-in-JS should work fine, @import is not supported
  • flexbox only (block is emulated, inline/float is not supported at all)
  • no process isolation so it's unsafe to use it as a browser

react-calculator

hmr

hackable-tv

Dev setup

  • git clone
  • have nodejs 15.x
  • have rust in PATH
  • (linux-only) have X11 headers apt install xorg-dev
  • npm i
  • npm run build && npm run prepare && node lib/cli.js run <html-file>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.