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.
Svelte5 and runes mode activated! ✨🔮
Install the package from NPM:
npm install "@friendofsvelte/tipex"
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.
Import the component and use it in your component:
<script lang="ts">
import {Tipex} from "@friendofsvelte/tipex";
let body = `<p>This <a target="_blank" rel="noopener noreferrer" href="">content</a> is written by <a target="_blank" rel="noopener noreferrer" href="http://bishwas.net/">Bishwas</a> in 2023.</p>`;
</script>
<Tipex
{body}
floating
style="margin-top: 1rem; margin-bottom: 0;"
class="h-[70vh] border border-neutral-200"
/>
Tipex features an intelligent control system that automatically detects which interface to display:
Default Controls (automatic when no controlComponent
is provided):
utilities
snippetCustom Controls (when controlComponent
snippet is provided):
This automatic detection eliminates the need for boolean flags and provides a cleaner API.
Tipex leverages Tiptap's extension system for enhanced functionality:
import { Tipex } from "@friendofsvelte/tipex";
import { TextAlign } from '@tiptap/extension-text-align';
const extensions = [
TextAlign.configure({
types: ['heading', 'paragraph'],
}),
];
// Use in component
<Tipex { extensions }
/>
The floating menu provides context-aware formatting options:
<Tipex floating /> // Enables the floating menu
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>
Add custom controls while keeping the default toolbar:
<script lang="ts">
import {Tipex} from "@friendofsvelte/tipex";
let body = "";
</script>
<Tipex {body}>
{#snippet utilities(editor)}
<CustomFormatting {editor} />
{/snippet}
</Tipex>
Create a completely custom control interface:
<script lang="ts">
import {Tipex} from "@friendofsvelte/tipex";
let body = "";
</script>
<Tipex {body}>
{#snippet controlComponent(editor)}
<MyCustomControls {editor} />
{/snippet}
</Tipex>
<script lang="ts">
import {Tipex} from "@friendofsvelte/tipex";
let body = "";
let editor: Editor | undefined = $state();
const htmlContent = $derived(editor?.getHTML()); // Get HTML content
</script>
<Tipex {body} bind:tipex={editor} />
For comprehensive documentation, visit tipex.pages.dev.
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.
If you like this project, you can be one of the friends by contributing to the project. Memberships are open for everyone.
MIT Licensed. Copyright (c) 2023-2024 Friend of Svelte.