Skip to main content

Paperclip Basics

You can think of Paperclip as a language that focuses purely on your web application's appearance - just covering HTML, CSS, and basic components. With that, you can construct almost all of your application UI in Paperclip. For example, here's a simple list:

Here's how you can use the template above in a React app:

import * as React from "react";
import * as styles from "./GroceryList.pc";

export function GroceryList() {

const groceries = [
"Milk 🥛",
"Water 💧",
"Taco seasoning 🌮"
];

return <styles.List>
{
groceries.map(item => (
<styles.ListItem>{item}</styles.ListItem>
))
}
</styles.List>;
}

☝🏻 Basically, all this component is doing is adding dynamic behavior to our Paperclip building blocks, and that's all there is to it between Paperclip UIs and code, really. UIs go in Paperclip, logic goes in code.