A UI builder for styled components and design systems
Join the Discord channel for the latest updates!
npx paperclip designer --open
https://github.com/paperclip-ui/paperclip/assets/757408/429b22e0-41d6-4621-8b6e-613c1686cdda
Paperclip compliments your existing codebase by covering just the visual aspect - HTML and CSS. UIs created in Paperclip are compiled straight to code, and can be imported like any ordinary module. You may use Paperclip with existing CSS frameworks like Tailwind. If you want, you may even be able to load these CSS frameworks into the Paperclip designer so that you can build with these CSS frameworks visually.
Paperclip emits plain-text design files. Here's an example of of one:
// You may define individual tokens to be re-used
public token fontFamily Inter
public token background01 #333
public token background02 #555
public token fontColor #333
// You may also define groups of styles
public style defaultFont {
font-family: var(fontFamily)
color: var(fontColor)
}
// re-usable chunk of HTML and CSS
public component Button {
variant hover trigger {
":hover"
}
render button {
style extends defaultFont {
background: var(background01)
}
style variant hover {
background: var(background02)
}
slot children
}
}
This can compile to vanilla HTML and CSS, as well any supported target framework or language of your choosing. Here's an example of how the example above might be compiled to CSS:
:root {
--fontFamily: Inter
--background01: #333
--background02: #333
--fontColor: #333
}
.Button {
font-family: var(--fontFamily)
color: var(--fontColor)
background: var(--background01)
}
.Button:hover {
background: var(--background02)
}
And here's how the file might be compiled to React code:
export const Button = ({ children }) => (
<button className="Button">{children}</button>
);
npx paperclip init
This will create a paperclip.config.json
file for you.
src/hello.pc
public component Hello {
render div {
style {
color: red
}
slot children
}
}
npx paperclip build
This will compile your *.pc
files into code that you can import
directly into your app.
And that's it! 🎉