All-in-JS template engine for you to write everything in JavaScript. No more HTML. No more CSS. Only JavaScript!
phy-stitches depends on Emotion CSS-in-JS styling engine.
This project is a fork of phy minimal hyperscript helpers. It allows you to use minimalist h
helper function to create React/Preact elements. With phy-stitches, the css
prop gets parsed by Emotion, so you can write everything in JS!
To quickly get started with phy-stitches, feel free to clone the starters:
-
phy-stitches-next-starter
: Starter for Next.js -
phy-stitches-gatsby-starter
: Starter for Gatsby
To style an element, simply pass css
prop:
const h = require('phy-stitches');
module.exports = function SomeComponent() {
return h('#foo', h('span.bar', { css: { color: 'red' } }, 'whee!'));
};
You can create elements without any props, same as phy
.
const h = require('phy-stitches');
module.exports = function SomeComponent() {
return h('#foo', h('span.bar', 'whee!'));
};
phy-stitches
is a fork of phy
which is under BSD-3-Clause license.