Your Docusaurus site did not load properly.

A very common reason is a wrong site baseUrl configuration.

Current configured baseUrl = / (default value)

We suggest trying baseUrl =

Paperclip
Build web UIs at the speed of thought.
Paperclip is a free and open source tool that allows you to visually build presentational components for React, all within your existing IDE.
Build UIs more quickly, and precisely
With Paperclip, you see what you're creating as you're typing, no matter how large your project is. Other features such as artboards, measuring tools, and responsive testing tools are there to help you build pixel-perfect UIs in no-time. Your designers will love you. ❤️
Just covers presentational components
Paperclip focuses purely on your application's appearance using a syntax similar to HTML & CSS. CSS is also scoped so you don't have to worry about it leaking out.
<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 your React app
Paperclip files compile down to regular, performant code that you can import directly into your React app.
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>;
}
Keeps CSS maintainable
Paperclip comes with loads of safety features such as scoped styles, and visual regression testing, to ensure that your HTML & CSS is maintainable as your project grows.
Live previews
Conveniently build UIs live alongside your code editor and see your changes appear immediately as you're typing, no matter how large your project is.
Just like CSS-in-JS
Paperclip works just like other CSS-in-JS libraries such as Emotion, and Styled Components. If you don't like Paperclip, you can easily switch back.
Pairs well with existing CSS
Paperclip enhances your existing CSS by keeping it scoped, so you have absolute control over how it's used in your app, and never have to worry about styles leaking out.
<import src="./tailwind.css" inject-styles />
<!--
@frame { width: 768, height: 768, x: 0, y: 0 }
-->
<div class="font-sans bg-gray-500 h-screen w-screen">
<div class="bg-gray-100 rounded-lg p-8 md:p-0">
<div class="pt-6 text-center space-y-4">
<blockquote>
<p class="text-lg font-semibold">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-blue-600">
sit voluptatem
</div>
</figcaption>
</div>
</div>
</div>
Everything in one spot
Use the birds-eye view to see all of your components, and find exactly what you're looking for.
Cross-browser testing made easy
Launch any browser you want directly from Paperclip to catch those elusive CSS bugs more quickly.
Easy visual regression test setup
Paperclip comes with visual regression tooling that takes less than 10 minutes to setup and gives you nearly 100% visual regression coverage, so you can feel confident about making big style changes in your application without breaking production.
Paperclip is currently in closed beta, but sign up if you're interested and we'll reach out soon!
Sign up for early access