Skip to content

A UI builder for styled components and design systems

Notifications You must be signed in to change notification settings

paperclip-ui/paperclip

This branch is 17 commits ahead of, 2 commits behind master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Craig CondonCraig Condon
Craig Condon
and
Craig Condon
Apr 1, 2024
e68177b Â· Apr 1, 2024
Nov 26, 2023
Apr 1, 2024
May 10, 2022
Sep 26, 2022
Dec 20, 2022
Sep 14, 2022
Sep 8, 2023
Jan 2, 2024
Apr 1, 2024
Apr 1, 2024
Sep 5, 2023
Sep 26, 2022
Nov 27, 2023
Jan 1, 2024
May 21, 2022
Sep 14, 2022
May 7, 2022
Apr 1, 2024
Jan 16, 2024
Jan 7, 2024
Jan 14, 2024
Apr 1, 2024
Dec 20, 2022
Apr 1, 2024
Sep 26, 2022
Nov 25, 2023
Apr 1, 2024

Repository files navigation

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.

  1. Copy the following contents to src/hello.pc
public component Hello {
  render div {
    style {
      color: red
    }
    slot children
  }
}
  1. Run npx paperclip build

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

And that's it! 🎉