Description
Paperclip is a free and open source template language for presentational components that comes with a designer-like experience for rapidly building user interfaces, all within your existing IDE.
paperclip alternatives and similar libraries
Based on the "CSS / Style" category.
Alternatively, view paperclip alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐ -
classnames
A simple javascript utility for conditionally joining classNames together -
react-responsive
CSS media queries in react - for responsive design, and more. -
stitches
[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. -
aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
react-css-modules
Seamless mapping of class names to CSS modules inside of React components. -
Ultra Fast, Zero Runtime, Headless UI Components
๐ปโโ๏ธ A Headless, Utility-First, and Zero-Runtime UI Component Library โจ -
react-container-query
:package: Modular responsive component -
react-css-components
Define React presentational components with CSS -
postcss-js
PostCSS for React Inline Styles, Free Style and other CSS-in-JS -
react-look
Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools. -
inline-style-prefixer
Autoprefixer for JavaScript style objects -
stilr
Encapsulated styling for your javascript components with all the power of javascript and CSS combined. -
aesthetic
๐จ Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more! -
reactponsive
Responsive components and Hooks โ for your favorite framework โ๏ธ
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of paperclip or a related project?
README
Paperclip is a thin UI layer for web applications that aims to make UIs easier to maintain, faster to develop, and help make it easy to prevent visual bugs across different browsers and device sizes.
Paperclip can be used on its own to build static websites, or be used to expose primitive components that you can integrate into your codebase. It's designed for any language to use, and currently works with React out of the box.
Installation
Just run this command in your existing project to get started
npx @paperclip-ui/cli init
This will walk you through a brief setup process. Next, just run:
npx @paperclip-ui/cli build
Resources
- Community
- API
- Syntax - How to write Paperclip documents
- React usage - Using Paperclip UIs in your React code
- Configuration - How to configure Paperclip for your codebase
- Examples
- [Syntax / basic](./examples/syntax-basic)
- [React / basic](./examples/react-basic)
- [Tailwind](./examples/React-basic)
- Tools
- Integrations
- Guides
Goals
- In a similiar spirit as TypeScript, Paperclip aims to help provide an extra layer of safety around HTML and CSS. UI code should be predictable, easy to refactor, and bugs should be easy to spot across different browsers and screen sizes.
- To have strict control over how elements are styled, while maintaining the flexibility of CSS.
- To be generic, and compatible with just about any language, strongly or dynamically typed.
- To compile to plain code, and not require any runtime. To make UI development feel more like drawing. Developers shouldn't have to wait around for their UI code to compile, and should have more visual tooling to help visually develop their UIs.
- To eventually have enough UI tooling that would enable non-engineers to safely create UIs in tandem with developers.
Example
Here's a kitchen sink example of what a Paperclip UI looks like:
<!-- Imported CSS can be contained to a namespace that you can use throughout the document to have complete control
over what's styled -->
<import src="css-modules/tailwind.css" as="tw" />
<!-- These styles are scoped just to this document -->
<style>
* {
box-sizing: border-box;
}
</style>
<!--
You can define re-usable blocks of HTML that can be imported into your application code.
Also, notice how Tailwind is being applied just to this element.
-->
<div export component as="Message" class="$tw py-8 bg-blue-100">
<!-- Styles that are nested are scoped to the parent element. -->
<style>
/* You can set declarations directly in style blocks. This
will be applied to the parent element. */
color: magenta;
/* You can define style rules for descendents of the parent element. */
span {
color: orange;
}
</style>
<!-- This is a "slot" that allows custom children to be inserted into primitive components. -->
{children}
<span>
I'm orange!
</span>
</div>
Paperclip UIs compile directly to code that you can import into your app:
import React from "react";
import ReactDOM from "react-dom";
import { Message } from "./my-module.pc";
// this will render "Hello Paperclip! I'm orange!"
ReactDOM.render(<Message>
Hello Paperclip!
</Message>, document.body);
Currently, UIs compile to React and static HTML. More languages are planned for after Beta.
<!-- ## Features
- Scoped CSS by default, and expressive syntax that enables you to be more precise about what elements are styled. This can even be used to scope CSS frameworks.
- Generic, and designed for any language. You can use Paperclip in your existing codebase.
- Compiles to plain performant code. No runtime.
- Visual test tooling to help you track UI changes across your app.
- Code coverage tooling to help you figure out how much HTML & CSS is coverage under visual tests.
- Realtime visual development, directly within VS Code. -->
This is the designer that you can use to build UIs in realtime:
[alt visual editor](./assets/designer-screenshot.png)
Here's an example of a code coverage report that shows how much HTML and CSS is coverage for visual testing:
[alt coverage report](./assets/coverage-report.png)
Here's an example of visual tests that are performed using Percy. Paperclip also has a tool for this that you can use locally.
[alt coverage report](./assets/percy-screenshot.png)
<!-- ### Non-goals
- Logic. This is already a very well solved problem. Paperclip only covers what's necessary to integrate with an existing codebase.
- Pre-processors. Though this may be possible in the long term, Paperclip won't have pre-processors that would enable you to -->
<!--
Sponsors
-->