Join the Discord channel for the latest updates!

yarn add @paperclip-ui/cli -D && yarn paperclip designer --open

quick-demo.mp4

---

• Documentation
  • Syntax - Info about the DSL
  • Integration - Integrating Paperclip into your app
• Examples
  • Paperclip Designer

---

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