https://github.com/productdevbook/tiptap-shadcn-vue
Shadcn Tiptap Vue / Nuxt
https://github.com/productdevbook/tiptap-shadcn-vue
shadcn-tiptap tiptap tiptap-nuxt tiptap-v3 tiptap-vue
Last synced: about 2 months ago
JSON representation
Shadcn Tiptap Vue / Nuxt
- Host: GitHub
- URL: https://github.com/productdevbook/tiptap-shadcn-vue
- Owner: productdevbook
- License: mit
- Created: 2025-04-03T20:23:01.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-18T04:08:15.000Z (about 2 months ago)
- Last Synced: 2025-04-18T16:52:48.058Z (about 2 months ago)
- Topics: shadcn-tiptap, tiptap, tiptap-nuxt, tiptap-v3, tiptap-vue
- Language: Vue
- Homepage: https://tiptap-shadcn-vue.pages.dev
- Size: 294 KB
- Stars: 66
- Watchers: 1
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tiptap Shadcn Vue / Nuxt 🚀
This library aims to be a powerful and flexible editor within the Vue ecosystem, combining Tiptap with ShadCN for a seamless experience. ✨
🌐 **Demo:** [https://tiptap-shadcn-vue.pages.dev](https://tiptap-shadcn-vue.pages.dev)
👉 While it's not my main priority, I will provide active support.
👥 If you'd like to contribute, I can invite you to the project.
💡 Have an idea? Open an issue, and let's discuss!
Let's build an amazing editor for Vue together! 🎨🔥
## Components
This package includes the following components:
- **TiptapEditor**: Main wrapper component
- **TiptapProvider**: Context provider for editor state
- **TiptapContent**: The editable content area
- **TiptapToolbar**: Rich formatting toolbar
- **TiptapTableToolbar**: Table manipulation tools
- **TiptapMobileToolbar**: Mobile-friendly toolbar
- **TiptapStatusBar**: Word count and editor status
- **TiptapTreeStructure**: Document structure navigator
- **TiptapTreeItem**: Individual document structure item
- **TiptapSlotPanel**: Component slot editor panel
- **TiptapKeyboardShortcuts**: Keyboard shortcut reference
- **TiptapIcon**: Icon wrapper for consistency
## Features
- Full-featured rich text editing
- Document structure navigation
- Drag and drop reordering
- Table support
- Component embedding
- Mobile toolbar
- Keyboard shortcuts
- Accessible design
## Installation
Make sure to install the required dependencies:
```bash
npx shadcn-vue@latest add "https://tiptap-shadcn-vue.pages.dev/r/tiptap.json"
```
## Usage
```vue
import StarterKit from '@tiptap/starter-kit'
import { useEditor } from '@tiptap/vue-3'
const editor = useEditor({
content: '<p>Hello World!</p>',
extensions: [
StarterKit,
// Add other extensions as needed
],
})
```
## Shadcn-UI Components
This library uses the following shadcn-ui components:
- Button
- Separator
- Tooltip (TooltipContent, TooltipProvider, TooltipTrigger)
- Icon
- Dialog (DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle)
- Label
- Input
- Badge
- Textarea
Make sure these components are available in your project.
## Development
- pnpm install
- pnpm dev
This library is designed to be highly customizable. You can modify or extend any component to fit your specific needs:
### Component Structure
Components are located in the `components/tiptap` directory. Each component follows a consistent structure:
```
components/tiptap/
├── TiptapEditor.vue
├── TiptapContent.vue
├── TiptapToolbar.vue
└── ...
```
### Component Communication
Components communicate through the editor instance provided by the `TiptapProvider`. When making changes:
- Maintain the existing props and events to ensure compatibility
- Use the editor instance for commands and state management
- Emit appropriate events when modifying interactive elements
### Styling Guidelines
- Components use Tailwind CSS for styling
- Follow the ShadCN design patterns for consistency
- Use CSS variables defined in the theme for colors and spacing
### Testing Changes
After modifying components, test your changes thoroughly across different content types and editor states to ensure compatibility and stability.
## License
MIT