Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paperclip-ui/paperclip/
A UI builder for styled components and design systems
https://github.com/paperclip-ui/paperclip/
app-builder bui css drag-and-drop editor low-code low-code-development-platform low-code-framework no-code no-code-platform react rust self-hosted site-builder web-development-tools
Last synced: about 2 months ago
JSON representation
A UI builder for styled components and design systems
- Host: GitHub
- URL: https://github.com/paperclip-ui/paperclip/
- Owner: paperclip-ui
- Created: 2022-03-23T18:12:58.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-01T23:03:24.000Z (6 months ago)
- Last Synced: 2024-05-14T01:08:15.889Z (4 months ago)
- Topics: app-builder, bui, css, drag-and-drop, editor, low-code, low-code-development-platform, low-code-framework, no-code, no-code-platform, react, rust, self-hosted, site-builder, web-development-tools
- Language: Rust
- Homepage:
- Size: 344 MB
- Stars: 65
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-js-tooling-not-in-js - Paperclip - Presentational component compiler in Rust + WASM. (Compilers)
README
> Join the [Discord channel](https://discord.gg/H6wEVtd) for the latest updates!
```
npx paperclip designer --open
```
### Paperclip is a UI builder for creating **styled components** visually.
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.
### 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](https://github.com/paperclip-ui/paperclip/releases)
### File format
Paperclip emits plain-text design files. Here's an example of of one:
```javascript
// 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:
```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:
```tsx
export const Button = ({ children }) => (
{children}
);
```
### 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`**
```typescript
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! 🎉