puck
formkit

puck | formkit | |
---|---|---|
27 | 37 | |
6,754 | 4,529 | |
- | 0.6% | |
9.8 | 9.0 | |
about 1 month ago | 8 months ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
puck
-
Puck 0.19: Slots API & performance gains
See the full changelog for all changes via the GitHub release.
-
How to Build a React Page Builder: Puck and Tailwind v4.0
If you’re starting from scratch, you can also use one of the Puck recipes to spin up a new project:
-
Top 5 Drag-and-Drop Libraries for React
⭐ Support us on GitHub by dropping a star
-
Top 5 Page Builders for React
Puck is an embeddable, modular, open-source visual editor for React with built-in support for complex drag-and-drop page building. While GrapesJS provides a barebones page building experience, and tools like Builder.io and Storyblok offer fully-fledged CMS platforms, Puck aims to bridge the gap. It combines an extendable ready to use page editor with a fully decoupled page export model—giving you flexibility without locking you into a specific backend or proprietary ecosystem.
-
Show HN: Puck 0.18 adds drag-and-drop for CSS grid and Flexbox
That would be wonderful, but will require some further work. Puck doesn't provide a grid, but it supports user grid implementations.
To support something like you're suggesting would likely require an official Grid component, which I'm now tracking here: https://github.com/measuredco/puck/issues/843
-
Puck v0.17 - React 19 and QOL improvements
The official next recipe now uses Next 15.1 and React 19 by default. If you're using the recipe and want to upgrade, make sure you also upgrade to React 19 as required by Next 15 when using the App Router. See the official Next.js upgrade guide for more info.
-
How to: Puppeteer in AWS Docker Lambda
I was using another great library called puck, which is basically a very customisable editor, that can create sites/newsletters/pdfs (something visual) and came to the next step which was turning the output of the editor into a PDF.
-
Puck 0.15: Dynamic fields
We're grateful for the community's support and contributions. Join the conversation on GitHub and Discord.
- Show HN: Puck (Visual Editor for React) now supports viewport switching
-
Puck visual editor for React, 0.13: Multi-column layouts, custom UIs and RSC
Hello fellow hackers!
We launched Puck in September [on Hackernews](https://news.ycombinator.com/item?id=37391848) after building it for our clients, and had a wild ride to the front page!
I wanted to share a little update on what's happened since:
1. 3.7k starts [on GitHub](https://github.com/measuredco/puck)!
formkit
-
Top 5 Drag-and-Drop Libraries for React
formkit/drag-and-drop is a relatively new, lightweight library developed by the team behind FormKit, a form framework for Vue. Unlike traditional drag-and-drop libraries that manipulate the DOM directly, this one takes a different approach: instead of physically moving elements around, it updates a underlying reactive data model that you provide. This means that rather than worrying about manually reordering elements, you let the library handle updates to your data structure, making it feel more like a natural extension of reactive frameworks.
-
A simple Vue form validation composable with Zod
The Vue ecosystem is packed with many great form validation libraries, VeeValidate, Vuelidate, and FormKit just to name a few.
-
Vue UI kits/component libraries?
if you're going to be dealing with forms then FormKit (not a UI library) is worth your time. It's an architecture-first form framework — can be used with any UI library if you prefer.
-
Nuxt UI is one of the best UI libraries out there
I probably say this too often, but I'm fascinated by how much the Vue ecosystem has been thriving lately. Recent releases of such awesome libraries like FormKit or Radix Vue are great examples of how well the Vue ecosystem has matured lately.
- Celebrate Vue.js with us Support devs and projects, and win cool stuff
-
Create a custom toggle input for Vue FormKit using Headless UI
FormKit is a library that helps you build complex forms in Vue. It is built on top of Vue 3 and uses the composition API. It is very easy to use and has a lot of features. You can check out Formkit Website for more information.
-
Help a fellow backend dev chose a frontend framework for his personal project
If you're in the Vue space (and you will be if you're using Nuxt) then I highly recommend checking out FormKit (I'm one of the maintainers). It's not a UI library — it's a framework for managing your form architecture and data. Forms are some of the most complicated front-end work you'll do if you do them well and FormKit will save you many many tears. If you want a quick primer on "why formkit?" here's a 3-minute video that demonstrates how much simpler a FormKit form will be to manage vs one hand-written in Vue.
-
From React to Vue
If your project requires building forms then FormKit can save you a lot of effort.
-
Using Zod with FormKit
Starting with Beta 17 — FormKit ships with a new Zod plugin that you can use to validate your forms.
-
There's got to be a simpler way to make a responsive textarea...right? Right???
Unironically this, but it's called FormKit. 🥲
What are some alternatives?
react-mrz-scanner - React MRZ Scanner
auto-animate - A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
openaidemo - Demo of how access the OpenAI API using Java 17
vee-validate - ✅ Painless Vue forms
paxml - Pax is a Jax-based machine learning framework for training large scale models. Pax allows for advanced and fully configurable experimentation and parallelization, and has demonstrated industry leading model flop utilization rates.
Vue.Draggable - Vue drag-and-drop component based on Sortable.js
