Skip to content

paperclip-ui/paperclip

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
November 26, 2023 21:11
November 28, 2023 17:32
May 9, 2022 22:31
September 26, 2022 16:23
December 20, 2022 10:29
September 14, 2022 00:28
September 8, 2023 08:45
December 8, 2023 13:34
December 8, 2023 13:34
September 5, 2023 09:25
September 25, 2022 20:17
December 3, 2022 19:12
September 14, 2022 12:08
May 6, 2022 20:07
November 26, 2023 09:50
November 26, 2023 13:29
September 8, 2023 08:33
November 29, 2023 14:49
December 8, 2023 13:34
December 20, 2022 10:30
September 4, 2023 07:33
September 26, 2022 14:20
November 25, 2023 12:36
December 8, 2023 13:34

Join the Discord channel for the latest updates!

yarn add @paperclip-ui/cli -D && yarn paperclip designer --open
quick-demo.mp4


Paperclip is a visual programming language that offers a hybrid approach for creating web apps. It comes with a UI builder that you can use to visually create UIs, and a readable file format that you can easily edit by hand.

Paperclip aims to lower the barrier for building UIs and create an inviting user experience for everyone that wants to contribute to building web applications. It was initially designed for product teams in the hopes of bridging the gap between development teams and all other key stakeholders (designers, marketers, copywriters, PMs, etc.). With Paperclip, the hope is that other team members feel empowered to build UIs, prototype, make tweaks, giving engineers more freedom to focus on some of the harder and more mission critical parts of the application such as business logic.

Paperclip is not a replacement for hand-written code. It's my belief that code is not a problem, but incidental complexity around tooling is. I.e: it's a design problem. Paperclip is an attempt to reduce some of the incidental complexity, specifically around HTML and CSS development. So, think of Paperclip as a designer for primitive components, and a replacement for libraries like Emotion or Styled Components.

Import Paperclip files like any other module

Paperclip is complimentary to your existing codebase. Just use one of the built-in compilers to convert *.pc files in your framework or language of choice, and import them like normal code. Here's an example:

import { TodoItem } from "./todo-item.pc";
<TodoItem />;

*.pc are even strongly typed too in case you're working with something like TypeScript, or another strongly typed language.

The DSL

The DSL can be thought of like a design file. It's in a DSL format because I believe that it makes it easier for things like version control, code reviewing, and other QA stuff. That and sometimes it's just nicer to write UIs by hand.

Design-wise, the DSL hopes to remove some of the gotchas around HTML and CSS (e.g: selectors, globals, style collisions) by introducing different syntax for styling elements. The DSL is also a reflection of an ideal user experience similar to Figma and other design tools, hoping to create an inviting and intuitive experience for people who are mostly living in those spaces.

Here's an example of what a *.pc looks like:

public component Card {

  // Variant fo the component that can be _triggered_
  // by a CSS selector or media query
  variant dark trigger {
    ".dark"
  }
  render div (class: class) {

    // styles are added directly on the element being styled
    style {
      font-family: sans-serif
      color: black
    }

    // You may attach variants to any element within
    // this component
    style variant dark {
      background: black
      color: white
    }
  }
}

Should I use Paperclip right now?

Are you working on an experiment or side-project? Sure! Give it a whirl! I'd love to hear what you think. All feedback is welcome! Though, I wouldn't recommend using Paperclip right now for mission critial pieces of software since it's still very alpha, and very buggy.

Roadmap

  • More design tooling
    • canvas tooling
    • potentially custom components
    • bringing UX closer to Figma for a more inviting user experience
  • Online designer
    • multi-player editing too!
  • AI assistance
  • Figma integration
    • ability to copy + paste designs to Paperclip
    • ability to keep designs in sync