Puck Editor

A modern, customizable visual editor for building web pages. Built on @measured/puck with an intuitive theme editor and drag-and-drop interface.

Live Demo: Try it out →

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:

@rtaydev/vizzie-editor

⚠️ Package Name Change: This package has been renamed from @puck-editor/visual to @rtaydev/vizzie-editor. The old package is deprecated. Please see the migration guide for details.

The main visual editor component library. A React component for Next.js that provides a complete page builder experience.

Install:

npm install @rtaydev/vizzie-editor @measured/puck react react-dom

Quick Start:

import { PuckEditor } from '@rtaydev/vizzie-editor';
import '@rtaydev/vizzie-editor/styles.css';

export default function Editor() {
	return (
		<PuckEditor
			data={{ root: {} }}
			onPublish={(data) => console.log(data)}
			options={{ sidebarPosition: 'right' }}
		/>
	);
}

See packages/visual/README.md for full documentation.

Development

This project uses pnpm workspaces.

Install Dependencies

pnpm install

Development

pnpm dev

Runs all packages in development mode.

Build

pnpm build

Lint & Type Check

pnpm lint
pnpm typecheck

Publishing

To publish a new version to npm:

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.