https://github.com/kido1611/tiptap-vuejs-example
Rich editor with Tiptap, Tailwind CSS, Reka UI (Dialog), and Vue3 as frontend, combined with Go as backend to store images
https://github.com/kido1611/tiptap-vuejs-example
go reka-ui tailwindcss tiptap vue
Last synced: 5 months ago
JSON representation
Rich editor with Tiptap, Tailwind CSS, Reka UI (Dialog), and Vue3 as frontend, combined with Go as backend to store images
- Host: GitHub
- URL: https://github.com/kido1611/tiptap-vuejs-example
- Owner: kido1611
- Created: 2023-02-05T04:31:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-07-18T00:08:50.000Z (12 months ago)
- Last Synced: 2025-07-18T05:01:21.126Z (12 months ago)
- Topics: go, reka-ui, tailwindcss, tiptap, vue
- Language: Vue
- Homepage: https://kido1611-tiptap-vuejs-example.vercel.app/
- Size: 2.98 MB
- Stars: 31
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tiptap Example
Rich editor with [Tiptap](https://tiptap.dev), Tailwind CSS, Headless UI, and Vue 3 as frontend, combined with Go as backend to store images.
> Now the editor can be used in any components (use v-model, [check App.vue](https://github.com/kido1611/tiptap-vuejs-example/blob/main/src/App.vue#L19)).
## Feature list
- History (Undo, Redo)
- Heading (1,2,3)
- Text style (Bold, Italic, Underline, Strikethrough)
- List (Ordered, Unordered)
- Link
- Image (+ example with Go as server)
- Blockquote
- Table (Delete table, add column, delete column, add row, delete row, merge or split cell)
- Youtube Video
- Horizontal line
## Preview
[https://kido1611-tiptap-vuejs-example.vercel.app/](https://kido1611-tiptap-vuejs-example.vercel.app/)
## Running Frontend
```shell
cp .env.example .env
npm install
npm run dev
```
## Running Backend
```shell
cd server
go get
go run cmd/api/main.go
```
## Icon
- [Tabler Icon](https://tabler-icons.io/)
- [Material Design Icon](https://materialdesignicons.com/)