Flowbite-Svelte WYSIWYG Editor

A full-featured WYSIWYG text editor built with SvelteKit, Tiptap v3, Flowbite-Svelte, and Tailwind CSS.

Features

• Rich Text Formatting: Bold, italic, underline, strike-through
• Text Styling: Colors, highlights, font families, headings (H1-H4)
• Alignment: Left, center, right alignment
• Lists: Bullet lists and ordered lists
• Media: Insert links, images, and tables
• Page Frame View: Toggle between full-width and print-preview layout (US Letter, 8.5" × 11")
• Print Ready: Proper print styles for clean document output
• Dark Mode: Full dark mode support
• Responsive: Works on desktop, tablet, and mobile devices

Tech Stack

• SvelteKit: v2.49.2
• Svelte: v5.46.0
• Tiptap: v3.14.0
• Flowbite-Svelte: v1.31.0
• Tailwind CSS: v3.4.19

Installation

# Clone the repository
git clone https://github.com/gotaug/svelte-editor.git
cd svelte-editor

# Install dependencies
pnpm install

# Start development server
pnpm dev

Usage

1. Open http://localhost:5173 in your browser
2. Use the toolbar to format your text
3. Toggle "Page Frame View" to see print layout
4. Press Ctrl+P (Cmd+P on Mac) to preview print output

Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── Editor.svelte           # Main editor component
│   │   ├── PageFrame.svelte        # Page frame wrapper
│   │   └── toolbar/
│   │       └── EditorToolbar.svelte # Formatting toolbar
│   └── styles/
│       └── print.css               # Print-specific styles
├── routes/
│   ├── +layout.svelte              # Global layout
│   └── +page.svelte                # Home page
└── app.css                         # Global styles

Build

pnpm build

License

MIT