General Form Solution --- Piying

wszgrcy
2025-07-29T14:29:02Z
- Piying provides a unified form development experience across different frameworks
- It allows developers to focus more on logic and layout, freeing them from trivial tasks
- Piying's configuration is more semantic, reducing cognitive load for developers, and allows for custom encapsulation
- Piying is fully compatible with all
valibot
Actions, allowing for perfect utilization of its validation and transformation mechanisms
Documentation
- A sensory understanding may help you experience the charm of Piying faster. The website has implemented a large number of examples, making it easy for you to quickly understand Piying.
- https://piying-org.github.io/website/
Current Support
Angular
Vue
React
Why Use Piying?
If you meet the following conditions, Piying is suitable for you
- Reduce the cost of writing and maintaining code
- Type-safe implementation of forms
- Separation of view and logic
- Reduce dependency on underlying frameworks to make the code more generic
- More convenient validation mechanism
If you meet the following conditions, you can try Piying
- There are some similar logic between pages, or some code looks similar
- You hope that future code can be migrated across different frameworks
What Problems Does Piying Solve?
- Piying has fully covered most of the common form functions, so the following problems are solved by Piying compared to mainstream libraries.
Type Safety
- Most forms on the market do not have types, and after designing the form, you often need to write a type again to constrain the input and output
- By defining with
valibot
, you can naturally obtain the type and get the most basic type validation, ensuring that the data type is always correct in any situation
Unified Frontend and Backend Types and Validation
- When both the frontend and backend are developed using JavaScript, a common problem is that the backend's type is already defined, but the backend's interface often only has
interface
/type
, and even worse, there may be no type at all, only telling you which fields are present -
valibot
can provide both types and validation - With the help of Piying's parsing, the relevant validation can be perfectly reflected on the form, making the checks on the frontend and backend the same, reducing maintenance costs and improving data security
General Definition Structure
- Components in different frameworks are implemented differently, so they need to be implemented separately
- However, after registration, the logic part is completely independent of any content in the view, making future migration and maintenance easier
Layout Mobility
- Most forms do not have type safety, and even with metadata definitions, they cannot be moved arbitrarily and can only be displayed according to the defined order
- Piying successfully solves this problem, making the definition and view not coupled, allowing for arbitrary display and adjustment > This way, you can customize the form according to your design requirements rather than being limited in display
Logical OR/AND
- Most forms only implement three controls:
Group
,Array
, andControl
, but lack logical OR/AND, making some logic implementations more complex - For example,
anyOf
andoneOf
in JsonSchema can be easily handled with the correspondingFieldLogicGroup
usingv.intersect
andv.union
for dynamic switching
Model-View/View-Model Separation of Form Controls
- Most form controls have equivalent input and output, meaning that the control inputs
a
=> emits outputa
, and inputsa
=> writesa
into the control - Piying allows processing in these two stages separately, enabling more complex business logic
Test Coverage
✔ Browser application bundle generation complete.
29 07 2025 22:17:37.889:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
29 07 2025 22:17:37.891:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
29 07 2025 22:17:37.910:INFO [launcher]: Starting browser Chrome
29 07 2025 22:17:38.530:INFO [Chrome 138.0.0.0 (Windows 10)]: Connected on socket VqecE5a27WYED9lwAAAB with id 10611162
Chrome 138.0.0.0 (Windows 10): Executed 452 of 454 (skipped 2) SUCCESS (0.944 secs / 0.854 secs)
TOTAL: 452 SUCCESS
=============================== Coverage summary ===============================
Statements : 90.44% ( 1315/1454 )
Branches : 82.19% ( 457/556 )
Functions : 86.16% ( 411/477 )
Lines : 90.69% ( 1258/1387 )
================================================================================
About Open Source
- Currently, due to the large number of repositories, some code needs to be organized, so it will take about a week; please follow the website
- If you have any opinions or suggestions, please feel free to contact me at
wszgrcy@gmail.com