phy-stitches

phy-stitches

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!

Starters

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

Examples

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!'));
};

License

phy-stitches is a fork of phy which is under BSD-3-Clause license.