https://github.com/sergeysova/craft
Notion-style WYSIWYG editor with AI extensions support
https://github.com/sergeysova/craft
tiptap typescript
Last synced: 9 months ago
JSON representation
Notion-style WYSIWYG editor with AI extensions support
- Host: GitHub
- URL: https://github.com/sergeysova/craft
- Owner: sergeysova
- License: apache-2.0
- Created: 2023-09-10T12:25:17.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-26T14:30:16.000Z (almost 2 years ago)
- Last Synced: 2025-10-09T02:00:02.478Z (9 months ago)
- Topics: tiptap, typescript
- Language: TypeScript
- Homepage: https://craft.sova.dev
- Size: 87.1 MB
- Stars: 37
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
An open-source Notion-style WYSIWYG editor with AI extensions support.
Introduction ·
Installation ·
Setting Up Locally ·
Tech Stack ·
Contributing ·
Fork ·
Roadmap ·
License
## Introduction
[Craft Editor](https://craft.sova.dev/) is a Notion-style WYSIWYG editor with AI extensions support.
## Installation
To use Craft Editor in a project, you can run the following command to install the `@sergeysova/craft` [NPM package](https://www.npmjs.com/package/@sergeysova/craft):
```
npm add @sergeysova/craft
```
Then, you can use it in your code like this:
```jsx
import { useState } from "react";
import { CraftEditor, JSONContent } from "@sergeysova/craft";
export default function App() {
const [content, setContent] = useState({})
return setContent(editor.getJSON())} />;
}
```
## Setting Up Locally
To set up CraftEditor locally, you'll need to clone the repository.
If you've deployed this to Vercel, you can also use [`vc env pull`](https://vercel.com/docs/cli/env#exporting-development-environment-variables) to pull the environment variables from your Vercel project.
To run the app locally, you can run the following commands:
```
pnpm i
pnpm build
pnpm dev
```
## Tech Stack
CraftEditor is built on the following stack:
- [Tiptap](https://tiptap.dev/) – extendable text editor
- [Prosemirror](https://prosemirror.net/) – text editing framework under Tiptap
- [TailwindCSS](https://tailwindcss.com/) – styles
- [Cal Sans](https://github.com/calcom/font) – font
- [Next.js](https://nextjs.org/) – framework for web app example
- [Vercel](https://vercel.com) – deployments
## Contributing
Here's how you can contribute:
- [Open an issue](https://github.com/sergeysova/craft/issues) if you believe you've encountered a bug.
- Make a [pull request](https://github.com/sergeysova/craft/pull) to add new features/make quality-of-life improvements/fix bugs.
## Repo Activity
## Fork
This project is an enhanced version of [Novel](https://github.com/steven-tey/novel), originally created by Steven Tey. I am forked it to introduce additional customization options, all without the constraints of maintaining backward compatibility of Novel.
I am created `@sergeysova/craft` with the aim of offering a more modular and customizable editor experience. My changes include updating dependencies, streamlining the default editor content, and disabling certain features like the Image block and AI support. These features are not gone for good; rather, I am planning to reintroduce them as optional extensions, giving you the freedom to tailor the editor to your needs.
## Roadmap
- **Documentation**: To provide detailed guides and tutorials for extending functionalities, integrating with state managers, and utilizing AI capabilities.
- **Craft Editor Control**: To seamlessly integrate with any state manager.
- **Modular AI Features**: Move AI capabilities to an extension for optional use.
- **Image Uploading as an Extension**: To give you the choice to include it or not.
- **Command Popup Customization**: Allowing the installation of various block types.
- **Independence from Vercel**: Making CraftEditor fully self-reliant for uploading, AI, analytics, and more.
- **Notion-like Menu**: For each line, features for transforming, settings, deletion, etc., will be available.
- **i18n Support**: To enable internationalization and localization for a more accessible and global user experience.
By making these changes, we aim to provide a more flexible and user-friendly editor that can be easily integrated into your existing tech stack.
## License
Licensed under the [Apache-2.0 license](https://github.com/sergeysova/craft/blob/main/LICENSE.md).