{"id":13981094,"url":"https://github.com/paperclip-ui/paperclip","last_synced_at":"2025-07-21T21:31:12.254Z","repository":{"id":37247789,"uuid":"473306394","full_name":"paperclip-ui/paperclip","owner":"paperclip-ui","description":"A UI builder for styled components and design systems","archived":false,"fork":false,"pushed_at":"2024-04-01T23:03:24.000Z","size":361230,"stargazers_count":106,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-11T07:58:12.035Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paperclip-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-23T18:12:58.000Z","updated_at":"2025-07-07T08:27:57.000Z","dependencies_parsed_at":"2023-02-06T14:45:21.715Z","dependency_job_id":"61e665fa-c85b-4d90-821a-42c520923163","html_url":"https://github.com/paperclip-ui/paperclip","commit_stats":null,"previous_names":["crcn/tandem"],"tags_count":181,"template":false,"template_full_name":null,"purl":"pkg:github/paperclip-ui/paperclip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paperclip-ui%2Fpaperclip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paperclip-ui%2Fpaperclip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paperclip-ui%2Fpaperclip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paperclip-ui%2Fpaperclip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paperclip-ui","download_url":"https://codeload.github.com/paperclip-ui/paperclip/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paperclip-ui%2Fpaperclip/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265566362,"owners_count":23789261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-08-09T04:02:00.419Z","updated_at":"2025-07-21T21:31:10.234Z","avatar_url":"https://github.com/paperclip-ui.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/logo-outline-5.png\" width=\"400px\"\u003e\n\u003c/p\u003e\n\n\u003e Join the [Discord channel](https://discord.gg/H6wEVtd) for the latest updates!\n\n```\nnpx paperclip designer --open\n```\n\n### Paperclip is a UI builder for creating **styled components** visually.\n\nhttps://github.com/paperclip-ui/paperclip/assets/757408/429b22e0-41d6-4621-8b6e-613c1686cdda\n\nPaperclip 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.\n\n### Project goals + highlights\n\n- Languange + framework agnostic\n- Provide a scalable way of styling with CSS without the cascading part\n- No runtime. PC files are compiled to static HTML and CSS.\n- Make it easier for anyone to build UIs\n- No dependencies! Just download one of the [releases to run Paperclip](https://github.com/paperclip-ui/paperclip/releases)\n\n### File format\n\nPaperclip emits plain-text design files. Here's an example of of one:\n\n```javascript\n\n// You may define individual tokens to be re-used\npublic token fontFamily Inter\n\npublic token background01 #333\npublic token background02 #555\npublic token fontColor #333\n\n// You may also define groups of styles\npublic style defaultFont {\n  font-family: var(fontFamily)\n  color: var(fontColor)\n}\n\n// re-usable chunk of HTML and CSS\npublic component Button {\n  variant hover trigger {\n    \":hover\"\n  }\n\n  render button {\n    style extends defaultFont {\n      background: var(background01)\n    }\n    style variant hover {\n      background: var(background02)\n    }\n    slot children\n  }\n}\n```\n\nThis can compile to vanilla HTML and CSS, as well any supported target framework or language of your choosing. Here's an example of how\nthe example above might be compiled to CSS:\n\n```css\n:root {\n    --fontFamily: Inter\n    --background01: #333\n    --background02: #333\n    --fontColor: #333\n}\n\n.Button {\n    font-family: var(--fontFamily)\n    color: var(--fontColor)\n    background: var(--background01)\n}\n\n.Button:hover {\n    background: var(--background02)\n}\n```\n\nAnd here's how the file might be compiled to React code:\n\n```tsx\nexport const Button = ({ children }) =\u003e (\n  \u003cbutton className=\"Button\"\u003e{children}\u003c/button\u003e\n);\n```\n\n### Getting Started\n\n1. **run this command in your project directory:**\n\n```\nnpx paperclip init\n```\n\nThis will create a `paperclip.config.json` file for you.\n\n2. **Copy the following contents to `src/hello.pc`**\n\n```typescript\npublic component Hello {\n  render div {\n    style {\n      color: red\n    }\n    slot children\n  }\n}\n```\n\n3. **Run `npx paperclip build`**\n\nThis will compile your `*.pc` files into code that you can import\ndirectly into your app.\n\nAnd that's it! 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaperclip-ui%2Fpaperclip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaperclip-ui%2Fpaperclip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaperclip-ui%2Fpaperclip/lists"}