@fileverse-dev/ddraw

Ddraw Editor

Ddraw Editor is a powerful and customizable drawing editor built on top of the Tldraw library. This repository contains both example/demo source code and the package code for the Ddraw Editor component.

Repository Structure

• /package: Contains the package code for the Ddraw Editor component
• /: Root directory contains example and demo source code

Features

• Customizable drawing interface
• Optional preview mode
• Customizable toolbar
• Built on top of Tldraw for robust drawing capabilities
• Responsive design with mobile support

Installation

To use the Ddraw Editor in your project, you'll need to install it along with its dependencies:

Prequisites

• You should be using tailwindcss and it must have tailwind configuration

import { DdrawEditor } from '@fileverse-dev/ddraw'

import '@fileverse-dev/ddraw/styles' in App.jsx/App.tsx

In your tailwind config, add this line to content array

@fileverse-dev/ddraw/dist/index.es.js

That's it, you should be able to use DdrawEditor now

## Props

The `DdrawEditor` component accepts the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `renderNavbar` | `(editor: Editor) => React.ReactNode` | `undefined` | Optional function to render a custom navbar. |
| `onChange` | `(snapshot: TLSnapshot) => void` | `undefined` | Callback function called when the drawing changes. |
| `isPreviewMode` | `boolean` | `false` | Enables read-only preview mode when true. |
| `snapshot` | `TLSnapshot` | `undefined` | Initial snapshot to load into the editor. |

## Customization

### Custom Navbar

You can provide a custom navbar by passing a function to the `renderNavbar` prop: