Daply

The Visual Editor for React

Build beautiful drag-and-drop page builders with your own React components.

📚 Documentation · 🎮 Live Demo · 💬 Discord · 🐛 Report Bug

🤔 What is Daply Editor?

DaplyEditor is an open-source visual editor that lets you build drag-and-drop page builders using your own React components. Think of it as the engine that powers tools like Webflow or Squarespace, but you have full control.

✅ Why use Daply?

• 🧩 Use Your Components — Daply works with any React component you build
• ⚡ Framework Friendly — Works with Next.js, Remix, React Router, and more
• 🎨 Fully Customizable — Style and configure everything to match your brand
• 📦 Own Your Data — No vendor lock-in, your data stays with you
• 🆓 MIT Licensed — Free for personal and commercial use

🚀 Quick Start

Option 1: Create a new project (Recommended for beginners)

npx create-daply-app my-app
cd my-app
npm run dev

This sets up a complete project with Daply pre-configured.

Option 2: Add to existing project

npm install @daply-editor/core

📖 Basic Usage

Step 1: Create Your Config

Define the components users can drag and drop:

// puck.config.js
const config = {
  components: {
    // A simple heading component
    Heading: {
      fields: {
        text: { type: "text" },
      },
      defaultProps: {
        text: "Hello World",
      },
      render: ({ text }) => <h1>{text}</h1>,
    },

    // A paragraph component
    Paragraph: {
      fields: {
        content: { type: "textarea" },
      },
      render: ({ content }) => <p>{content}</p>,
    },
  },
};

export default config;

Step 2: Render the Editor

// Editor.jsx
import { Puck } from "@daply-editor/core";
import "@daply-editor/core/daply.css";
import config from "./puck.config";

function Editor() {
  const handlePublish = (data) => {
    // Save to your database
    console.log("Page saved!", data);
  };

  return (
    <Puck 
      config={config} 
      data={{}} 
      onPublish={handlePublish} 
    />
  );
}

export default Editor;

Step 3: Render Published Pages

// Page.jsx
import { Render } from "@daply-editor/core";
import config from "./puck.config";

function Page({ data }) {
  return <Render config={config} data={data} />;
}

export default Page;

📦 Starter Templates

Use create-daply-app to quickly scaffold a project:

npx create-daply-app my-app

Choose from these templates:

| Template | Description | |----------|-------------| | Next.js | App Router with static generation | | Remix | Dynamic routes with server rendering | | React Router | Client-side routing with Vite |

🛠️ Core Concepts

| Concept | Description | |---------|-------------| | Config | Defines your draggable components and their editable fields | | Data | JSON representing the page structure (what users created) | | Puck | The editor component where users build pages | | Render | Displays the final page to end users |

📚 Learn More

• 📖 Full Documentation
• 🎓 Getting Started Guide
• 🧩 Component Configuration
• 🎨 Theming & Customization

💬 Community & Support

• Discord Server — Chat with the community
• GitHub Issues — Report bugs or request features
• GitHub Discussions — Ask questions

🤝 Contributing

We love contributions! Check out our Contributing Guide to get started.

📄 License

MIT © Daply Contributors

Built with ❤️ by the Daply team

⬆ Back to top