Tipex Editor 0.0.8
Tipex is a cutting-edge rich text editor designed specifically for Svelte applications. Built on the powerful foundations of TipTap and ProseMirror, Tipex provides developers with an intuitive, highly customizable editing experience while abstracting away the complexity of underlying technologies. Whether you're building a simple blog or a complex content management system, Tipex scales to meet your needs.
Key Features
- Rich Text Editing: Full support for formatting, links, lists, images, and code blocks
- Highly Customizable: Extensive theming and component customization options
- Svelte Native: Built specifically for Svelte with reactive bindings and modern svelte 5 runes syntax
- Accessible: WCAG compliant with keyboard navigation and screen reader support
- Extensible: Plugin architecture allows for custom functionality
- TypeScript Ready: Full TypeScript support with comprehensive type definitions
Installation
Install Tipex from NPM using your preferred package manager.
npm install "@friendofsvelte/tipex";Examples & Variants
Check out Tipex Editor Variants and its live preview for examples showcasing what you can build with Tipex, including multiple themes and configurations.
Quick Start
Get started with Tipex in just a few lines of code. Import the component and its styles, then use it in your Svelte application.
<script lang="ts">
import {Tipex} from '@friendofsvelte/tipex';
let body = `<p>The initial html content.</p>`;
</script>
<!-- Shorthands to disable: !floating !focal -->
<Tipex {body} floating focal
style="margin-top: 1rem; margin-bottom: 0;"
class="h-[70vh] border border-neutral-200"/>
Configuration Options
Tipex provides several boolean props for quick configuration:
floating: Enable/disable the floating selection toolbar (!floatingto disable)focal: Enable/disable focus ring styling (!focalto disable)
Styling & Theming
Tipex is built with Tailwind CSS v4 and uses the modern `@import "tailwindcss"` syntax along with the new `@theme` configuration system. Import the CSS file to get started with beautiful, responsive styling powered by the latest Tailwind architecture.
import "@friendofsvelte/tipex/styles/index.css";Tailwind v4 Architecture: Tipex leverages Tailwind CSS v4's advanced features including the new `@theme` configuration, CSS custom properties integration, and the modern import system. The styles use `@layer components` for organization, CSS custom properties for theming (`--color-tipex-*`), and the new `@custom-variant` syntax for dark mode handling. This provides superior performance, better DX, and more flexible customization compared to older Tailwind versions.
Props & Configuration
Tipex accepts a comprehensive set of props for customization and configuration. Here are the available options:
| Prop | Type | Default | Description |
|---|---|---|---|
| extensions | Extensions[] | defaultExtensions | Extensions to be used in the editor. |
| floating | boolean | false | Determines display of default floating menu. |
| oncreate | function | () => {} | Callback function when the editor is created. |
| ondestroy | function | () => {} | Callback function when the editor is destroyed. |
| onupdate | function | () => {} | Callback function when the editor is updated. |
| body | string | '' | HTML content to render. |
| this | TipTap | N/A | Instance of the editor. |
| class | string | '' | Additional CSS classes to apply to the editor container. |
| style | string | '' | Inline styles to apply to the editor container. |
| focal | boolean | true | Focus outline when editing (blue ring). |
| ctxId | ${string}_tipex | _tipex | Sets context ID to get editor instance via getContext. |
Note: For better customization, please have a look at [Slot Props]
Editor Instance Access
Access the TipTap editor instance to programmatically control the editor, execute commands, or listen to events.
<Tipex body={htmlCotent} bind:tipex={editor} />The editor instance provides access to the full TipTap API, including commands for content manipulation, state management, and event handling. This allows for advanced integrations and custom functionality.
Advanced Customization
Tipex is architected with customization at its core. Every aspect of the editor can be tailored to your needs:
- Custom Controls: Replace or extend the default toolbar with your own components
- Theme Customization: Comprehensive CSS custom properties for colors, spacing, and typography
- Extension System: Add new functionality through TipTap's extension architecture
- Event Handling: React to editor events for custom workflows
- Content Validation: Implement custom validation and sanitization logic
Visit the customization guide for detailed examples and advanced techniques.
Commands & API
Leverage the powerful command system to programmatically interact with the editor. Tipex provides full compatibility with TipTap's command API, enabling:
- Content insertion and manipulation
- Formatting and styling operations
- Selection and cursor management
- Undo/redo functionality
- Custom command chaining
Explore the commands documentation for comprehensive examples and use cases.
Performance & Accessibility
Tipex is optimized for performance and accessibility:
- Lazy Loading: Components and extensions load only when needed
- Virtual Scrolling: Efficient handling of large documents
- ARIA Support: Full screen reader compatibility
- Keyboard Navigation: Complete keyboard control for all features
- Focus Management: Proper focus handling for complex interactions
About Friend Of Svelte
Friend Of Svelte is a community-driven organization dedicated to creating high-quality, open-source tools and resources for the Svelte ecosystem. Our mission is to empower developers with exceptional tools that enhance productivity and developer experience.
Join our growing community of contributors and help shape the future of Svelte development. We welcome contributions of all kinds - from code and documentation to feedback and feature requests.
Developer Story: Learn about the journey of creating Tipex and becoming a master Svelte developer in our founder's blog.