@benbugraer/headline-editor/README.md

A headline editor canvas component for news websites

# Canvas Editor Project

## Türkçe

Bu proje, Next.js tabanlı bir canvas düzenleme uygulamasıdır. Kullanıcılar, interaktif bir arayüz üzerinden çeşitli nesneleri manipüle edebilir ve özelleştirebilir. Bu uygulama, canvas üzerinde çalışan bir çizim kütüphanesi olan Fabric.js'i kullanmaktadır.

## English

This project is a Next.js-based canvas editing application. Users can manipulate and customize various objects through an interactive interface. This application uses Fabric.js, a drawing library that works on canvas.

## Kullanılan Teknolojiler

- **Next.js**: React tabanlı web uygulama çerçevesi
- **TypeScript**: Tip güvenliği için JavaScript üzerine inşa edilmiş programlama dili
- **Tailwind CSS**: Hızlı UI geliştirme için utility-first CSS framework
- **Canvas API**: Dinamik, scriptable çizim için kullanılan web teknolojisi
- **Fabric.js**: Canvas üzerine inşa edilmiş, JavaScript ile çalışan bir çizim kütüphanesi.
- **Shadcn UI**: React için bir UI kütüphanesi.

## Technologies Used

- **Next.js**: React-based web application framework
- **TypeScript**: A programming language built on JavaScript for type safety
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development
- **Canvas API**: Web technology used for dynamic, scriptable drawing
- **Fabric.js**: A JavaScript drawing library built on top of Canvas
- **Shadcn UI**: A UI library for React

## Başlangıç

Projeyi yerel ortamınızda çalıştırmak için:

```bash
npm install
npm run dev
```

Tarayıcınızda [http://localhost:3000](http://localhost:3000) adresini açarak uygulamayı görüntüleyebilirsiniz.

## Getting Started

To run the project in your local environment:

```bash
npm install
npm run dev
```

You can view the application by opening [http://localhost:3000](http://localhost:3000) in your browser.

## Özellikler

- İnteraktif canvas düzenleme
- Nesne seçimi ve manipülasyonu
- Özelleştirilebilir ayarlar
- Responsive tasarım
- Resim yükleme
- Yazı düzenleme
- Dikdörtgen, Çember, Yazı, Resim

## Features

- Interactive canvas editing
- Object selection and manipulation
- Customizable settings
- Responsive design
- Image uploading
- Text editing
- Rectangle, Circle, Text, Image

## License

[MIT](https://choosealicense.com/licenses/mit/)

---

# Headline Editor Canvas

A React component for creating and editing news headline images with a canvas-based editor.

## Installation

You can install the package using npm:

```bash
npm install @bugrakaann/headline-editor-canvas
```

Or using yarn:

```bash
yarn add @bugrakaann/headline-editor-canvas
```

Or using pnpm:

```bash
pnpm add @bugrakaann/headline-editor-canvas
```

## Usage

```jsx
import { HeadlineEditorCanvas } from "@bugrakaann/headline-editor-canvas";

function App() {
  return (
    <div>
      <HeadlineEditorCanvas />
    </div>
  );
}
```

## Features

- Canvas-based image editor
- Text manipulation
- Image upload and manipulation
- Background color customization
- Font selection
- Export functionality
- Responsive design

## Props

| Prop            | Type   | Default   | Description              |
| --------------- | ------ | --------- | ------------------------ |
| width           | number | 800       | Canvas width             |
| height          | number | 600       | Canvas height            |
| backgroundColor | string | '#ffffff' | Default background color |

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

[MIT](https://choosealicense.com/licenses/mit/)

---