Spend less time tweaking CSS.
Paperclip is a language for UI primitives that allows you to build React applications more quickly, and with fewer CSS bugs.
Use familiar syntax
Paperclip uses familiar syntax for creating UI primitives. See your changes in realtime using the VS Code extension.
<ol export component as="List">
<style>
padding-left: 1em;
font-family: Open Sans;
</style>
{children}
</ol>
<li export component as="ListItem">
<style>
margin-top: 6px;
</style>
{children}
</li>
<!--
Preview
-->
<List>
<ListItem>Bagels 🥯</ListItem>
<ListItem>Yakitori 🍢</ListItem>
<ListItem>Tofurky 🦃</ListItem>
<ListItem>Skittles 🌈</ListItem>
</List>
Import directly into React code
Paperclip compiles the UIs into plan code that you can import directly in your React app. No runtimes needed.
import * as styles from "./styles.pc";
function GroceryList() {
const groceries = [
"Milk 🥛",
"Water 💧",
"Taco seasoning 🌮"
];
return <styles.List>
{
groceries.map(item => (
<styles.ListItem>{item}</styles.ListItem>;
))
}
</styles.List>;
}
Isolated styles
Styles are only applied to the documents they're defined in, so you don't have to worry about them leaking out.
TypeScript integration
Paperclip UIs compile to strongly typed code, so you can feel more confident that UI changes won't break anything.
Pays back the more you use it
Every Paperclip file is automatically covered by visual regression tests, so the more you use Paperclip, the more test coverage you'll have against CSS bugs.
Realtime previews in VS Code
The VS Code extension comes with realtime previews, so you can iterate faster on your UIs, and free up more time to work on other parts of your codebase that matter.
View the extension
Never miss a CSS Bug
Use the visual regression tool to catch every UI state. No more worrying about breaking CSS changes. 🎉
View the API