paperclip-ui / paperclip Goto Github PK
View Code? Open in Web Editor NEWA UI builder for styled components and design systems
A UI builder for styled components and design systems
The goal for this stage is to get Tandem to a state where it's accessible online, and starts moving more towards a UX that's friendly for designers.
Pseudocode
<style>
@trigger mobile {
@media and (max-width: 100px) {
@content;
}
.mobile {
@content;
}
}
</style>
<div>
<style>
font-family: red;
@if mobile {
}
</style>
</div>
TODOs:
Basically a web component wrapper that enables anyone to embed custom component logic into the preview canvas. Compiling will also need to be a consideration here. Some options:
Deploy to:
A lot of companies are already invested in existing tech, so need to figure out how to build tools around these existing services.
Ideally there would be an i18n module that could be loaded in, and displayed visually in the editor (not just in the preview).
Though, I think that this may make it difficult to use the Rust engine. JS may be the best approach here (at least for MVP).
What if there are multiple layers with the same label? What if a designer re-organizes layers? I think it may make more sense to use explicit props
Similar to Framer, this would be useful in combination with Figma
... Or something similar. This could potentially be very expensive if we're loading the entire dependency graph into the editor.
Preferably using exported atoms defined in PC files using existing syntax. The PC file should also optionally be translatable to SCSS, JSON, JavaScript, and other formats. Immediate sense is that this should be doable if we pull exported code out of PC files.
Copy + paste functionality from Figma to Tandem. This should be similar to how Framer does it.
There should be an extension for Tandem that enables non-engineers to edit UIs on the spot
This will be used with:
We can throw all components in a single page and then take a snapshot of that
Environment should specify rules, like should it be possible for people to attach controllers? This should be specific to the target environment.
I think the synthetic DOM can be edited based on mutations that occur since there aren't any computed props. This should increase performance by an order of magnitude.
This could enable custom elements + plugins to be rendered in the preview. Will also need to be able to expose props that can be passed into these native elements.
E.g: necessary for external services like Hubspot
MVP for this is to combine Paperclip + Tandem.
TODOs:
packages/paperclip
)@trigger
keyword@if
keyword@target
keywordLater:
Look at tailwind config and see how something like this can be used for atomic values
At a bare minimum, we just need to close the gap between Paperclip 1.5 and the visual editor. We can maintain a similar UX to the current VS Code extension.
Integration:
Rationale for this is that native elements are interactive. What's keeping the designer from having custom components in the designer (Framer style)?
Right now all text nodes are wrapped in spans. This needs to change.
Or basically something that allows people to work out of the same file vs having two separate files. Maybe go in the direction of allowing scripts to be embedded in PC files, much like Vue.
This would be particularly useful for existing libraries for custom styling - individual components, and even design systems. Tandem could be used to add custom styles to these existing libraries.
Maybe this could be an extension for Tandem? Something that allows users to add custom props to any DIV element -- this could be something like a metadata
field that takes a key/value pair. The editor could load plugins apply a schema to element metadata fields that could be editable in the behavior
tab of any div element. A plugin like this could be paired with a compiler that takes these fields and compiles them down to the target language.
โ๏ธ this is tricky behavior b/c plugin architectures are a shit-show to manage. Maybe something like this could be built-in for now? E.g: allow for people to define metadata, and then allow third-party libraries to use that info to compile PC templates.
Essentially { show && "show this" }
. This is necessary to prevent unnecessary re-renders.
Similar to how Figma works, we should do-away with global variables that are stored in a single panel. This is for organization + making it easier to refactor.
Considerations:
Obvious parts:
Stress testing:
Just some things to keep in mind when building Tandem out
Some way to add logic to UIs visually. This would be particularly useful for areas of the application that are less complicated and can be built visually, such as an onboarding flow.
Not necessary right now, but at some point we'll want to use the Rust engine on the front-end instead of JavaScript. This would be a bit of a lift since the data model is a bit different.
Main TODOs here are:
When dragging & dropping assets to the editor, or pasting from somewhere else like Figma, assets should be uploaded to a common directory pulled from the project config.
I think there should be the ability to eject UIs to target libraries, like SASS, styled-components, emotion. This code could also be used to integrate with these other libraries.
Effort is high since this would require a central server (since CRDT ids would need to be maintained for a session)
Something worth exploring, but I think it may be important to allow apps to be built end-to-end within Tandem - not to the degree of actually coding, but giving people building blocks to build apps without needing to jump into code.
A simple example of this is being able to create a website and to be able to link to other pages without needing to wire anything up with code.
Another example is being able to bind data to elements in the canvas from an external source (CMS).
Goal for this ticket is to get PC closer to something that's compatible with Tandem. PC will still contain more features that are available in the UI -- that's not the goal here. Instead, we need to look at various UI features and build them into the language.
Considerations:
PC Considerations:
Changes that can be imposed on the editor:
Changes imposed on Paperclip:
& > :global(*) { flex: 1; }
@variant
syntaxExercises:
Litmus test:
Some kind of online functionality for forking templates, and publishing websites really quickly. E.g: https://carrd.co
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.