Tipex

Tipex stands as an advanced rich text editor tailored for Svelte, meticulously engineered with the robust frameworks Tiptap and Prosemirror. It empowers developers to effortlessly craft rich text editors, liberating them from the intricacies of underlying technologies, style management, and related complexities.

Svelte 5 and runes mode activated! ✨🔮

Key Features

• 🚀 Svelte 5 Ready: Built with Svelte 5's latest features including runes, snippets, and modern reactivity
• 🎨 Smart Control System: Automatically detects whether to show default or custom controls based on controlComponent prop
• 🔌 Extensible Architecture: Fully extensible through Tiptap's extension system with default extensions included
• 📱 Mobile Responsive: Optimized for both desktop and mobile with touch-friendly interactions
• 🎯 Context-Aware Floating Menu: Intelligent floating toolbar that appears on text selection
• 🔗 Advanced Link Management: Built-in link editing with clipboard integration and visual feedback
• ✅ Task Lists: Native support for interactive checkboxes and task management
• 🎭 Modern Theming: Built with Tailwind CSS v4 using OKLCH colors and CSS custom properties
• ⚡ Performance Optimized: Leverages Svelte's reactivity and efficient DOM updates
• 💼 Full TypeScript Support: Complete type safety with comprehensive type definitions
• 🎨 Focus Management: Smart focus detection with visual feedback and accessibility support

Installation

Install the package from NPM:

npm install "@friendofsvelte/tipex"

Tiptap v3 is a peer dependency. npm 7+ and pnpm install it automatically; otherwise install it alongside:

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/extensions @tiptap/extension-list @tiptap/extension-image @tiptap/extension-code-block @tiptap/extension-code-block-lowlight @tiptap/extension-floating-menu

Check out Tipex Editor Variants and its live preview for examples showcasing what you can build with the Tipex Svelte text editor, including multiple themes and configurations.

Basic Usage

Import the component and styles, then use it in your Svelte component:

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';
    import '@friendofsvelte/tipex/styles/index.css';

    let body = `<h1>My Project Notes</h1>
    <p>I've been working on this <strong>new feature</strong> for the past few days. 
    It's been quite <em>challenging</em> but I think I'm making good progress.</p>
    
    <h2>Things I need to do</h2>
    <ul data-type="taskList">
        <li data-type="taskItem" data-checked="true">Set up the development environment</li>
        <li data-type="taskItem" data-checked="false">Write the core functionality</li>
        <li data-type="taskItem" data-checked="false">Add error handling</li>
    </ul>
    
    <p>Check out the <a href="https://tiptap.dev/">TipTap documentation</a> for more features!</p>`;
</script>

<Tipex
    {body}
    floating
    focal
    style="margin-top: 1rem; margin-bottom: 0;"
    class="h-[70vh] border border-neutral-200/80"
/>

Core Concepts

Control System

Tipex features a simple and flexible control system:

1. Default Controls (automatic when no controlComponent is provided):

   • Pre-built formatting toolbar with essential editing tools
   • Built-in utility buttons (copy, link management)
   • Perfect for quick implementation

2. Custom Controls (when controlComponent snippet is provided):

   • Full control over the editor interface
   • Complete customization freedom
   • Can extend default controls or create entirely new interfaces
   • Ideal for specialized use cases

3. No Controls (when controlComponent={null} is explicitly set):

   • Completely hides all control elements
   • Provides a clean, minimal editor interface
   • Perfect for read-only or embedded scenarios

This simple approach provides maximum flexibility while maintaining ease of use.

Extension System

Tipex leverages Tiptap's extension system for enhanced functionality. The extensions prop fully replaces the default extensions (including StarterKit). To extend the defaults, spread defaultExtensions and add your own:

<script lang="ts">
    import { Tipex, defaultExtensions } from '@friendofsvelte/tipex';
    import { TextAlign } from '@tiptap/extension-text-align';
    import { Highlight } from '@tiptap/extension-highlight';

    // Extend default extensions
    const customExtensions = [
        ...defaultExtensions,
        TextAlign.configure({
            types: ['heading', 'paragraph'],
            alignments: ['left', 'center', 'right', 'justify']
        }),
        Highlight.configure({
            multicolor: true
        })
    ];

    let body = '';
</script>

<Tipex {body} extensions={customExtensions} />

If you pass a fully custom extensions array, none of the defaults are kept — supply everything the editor needs (document, paragraph and text nodes, e.g. via your own StarterKit).

Floating Menu

The floating menu provides context-aware formatting options that appear when text is selected:

<Tipex floating /> <!-- Enables the floating menu -->

Focus Management

Tipex includes smart focus detection with visual feedback:

<Tipex focal />
<!-- Default: shows focus ring -->
<Tipex !focal />
<!-- Disables focus ring -->

Modern Theming with Tailwind CSS v4

Tipex is built with Tailwind CSS v4 and uses modern OKLCH colors for better color accuracy and consistency. The theming system uses CSS custom properties that you can override:

@import '@friendofsvelte/tipex/styles/index.css';

@theme {
    /* Override Tipex colors */
    --color-tipex-primary-500: oklch(0.65 0.11 285); /* Custom purple */
    --color-tipex-success-500: oklch(0.647 0.208 142.425); /* Custom green */

    /* Custom spacing */
    --spacing-tipex-md: 1.25rem;
    --spacing-tipex-lg: 2rem;
}

Available CSS Custom Properties

• Colors: --color-tipex-{50-950}, --color-tipex-primary-{50-950}, --color-tipex-success-{50-950}
• Spacing: --spacing-tipex-{xs,sm,md,lg,xl,2xl}
• Sizing: --size-tipex-{1-12}
• Typography: --text-tipex-{xs,sm,base,lg,xl,2xl}
• Border Radius: --radius-tipex-{sm,md}
• Z-Index: --z-tipex-{floating,controls}

Advanced Usage

Custom Head and Foot Sections

Add custom components above or below the editor using Svelte 5 snippets:

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';

    let body = '';
</script>

<Tipex {body}>
    {#snippet head(editor)}
        <CustomHeader {editor} />
    {/snippet}

    {#snippet foot(editor)}
        <CustomFooter {editor} />
    {/snippet}
</Tipex>

Extending Default Controls

Add custom utilities while keeping the default toolbar:

<script lang="ts">
    import { Tipex, Controls } from '@friendofsvelte/tipex';

    let body = '';
</script>

<Tipex {body}>
    {#snippet controlComponent(tipex)}
        <Controls {tipex}>
            <!-- Built-in utilities: copy HTML and link editing with clipboard integration -->
            <!-- Add custom utilities here -->
            <button class="tipex-edit-button tipex-button-rigid" aria-label="Export PDF">
                📄 Export
            </button>
        </Controls>
    {/snippet}
</Tipex>

Custom Control Component

Create a completely custom control interface:

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';

    let body = '';
</script>

<Tipex {body}>
    {#snippet controlComponent(tipex)}
        <div class="my-custom-controls">
            <button onclick={() => tipex.commands.toggleBold()}>
                <strong>B</strong>
            </button>
            <button onclick={() => tipex.commands.toggleItalic()}>
                <em>I</em>
            </button>
            <button onclick={() => tipex.commands.toggleTaskList()}> ✅ Tasks </button>
        </div>
    {/snippet}
</Tipex>

No Controls (Minimal Editor)

Hide all controls for a clean, minimal editor interface:

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';

    let body = '';
</script>

<!-- Editor with no controls - perfect for embedded or read-only scenarios -->
<Tipex {body} controlComponent={null} />

Enter Key Behavior (Single vs Double Line Spacing)

Pressing Enter starts a new paragraph (<p>), while Shift+Enter inserts a hard break (<br>) within the current paragraph. This is standard ProseMirror/Tiptap behavior and matches how most rich text editors work.

New paragraphs can look "double spaced" because Tipex's default styles give each paragraph a bottom margin: the rule .tipex-editor-section .ProseMirror p applies margin-bottom: var(--spacing-tipex-md) (1rem by default). Depending on what you want, there are two ways to change this:

Option A: Keep paragraphs, remove the visual gap (CSS)

Override the paragraph margin in your own stylesheet:

@import '@friendofsvelte/tipex/styles/index.css';

.tipex-editor .ProseMirror p {
    margin-bottom: 0;
}

This keeps the default Enter = new paragraph semantics (better for structured content) and only removes the spacing between paragraphs.

Option B: Make Enter insert a hard break instead of a new paragraph

Add a small extension that remaps Enter to a hard break:

<script lang="ts">
    import { Tipex, defaultExtensions } from '@friendofsvelte/tipex';
    import { Extension } from '@tiptap/core';

    const HardBreakOnEnter = Extension.create({
        name: 'hardBreakOnEnter',
        addKeyboardShortcuts() {
            return {
                Enter: () => this.editor.commands.setHardBreak()
            };
        }
    });

    let body = '';
</script>

<Tipex {body} extensions={[...defaultExtensions, HardBreakOnEnter]} />

With this extension, typing a, pressing Enter, then typing b produces <p>a<br>b</p> instead of two paragraphs. Note that this changes the document structure: all content stays in a single paragraph, so prefer Option A if you still want semantic paragraphs.

Props & Configuration

Based on the actual TipexProps interface, here are all available properties:

Boolean Props with Negation

You can disable boolean props using the ! prefix:

<Tipex !focal !floating /> <!-- Disables focus ring and floating menu -->

Getting Editor Content

Access the editor instance and its content using Svelte 5 runes:

<script lang="ts">
    import { Tipex } from '@friendofsvelte/tipex';
    import type { Editor } from '@tiptap/core';

    let body = '';
    let editor: Editor | undefined = $state();

    // Reactive HTML content
    const htmlContent = $derived(editor?.getHTML() ?? '');

    // Reactive text content (no HTML tags)
    const textContent = $derived(editor?.getText() ?? '');

    // Reactive word count
    const wordCount = $derived(
        editor
            ?.getText()
            .split(/\s+/)
            .filter((word) => word.length > 0).length ?? 0
    );
</script>

<Tipex {body} bind:tipex={editor} />

<div class="editor-stats">
    <p>Words: {wordCount}</p>
    <p>Characters: {textContent.length}</p>
</div>

<details>
    <summary>HTML Output</summary>
    <pre>{htmlContent}</pre>
</details>

Documentation

For comprehensive documentation, visit tipex.pages.dev.

About Friend Of Svelte

Friend Of Svelte is a community-driven project to help Svelte developers find and develop awesome Svelte resources. Our mission is to create high-quality, maintainable, and accessible tools for the Svelte ecosystem.

Join the Community

• 🌟 Star our repositories
• 🤝 Contribute to projects
• 📢 Share your ideas
• 👥 Open memberships for everyone

If you like this project, you can be one of the friends by contributing to the project. Memberships are open for everyone.

License

MIT Licensed. Copyright (c) 2023-2024 Friend of Svelte.