workflowstacks
automation

Build React apps with puck

Create React apps visually with puck, ideal for founders needing no-code solutions, backed by 13k+ GitHub stars
13,167 stars959 forksTypeScriptHealth Score 9/10Updated 8/20/2026100% free · open source
What it does

Puck is a visual editor that allows you to create React applications without writing code, ideal for non-technical founders who want to build web applications quickly and easily.

Install / run
npm install -g puck
When to use it
  • You need to build a web application but don't have extensive coding knowledge
  • You want to rapidly prototype and test a React application without writing code
  • You're looking for a no-code solution to build a web application with a React-based frontend
Quick start
  1. 1Run 'puck init' to create a new Puck project
  2. 2Open the Puck editor by running 'puck start' and navigate to http://localhost:3000 in your browser
  3. 3Use the visual editor to drag and drop components, configure layouts, and add functionality to your application
  4. 4Save your changes and run 'puck build' to generate the React code for your application
  5. 5Use 'puck export' to export your application as a standalone React project
Ready-to-paste prompt
Run 'puck init my-app' to create a new Puck project called 'my-app' with a basic React setup
Heads up: Make sure you have Node.js (14 or higher) and npm installed on your system before attempting to install and run Puck, as it relies on these dependencies to function correctly
Saves to your device

Topics

ai
builder
drag-and-drop
draganddrop
no-code
nocode
page-builder
pagebuilder
react
visual-editor
How Build React apps with puck works
Codeflow
Free to inspect

Build React apps with puck is a large TypeScript project (~22k lines across 439 code files, plus 61 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit this month, MIT license, has a test suite.

Size
Large codebase
~22k lines · 439 code files · ~3 h to skim
Setup
One-command install
Installs like a normal app. Reading the code is optional.
Runs on
Node.js
No API keys detected
TypeScript 67%MDX 24%CSS 7%JavaScript 2%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    package.json
    Dependencies and the commands it exposes
What's in each folder
packages/Sub-packages / plugins454 files
apps/Sub-packages / plugins233 files
recipes/Examples you can copy80 files
scripts/Helper scripts9 files
.github/CI / automation (GitHub Actions)8 files
READMEHas testsDocumentedCI checksMIT licenseUpdated this month
Quick Actions
Details
Creator
puckeditor
Language
TypeScript
Category
automation
Published
6/2/2023

Are you the creator of this tool? Claim your listing → and earn 85% of every sale.