https://github.com/rtaydev/vizzie-puckeditor
A modern, customizable visual editor for building web pages. Built on puckeditor with an intuitive theme editor and drag-and-drop interface.
https://github.com/rtaydev/vizzie-puckeditor
editor nextjs puck react rich-text-editor visual-editor
Last synced: 5 months ago
JSON representation
A modern, customizable visual editor for building web pages. Built on puckeditor with an intuitive theme editor and drag-and-drop interface.
- Host: GitHub
- URL: https://github.com/rtaydev/vizzie-puckeditor
- Owner: rtaydev
- Created: 2025-12-27T19:35:53.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-12-31T15:18:04.000Z (6 months ago)
- Last Synced: 2026-01-02T04:46:16.430Z (6 months ago)
- Topics: editor, nextjs, puck, react, rich-text-editor, visual-editor
- Language: TypeScript
- Homepage: https://vizzie-puckeditor-example.vercel.app/
- Size: 1.44 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Puck Editor
A modern, customizable visual editor for building web pages. Built on [@measured/puck](https://puck.sh) with an intuitive theme editor and drag-and-drop interface.
[](https://gifyu.com/image/bhpaQ)
## What is Puck Editor?
Puck Editor is a visual page builder that gives you:
- ✨ **Drag-and-drop interface** for building pages visually
- 🎨 **Theme editor** with real-time color and typography customization
- 🎯 **Pre-built blocks** including heroes, features, cards, grids, and more
- ⚙️ **Full TypeScript support** with comprehensive configuration
- 💾 **LocalStorage persistence** for automatic data saving
- 📱 **Responsive design** that works on all devices
- 🎭 **Design tokens system** for colors, typography, spacing, and shadows
## Packages
This is a monorepo containing:
### [@puck-editor/visual](./packages/visual)
The main visual editor component library. A React component for Next.js that provides a complete page builder experience.
**Install:**
```bash
npm install @puck-editor/visual @measured/puck react react-dom
```
**Quick Start:**
```tsx
import { PuckEditor } from '@puck-editor/visual';
import '@puck-editor/visual/styles.css';
export default function Editor() {
return (
console.log(data)}
options={{ sidebarPosition: 'right' }}
/>
);
}
```
See [packages/visual/README.md](./packages/visual/README.md) for full documentation.
## Development
This project uses **pnpm workspaces**.
### Install Dependencies
```bash
pnpm install
```
### Development
```bash
pnpm dev
```
Runs all packages in development mode.
### Build
```bash
pnpm build
```
### Lint & Type Check
```bash
pnpm lint
pnpm typecheck
```
## Publishing
To publish a new version to npm:
```bash
cd packages/visual
pnpm version patch # or minor/major
pnpm build
pnpm publish
```
## License
MIT
## Support
For issues, questions, or feature requests, please open an issue on GitHub.