arroui / paperclip

A UI builder for styled components and design systems

Join the Discord channel for the latest updates!

npx paperclip designer --open

Paperclip is a UI builder for creating styled components visually.

quick-demo.mp4

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.

Project goals + highlights

• Languange + framework agnostic
• Provide a scalable way of styling with CSS without the cascading part
• No runtime. PC files are compiled to static HTML and CSS.
• Make it easier for anyone to build UIs
• No dependencies! Just download one of the releases to run Paperclip

File format

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>
);

Getting Started

1. run this command in your project directory:

npx paperclip init

This will create a paperclip.config.json file for you.

2. Copy the following contents to src/hello.pc

public component Hello {
  render div {
    style {
      color: red
    }
    slot children
  }
}

3. Run npx paperclip build

This will compile your *.pc files into code that you can import directly into your app.

And that's it! 🎉